{% extends 'teamized/base.html' %}
{% load i18n static %}

{% comment %}
    This is the home page where a user can open the app or read more about it.
    This is the only page that doesn't require authentication and the only
    page that allows search engines to index it.

    Some things on this page have been borrowed from the Bootstrap examples
    https://getbootstrap.com/docs/5.3/examples/heroes/
{% endcomment %}

{% block title %}Startseite{% endblock title %}

{% block noindex %}
    {% comment %} Override the noindex tag that would normally be here. {% endcomment %}
{% endblock noindex %}

{% block extrahead %}
    <script src="{% static 'teamized/js/autodarkmode.js' %}"></script>
    <style>
        .divider {
            height: 2rem;
            background-color: rgba(0, 0, 0, .1);
            border: solid rgba(0, 0, 0, .15);
            border-width: 1px 0;
            box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
        }

        .icon-square {
            width: 3rem;
            height: 3rem;
            border-radius: .75rem;
        }
    </style>
{% endblock extrahead %}

{% block contentcontainer %}

    {% if messages %}
        <div class="px-3 pt-1">
            {% include 'account/snippets/messages.html' %}
        </div>
    {% endif %}

    <div class="px-4 py-5 my-5 text-center">
        {% comment %} <img class="d-block mx-auto mb-4" src="" alt="" width="72" height="57"> {% endcomment %}
        <h1 class="display-2 fw-bold">Teamized</h1>
        <div class="col-lg-6 mx-auto">
            <p class="lead mb-4">
                Arbeite zusammen mit deinem Team oder alleine an deinen Lieblingsprojekten.
                Diese App unterstützt dich bei der Planung und Umsetzung von Projekten in deinem Team.
                Sie entstand im Rahmen der Maturaarbeit von Rafael Urben.
            </p>
            <div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
                <a href="{% url 'teamized:app' %}" class="btn btn-primary btn-lg px-4 gap-3">Zur App</a>
                <a href="https://rafaelurben.ch/maturaarbeit/" class="btn btn-outline-secondary btn-lg px-4">Zur
                    Maturaarbeit</a>
            </div>
        </div>
    </div>

    <div class="divider"></div>

    <div class="container px-4 py-5" id="features">
        <div class="row g-4 py-5 row-cols-1 row-cols-lg-2">
            <div class="col d-flex align-items-start">
                <div
                    class="icon-square bg-light text-black d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
                    <i class="fa-solid fa-business-time"></i>
                </div>
                <div>
                    <h3 class="fs-2">Arbeitszeit</h3>
                    <p>Zeichne deine Arbeitszeit auf, erfasse sie manuell oder sieh dir Statistiken dazu an.</p>
                </div>
            </div>
            <div class="col d-flex align-items-start">
                <div
                    class="icon-square bg-light text-black d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
                    <i class="fa-solid fa-calendar-days"></i>
                </div>
                <div>
                    <h3 class="fs-2">Kalender</h3>
                    <p>Erstelle Kalender, fülle sie mit deinen wichtigen Terminen und Abgabefristen und abonniere sie
                        direkt in deiner Kalenderapp.</p>
                </div>
            </div>
            <div class="col d-flex align-items-start">
                <div
                    class="icon-square bg-light text-black d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
                    <i class="fa-solid fa-tasks"></i>
                </div>
                <div>
                    <h3 class="fs-2">To-do-Listen</h3>
                    <p>Behalte die Übersicht über deine Aufgaben und Ideen mithilfe von To-do-Listen.</p>
                </div>
            </div>
            <div class="col d-flex align-items-start">
                <div
                    class="icon-square bg-light text-black d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
                    <i class="fa-solid fa-drum"></i>
                </div>
                <div>
                    <h3 class="fs-2">Verein (in Entwicklung)</h3>
                    <p>Verwalte deine Vereinsmitglieder, erstelle Übersichten mit Mitgliederportfolios, teile Umfragen
                        und mehr...</p>
                </div>
            </div>
        </div>
    </div>

    <div class="divider"></div>

    <div class="bg-dark text-white px-4 py-5 text-center" data-bs-theme="dark">
        <div class="py-5">
            <h2 class="display-6 fw-bold text-white">Light & dark mode</h2>
            <div class="col-lg-6 mx-auto">
                <p class="fs-5 mb-4">Die App passt sich automatisch den Einstellungen des verwendeten Geräts an.</p>
                <div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
                    <a href="{% url 'teamized:app' %}" class="btn btn-outline-info btn-lg px-4 me-sm-3 fw-bold">Jetzt
                        starten</a>
                </div>
            </div>
        </div>
    </div>

    <div class="divider"></div>

    <div class="container">
        <footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
            <p class="col-md-6 mb-0 text-body-secondary">© 2021-2025 Rafael Urben</p>

            <ul class="nav col-md-6 justify-content-end">
                <li class="nav-item"><a href="{% url 'teamized:app' %}"
                                        class="nav-link px-2 text-body-secondary">App</a></li>
                <li class="nav-item"><a href="{% url 'account:home' %}?next={% url 'teamized:home' %}"
                                        class="nav-link px-2 text-body-secondary">Account</a></li>
                <li class="nav-item"><a href="https://github.com/rafaelurben/django-teamized"
                                        class="nav-link px-2 text-body-secondary">Quellcode</a></li>
                <li class="nav-item"><a href="https://rafaelurben.ch/" class="nav-link px-2 text-body-secondary">Entwickler</a>
                </li>
            </ul>
        </footer>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.7/js/bootstrap.bundle.min.js"
            integrity="sha512-Tc0i+vRogmX4NN7tuLbQfBxa8JkfUSAxSFVzmU31nVdHyiHElPPy2cWfFacmCJKw0VqovrzKhdd2TSTMdAxp2g=="
            crossorigin="anonymous" referrerpolicy="no-referrer"></script>
{% endblock contentcontainer %}