{% extends "template_features.html" %}
{% load i18n static wger_extras crispy_forms_tags %}

{#           #}
{# Opengraph #}
{#           #}
{% block opengraph %}
    {{ block.super }}
    <meta property="og:title" content="{% translate 'Features' %} - wger">
    <meta property="og:description"
          content="{% blocktranslate %}wger Workout Manager is a free, open source web application that manages your exercises and workouts.{% endblocktranslate %}">
{% endblock %}

{% block opengraphimages %}
    <meta property="og:image" content="{% static 'images/logos/logo-font.svg' %}">
{% endblock %}


{#         #}
{# Content #}
{#         #}
{% block template %}

    <!-- header -->
    <header>
        <!-- navbar -->
        <nav class="navbar navbar-expand-lg px-4">
            <div class="container-xl">
                <a class="navbar-brand" href="{% url 'core:index' %}">
                    <img src="{% static 'images/logos/logo-font.svg' %}" alt="wger logo"/>
                </a>
                <button class="navbar-toggler"
                        type="button"
                        data-bs-toggle="collapse"
                        data-bs-target="#navbarSupportedContent"
                        aria-controls="navbarSupportedContent"
                        aria-expanded="false"
                        aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                        <li class="nav-item mx-2 my-1">
                            <a class="nav-link fw-semibold" aria-current="page"
                               href="{% url 'software:about-us' %}">{% translate "Contact" %}
                            </a>
                        </li>
                        <li class="nav-item mx-2 my-1">
                            <a class="nav-link fw-semibold"
                               href="{% url 'exercise:exercise:overview' %}">
                                {% translate "Exercises" %}
                            </a>
                        </li>
                        {% if show_app_store_links %}
                            <li class="nav-item mx-2 my-1">
                                <a class="nav-link fw-semibold"
                                   href="https://play.google.com/store/apps/details?id=de.wger.flutter">
                                    {% translate "Mobile app" %}
                                </a>
                            </li>
                        {% endif %}
                        <li class="nav-item mx-2 my-1">
                            <a class="nav-link fw-semibold"
                               href="https://www.buymeacoffee.com/wger">
                                {% translate "Donate" %}
                            </a>
                        </li>
                        <li class="nav-item mx-2 my-1">
                            <a class="nav-link fw-semibold" href="https://github.com/wger-project">
                                {% translate "Develop" %}
                            </a>
                        </li>
                        <li class="nav-item mx-2 my-1">
                            <a class="nav-link fw-semibold" href="https://discord.gg/rPWFv6W">
                                {% translate "Community" %}
                            </a>
                        </li>
                    </ul>
                    <!-- buttons -->
                    {% if not user.is_authenticated %}
                        <div class="d-flex gap-2 my-2 my-lg-0">
                            <a role="button" class="btn btn-transparent"
                               href="{% url 'core:user:login' %}">
                                {% translate "Login" %}
                            </a>
                            {% if allow_registration %}
                                <a role="button" class="btn btn-primary rounded-1 bg-dark-blue px-4"
                                   href="{% url 'core:user:registration' %}">
                                    {% translate "Register" %}
                                </a>
                            {% endif %}
                        </div>
                    {% endif %}
                </div>
            </div>
        </nav>

        <div class="container-xl">
            <!-- hero section -->
            <section
                class="row px-3 mb-5 d-flex align-items-center justify-content-center gap-2 flex-row-reverse">
                <div class="col-lg-7 col-sm-6 col-12 d-flex px-5 flex-column align-items-center">
                    <picture>
                        <source srcset="{% static 'images/hero.avif' %}" type="image/avif">
                        <img src="{% static 'images/hero.png' %}"
                             alt="a man with a dumbbell"
                             class="header-hero-image">
                    </picture>
                </div>
                <div class="col-lg-3 col-sm-5 col-11 d-flex py-3 flex-column align-items-start">
                    <h1 class="font-bebas-neue display-3 uppercase">
                        {% translate "Track your <br> way to your <br> ideal body" %}
                    </h1>
                    <p>
                        {% translate "Join wger, the community-driven <b>free and open-source fitness tracker</b>" %}
                    </p>

                    <a role="button"
                       class="btn btn-primary rounded-1 bg-dark-blue py-2 px-5"
                       href="{% if user.is_authenticated %}
                                {% url 'core:index' %}
                            {% else %}
                                {% url 'core:user:registration' %}
                            {% endif %}">
                        {% translate "Get Started" %}
                    </a>

                </div>
            </section>

            <!-- board section -->
            <section class="row">
                <div class="col-6 col-md-3 d-flex flex-column align-items-center">
                    <h2 class="display-3 font-bebas-neue text-dark-blue mb-0">{{ nr_users }}+</h2>
                    <p class="text-center">{% translate "people <br> using wger" %}</p>
                </div>
                <div class="col-6 col-md-3 d-flex flex-column align-items-center">
                    <h2 class="display-3 font-bebas-neue text-dark-blue mb-0">{{ nr_exercises }}+</h2>
                    <p class="text-center">{% translate "exercises <br> for workout creation" %}</p>
                </div>
                <div class="col-6 col-md-3 d-flex flex-column align-items-center">
                    <h2 class="display-3 font-bebas-neue text-dark-blue mb-0">{{ nr_ingredients }}+</h2>
                    <p class="text-center">{% translate "foods <br> for meal planning" %}</p>
                </div>
                <div class="col-6 col-md-3 d-flex flex-column align-items-center">
                    <h2 class="display-3 font-bebas-neue text-dark-blue mb-0">{{ nr_stars }}+</h2>
                    <p class="text-center">{% translate "stars <br> on GitHub" %}</p>
                </div>
            </section>
        </div>
    </header>

    <!-- main content -->
    <main>
        <div class="container-xl">

            <!-- section 1 - workout regimen -->
            <section class="main-section">
                <div
                    class="row row-cols row-cols-lg-2 row-cols-sm-1 px-3 w-100 justify-content-center flex-reverse gy-3">
                    <div
                        class="col-lg-7 col-sm-12 d-flex flex-column justify-content-center align-items-center position-relative">
                        <picture>
                            <source srcset="{% static 'images/screens-1.avif' %}" type="image/avif">
                            <img src="{% static 'images/screens-1.png' %}"
                                 alt="mobile screen showing wger feature"
                                 class="img-fluid"
                                 loading="lazy">
                        </picture>
                    </div>

                    <div
                        class="col-lg-5 col-sm-12 d-flex flex-column align-items-start justify-content-center py-2">
                        <h2 class="w-100 font-bebas-neue display-4 uppercase header-workout">
                            {% translate "Craft your perfect <span>workout routines</span>" %}
                        </h2>
                        <ul class="hex-bullet bullet-red">
                            <li>
                                {% translate "Design a weekly workout plan from more than 100 exercises" %}
                            </li>
                            <li>
                                {% translate "Set reps and sets, duration, or distance goals for each exercise" %}
                            </li>
                            <li>
                                {% translate "Get guided through your workouts step by step" %}
                            </li>
                            <li>
                                {% translate "Keep track of the workouts you've done, including how you felt you performed" %}
                            </li>
                        </ul>
                    </div>
                </div>
            </section>

            <!-- section 2 - daily meals -->
            <section class="main-section">
                <div
                    class="row row-cols row-cols-lg-2 row-cols-sm-1 px-3 w-100 justify-content-center gy-3">
                    <div
                        class="col-lg-7 col-sm-12 d-flex flex-column justify-content-center align-items-center position-relative"
                        style="overflow: hidden;">
                        <picture>
                            <source srcset="{% static 'images/screens-2.avif' %}" type="image/avif">
                            <img src="{% static 'images/screens-2.png' %}"
                                 alt="mobile screen showing wger feature"
                                 class="img-fluid"
                                 loading="lazy">
                        </picture>
                    </div>
                    <div
                        class="col-lg-5 col-sm-12 d-flex flex-column align-items-start justify-content-center">
                        <h2 class="w-100 font-bebas-neue display-4 uppercase header-meals">
                            {% translate "Plan your <span>daily meals</span>" %}
                        </h2>
                        <ul class="gap-1 hex-bullet bullet-dark-yellow">
                            <li>
                                {% translate "Fill your week with nutritious meals that help you perform better" %}
                            </li>
                            <li>
                                {% translate "Build meals from a database of more than 2 million foods" %}
                            </li>
                            <li>
                                {% blocktranslate trimmed %}Get automatically calculated nutritional
                                    values
                                    (energy, protein, carbs, ...) for both individual meals and your
                                    entire
                                    weekly plan
                                {% endblocktranslate %}
                            </li>
                        </ul>
                    </div>
                </div>
            </section>

            <!-- section 3 - progress -->
            <section class="main-section">
                <div
                    class="row row-cols-lg-2 row-cols-sm-1 px-3 w-100 justify-content-center flex-reverse gy-3">
                    <div
                        class="col-lg-7 col-sm-12 d-flex flex-column justify-content-center align-items-center position-relative"
                        style="overflow: hidden;">
                        <picture>
                            <source srcset="{% static 'images/screens-3.avif' %}" type="image/avif">
                            <img src="{% static 'images/screens-3.png' %}"
                                 alt="mobile screen showing wger feature"
                                 class="img-fluid"
                                 loading="lazy">
                        </picture>
                    </div>
                    <div
                        class="col-lg-5 col-sm-12 d-flex flex-column align-items-start justify-content-center py-2">
                        <h2 class="w-100 font-bebas-neue display-4 uppercase w-100 header-progress">
                            {% translate "Keep track of <span>your progress</span>" %}
                        </h2>
                        <ul class="hex-bullet bullet-green">

                            <li>
                                {% translate "Track and annotate everything about your meals and workouts" %}
                            </li>
                            <li>
                                {% translate "Add custom notes" %}
                            </li>
                            <li>
                                {% translate "Record your weight" %}
                            </li>
                            <li>
                                {% translate "Keep a photo log to see your progress" %}
                            </li>
                            <li>
                                {% translate "Use the calendar view to see past entries" %}
                            </li>
                        </ul>
                    </div>
                </div>

            </section>

        </div>

        <!-- button -->
        <div class="row w-100 p-5 d-flex justify-content-center">
            <a role="button"
               class="btn btn-primary rounded-1 bg-dark-blue w-auto px-5"
               href="{% if allow_guest_users and not user.is_authenticated %}
                        {% url 'core:user:demo-entries' %}
                    {% else %}
                        {% url 'core:index' %}
                    {% endif %}">
                {% translate "Try wger now" %}
            </a>
        </div>

        <!-- community section -->
        <section class="main-section p-4 bg-light-blue">
            <div class="container-xl">
                <div class="row w-100 gy-3">
                    <div
                        class="col-lg-7 col-sm-12 d-flex flex-column justify-content-center align-items-center">
                        <picture>
                            <source srcset="{% static 'images/community.avif' %}" type="image/avif">
                            <img src="{% static 'images/community.png' %}"
                                 width="500"
                                 alt="list of human faces"
                                 class="img-fluid"
                                 loading="lazy">
                        </picture>
                    </div>
                    <div class="col-lg-5 col-sm-12">
                        <h1 class="display-3 uppercase font-bebas-neue header-community">
                            {% translate "Powered By <span>the community</span>" %}
                        </h1>
                        <p style="line-height: 30px;">
                            {% blocktranslate trimmed %}
                                wger is funded and created by the open-source community: people like
                                you translating, adding exercises and nutritional info, developing,
                                and more.
                            {% endblocktranslate %}
                            <b>
                                {% blocktranslate trimmed %}
                                    We don't use ads, don't sell your personal info, and we share
                                    the code under a free and open-source license.
                                {% endblocktranslate %}
                            </b>
                            {% blocktranslate trimmed %}
                                Pitch in and help make wger even better!
                            {% endblocktranslate %}
                        </p>
                        <div class="d-grid gap-2 d-md-block">
                            <a href=""
                               class="btn btn-primary rounded-1 w-auto px-5"
                               target="_blank"
                               rel="noopener noreferrer">
                                {% translate "Contribute" %}
                            </a>
                            <a href="https://www.buymeacoffee.com/wger"
                               target="_blank"
                               rel="noopener noreferrer"
                               class="btn btn-outline-primary rounded-1 w-auto px-5">
                                {% translate "Donate" %}
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- sign up section -->
        {% if allow_registration %}
            <section class="main-section">
                <div class="container d-flex align-items-center justify-content-center sign-up-bg">
                    <!-- form -->
                    <form method="post"
                          action="{% url 'core:user:registration' %}"
                          class="row justify-content-center"
                          data-disable-on-submit>
                        {% csrf_token %}
                        <h3 class="col-12 text-center fs-1 uppercase font-bebas-neue">
                            {% translate "Sign Up Now For Free" %}
                        </h3>
                        <div class="col-lg-5 col-sm-10 col-12">
                            {% crispy form %}
                        </div>
                    </form>
                </div>
            </section>
        {% endif %}

        <!-- not enough section  -->
        <section class="bg-bottom-menu p-5">
            <div class="container-xl">
                <h1 class="w-100 display-4 text-white text-center text-uppercase heading-h6 py-4">
                    {% translate "Web version not enough?" %}
                    <br>
                    {% translate "Get the code, too!" %}
                </h1>
                <div class="row py-4">
                    <div
                        class="col-lg-4 col-sm-12 d-flex flex-column align-items-center justify-content-start gap-2">
                        <img src="{% static 'images/dumbbell.svg' %}"
                             height="96"
                             width="96"
                             alt="dumbbell icon"
                             class="mb-4">
                        <h6 class="text-white fw-bold text-center">
                            {% translate "Set up a private server for your gym" %}
                        </h6>
                        <p class="text-light fw-lighter text-center">
                            {% blocktranslate trimmed %}
                                Don't want your data on an online service? Set up a wger instance
                                on your own server for free!
                            {% endblocktranslate %}
                        </p>
                    </div>
                    <div
                        class="col-lg-4 col-sm-12 d-flex flex-column align-items-center justify-content-start gap-2">
                        <img src="{% static 'images/code.svg' %}"
                             height="96"
                             width="96"
                             alt="code icon"
                             class="mb-4">
                        <h6 class="text-white fw-bold text-center">
                            {% translate "Integrate with your own app" %}
                        </h6>
                        <p class="text-light fw-lighter text-center">
                            {% translate "wger offers an open API that you can use for your app." %}
                        </p>
                    </div>
                    <div
                        class="col-lg-4 col-sm-12 d-flex flex-column align-items-center justify-content-start gap-2">
                        <img src="{% static 'images/fork.svg' %}"
                             height="96"
                             width="96"
                             alt="git branch icon"
                             class="mb-4">
                        <h6 class="text-white fw-bold text-center">
                            {% translate "Create your own version" %}
                        </h6>
                        <p class="text-light fw-lighter text-center">
                            {% blocktranslate trimmed %}
                                The source code is available under the GNU AGPLv3 license! Feel
                                free to fork it on GitHub.
                            {% endblocktranslate %}
                        </p>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- footer -->
    <footer class="d-grid gap-3 p-5 footer-bg">
        <div class="container-xl">
            <div class="d-flex pb-4">
                <img src="{% static 'images/logos/logo-font-inverse.svg' %}" alt="wger logo"/>
            </div>
            <div class="row row-cols-lg-4 row-cols-sm-1 g-2 border-bottom border-light pb-3">
                <div class="col-lg-3 col-sm-6 col-12">
                    <ul class="list-group">
                        <li class="list-group-item bg-transparent border-0 text-light ps-0">
                            <h1 class="fs-5 text-white">{% translate "Account" %}</h1>
                        </li>
                        {% if allow_registration %}
                            <li class="list-group-item bg-transparent border-0 text-light fw-lighter ps-0">
                                <a href="{% url 'core:user:registration' %}">
                                    {% translate "Register" %}
                                </a>
                            </li>
                        {% endif %}
                        <li class="list-group-item bg-transparent border-0 text-light fw-lighter ps-0">
                            <a href="{% url 'core:user:login' %}">
                                {% translate "Login" %}
                            </a>
                        </li>
                        <li class="list-group-item bg-transparent border-0 text-light fw-lighter ps-0">
                            <a href="{% url 'core:index' %}">
                                {% translate "Dashboard" %}
                            </a>
                        </li>
                        <li class="list-group-item bg-transparent border-0 text-light fw-lighter ps-0">
                            <a href="{% url 'manager:routine:overview' %}">
                                {% translate "Training" %}
                            </a>
                        </li>
                        <li class="list-group-item bg-transparent border-0 text-light fw-lighter ps-0">
                            <a href="{% url 'weight:overview' %}">
                                {% translate "Body weight" %}
                            </a>
                        </li>
                        <li class="list-group-item bg-transparent border-0 text-light fw-lighter ps-0">
                            <a href="{% url 'nutrition:plan:overview' %}">
                                {% translate "Nutrition" %}
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="col-lg-3 col-sm-6 col-12">
                    <ul class="list-group">
                        <li class="list-group-item bg-transparent border-0 text-light">
                            <h1 class="fs-5 text-white">{% translate "Community" %}</h1>
                        </li>
                        <li class="list-group-item bg-transparent border-0 text-light fw-lighter">
                            <a href="{% url 'exercise:exercise:overview' %}">
                                {% translate "Exercises" %}
                            </a>
                        </li>
                        <li class="list-group-item bg-transparent border-0 text-light fw-lighter">
                            <a href="{% url 'manager:template:public' %}">
                                {% translate "Workout routines" %}
                            </a>
                        </li>
                        <li class="list-group-item bg-transparent border-0 text-light fw-lighter">
                            <a href="https://discord.gg/rPWFv6W" target="_blank"
                               rel="noopener noreferrer">
                                {% translate "Discord" %}
                            </a>
                        </li>
                        <!--
                        <li class="list-group-item bg-transparent border-0 text-light fw-lighter">
                            <a href="http://" target="_blank" rel="noopener noreferrer">
                                Exercise translation
                            </a>
                        </li>
                        -->
                    </ul>
                </div>
                <div class="col-lg-3 col-sm-6 col-12">
                    <ul class="list-group">
                        <li class="list-group-item bg-transparent border-0 text-light">
                            <h1 class="fs-5 text-white">{% translate "Software" %}</h1>
                        </li>
                        <li class="list-group-item bg-transparent border-0 text-light">
                            <a href="https://github.com/wger-project/wger/issues/new/choose"
                               target="_blank"
                               rel="noopener noreferrer">
                                {% translate "Report an issue" %}
                            </a>
                        </li>
                        <li class="list-group-item bg-transparent border-0 text-light">
                            <a href="https://github.com/wger-project" target="_blank"
                               rel="noopener noreferrer">
                                {% translate "Source Code" %}
                            </a>
                        </li>
                        <li class="list-group-item bg-transparent border-0 text-light">
                            <a href="https://hosted.weblate.org/engage/wger/" target="_blank"
                               rel="noopener noreferrer">
                                {% translate "Translation" %}
                            </a>
                        </li>
                        <li class="list-group-item bg-transparent border-0 text-light">
                            <a href="{% url 'software:api' %}">{% translate "REST API" %}</a>
                        </li>
                        <li class="list-group-item bg-transparent border-0 text-light">
                            <a href="https://wger.readthedocs.io/en/latest/" target="_blank"
                               rel="noopener noreferrer">
                                {% translate "Documentation" %}
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="col-lg-3 col-sm-6 col-12">
                    <ul class="list-group">
                        <li class="list-group-item bg-transparent border-0 text-light">
                            <h1 class="fs-5 text-white">
                                <a href="https://github.com/wger-project" target="_blank"
                                   rel="noopener noreferrer">
                                    <i class="fab fa-github px-2"></i>
                                </a>
                                <a href="https://discord.gg/rPWFv6W" target="_blank"
                                   rel="noopener noreferrer">
                                    <i class="fab fa-discord px-2"></i>
                                </a>
                                {% if twitter %}
                                    <a href="https://twitter.com/{{ twitter }}" target="_blank"
                                       rel="noopener noreferrer">
                                        <i class="fab fa-twitter px-2" aria-hidden="true"></i>
                                    </a>
                                {% endif %}

                                {% if mastodon %}
                                    <a href="{{ mastodon }}" target="_blank"
                                       rel="noopener noreferrer">
                                        <i class="fab fa-mastodon px-2" aria-hidden="true"></i>
                                    </a>
                                {% endif %}
                            </h1>
                        </li>
                        <li class="list-group-item bg-transparent border-0">
                            <a href="{% url 'software:tos' %}"
                               class="text-light fw-lighter footer-link">
                                {% translate "Terms of service" %}
                            </a>
                        </li>
                        <li class="list-group-item bg-transparent border-0">
                            <a href="{% url 'core:imprint' %}">
                                Imprint
                            </a>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="d-flex justify-content-between py-3">
                <div class="btn-group dropup">
                    <button class="btn btn-outline-light dropdown-toggle"
                            type="button"
                            data-bs-toggle="dropdown"
                            aria-expanded="false">
                        <span class="{% fa_class 'globe' %}"></span>
                        {% translate i18n_language.name %}
                        <span class="caret"></span>
                    </button>

                    <ul class="dropdown-menu" aria-labelledby="btnGroupLanguages">
                        <li>
                            <a class="dropdown-item" href="{% url 'core:language:browser_language' %}?next={{ request.path }}">
                                <span class="{% fa_class 'globe' %}"></span>
                                <span>{% translate "Browser language" %}</span>
                            </a>
                        </li>
                        <form id="language-form" action="{% url 'set_language' %}" method="post">
                            {% csrf_token %}
                            <input name="next" type="hidden" value="{{ redirect_to }}">
                            <input type="hidden" name="language" id="language-input">
                            {% for language in languages %}
                                {% language_select language %}
                            {% endfor %}
                        </form>
                        <li>
                            <hr class="dropdown-divider"></hr>
                        </li>
                        <li>
                            <a href="https://hosted.weblate.org/engage/wger/"
                               class="dropdown-item"
                               target="_blank">
                                <span class="{% fa_class 'plus' %}"></span>
                                {% translate "Translate" %}
                            </a>
                        </li>
                    </ul>
                </div>

                {% if show_app_store_links %}
                    <a href="https://play.google.com/store/apps/details?id=de.wger.flutter">
                        <img
                            src="{% static 'images/logos/play-store/badge.svg' %}"
                            alt="google play logo"
                            height="55"
                        />
                    </a>
                    <a href="https://apps.apple.com/us/app/wger-workout-manager/id6502226792">
                        <img
                            src="{% static 'images/logos/app-store/black.svg' %}"
                            alt="app store logo"
                            height="55"
                        />
                    </a>
                    <a href="https://flathub.org/apps/de.wger.flutter">
                        <img
                            src="{% static 'images/logos/flathub/black.svg' %}"
                            alt="flathub logo"
                            height="55"
                        />
                    </a>
                    <a href="https://f-droid.org/de/packages/de.wger.flutter/">
                        <img
                            src="{% static 'images/logos/fdroid/get-it-on.svg' %}"
                            alt="fdroid logo"
                            height="55"
                        />
                    </a>
                {% endif %}
            </div>
        </div>
    </footer>
{% endblock %}