{% extends 'kmuhelper/app/base.html' %}

{% block subtitle %}Home{% endblock %}

{% block extrahead %}
    {{ block.super }}
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.0.0/css/all.css">
    <style>
        #pages {
            padding-left: 16px;
        }

        #pages li i {
            width: 25px;
            text-align: center;
        }
    </style>
{% endblock %}

{% block content %}
    <h1>Willkommen in der KMUHelper-App!</h1>
    <p>
        Diese App bietet dir im Vergleich zum
        <a href="{% url 'admin:app_list' app_label='kmuhelper' %}" target="_top">Adminbereichs</a>
        eine vereinfachte Ansicht, welche auf bestimmte Arbeitsschritte abgestimmt ist.
        <br>
        Am besten fügst du diese Seite zum Startbildschirm deines Smartphones hinzu, um sie schnell zu erreichen.
        <br>
        Hier findest du eine Übersicht aller verfügbaren Seiten:
    </p>
    <h3>Seiten</h3>
    <ul style="padding-left: 16px;" id="pages">
        <li>
            <i class="fas fa-clipboard-list"></i><span>ToDo-Liste (Unerledigte Notizen)</span>
            <p>Erstelle dir eine To-Do Liste</p>
        </li>
        <li>
            <i class="fas fa-shipping-fast"></i><span>Versand (Unversendete Bestellungen)</span>
            <p>Füge Trackingnummern zu Bestellungen hinzu und markiere sie als versendet.</p>
        </li>
        <li>
            <i class="fas fa-hand-holding-usd"></i><span>Zahlungseingang (Unbezahlte Bestellungen)</span>
            <p>Vergleiche deinen Kontoauszug mit den offenen Bestellungen und markiere bezahlte Bestellungen als bezahlt.</p>
        </li>
        <li>
            <i class="fas fa-warehouse"></i><span>Lagerbestand (Produkte)</span>
            <p>Sieh dir den Lagerbestand an und nimm manuelle Änderungen daran vor.</p>
        </li>
        <li>
            <i class="fas fa-truck-loading"></i><span>Wareneingang (Lieferungen)</span>
            <p>Erfasse Lieferungen und lagere sie ein.</p>
        </li>
        <li>
            <i class="fas fa-key"></i><span>Admin (<i class="fas fa-external-link-alt"></i>)</span>
            <p>Öffne den Admin-Bereich in einem neuen Tab.</p>
        </li>
    </ul>
{% endblock %}
