{% extends "base.html" %}

{% block content %}
<div class="row mt-4">
    <!-- Left column: subscription form -->
    <div class="col-12 col-lg-6">
        <div class="row justify-content-center">
            <div class="col">
                <div class="card shadow-sm mt-4">
                    <div class="card-header bg-primary text-white">
                        <h1 class="fs-5 mb-0">Dauerhafte Anmeldung zu allen Kochabenden</h1>
                    </div>

                    <form action="/subscribe" method="POST">
                        <div class="card-body">
                            <p>
                                Mit einer dauerhaften Anmeldung kannst du dich/euch für alle zukünftigen Kochabende
                                anmelden. Es ist möglich
                                diese Anmeldung auf bestimmte Wochentage zu beschränken.
                            </p>
                            <p>
                                Dauerhafte Anmeldungen werden eine Woche vor einem Kochabend als Anmeldungen für diesen
                                Abend eingetragen. Danach
                                können sie auch noch gelöscht bzw. bearbeitet werden.
                            </p>
                            <!-- Household selection -->
                            <div class="mb-3">
                                <select name="household" class="form-select" required>
                                    <option value="" disabled selected hidden>Wer?</option>
                                    {% for household in households %}
                                    <option value="{{household.id}}">{{household.name}}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <p class="text-muted">
                                Wenn dein Haushalt hier nicht auswählbar ist, besteht bereits eine dauerhafte Anmeldung.
                                Um Änderungen vorzunehmen, lösche die bestehende Anmeldung und lege eine neue an.
                            </p>

                            <!-- Person counts -->
                            <div class="row g-3 mb-3">
                                <div class="col">
                                    <label for="InputAdults" class="form-label">Anzahl Erwachsene</label>
                                    <input name="numAdults" id="InputAdults" type="number" class="form-control"
                                           aria-label="Anzahl Erwachsene" min="0" step="1" inputmode="numeric">
                                </div>
                                <div class="col">
                                    <label for="InputKids" class="form-label">Anzahl Kinder &gt;7</label>
                                    <input name="numKids" id="InputKids" type="number" class="form-control"
                                           aria-label="Anzahl Kinder &gt;7" min="0" step="1" inputmode="numeric">
                                </div>
                                <div class="col">
                                    <label for="InputSmallKids" class="form-label">Anzahl Kinder &lt;7</label>
                                    <input name="numSmallKids" id="InputSmallKids" type="number" class="form-control"
                                           aria-label="Anzahl Kinder &lt;7" min="0" step="1" inputmode="numeric">
                                </div>
                            </div>

                            <!-- Days of the week -->
                            <div class="mb-3">
                                <label class="form-label">Wochentage auswählen (optional)</label>
                                <p class="text-muted small mb-2">
                                    Wenn du nur an bestimmten Tagen teilnehmen möchtest, wähle sie hier aus.
                                </p>
                                <div class="d-flex flex-wrap gap-3">
                                    {% set days = ["Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag",
                                    "Sonntag"] %}
                                    {% for day in days %}
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="days" value="{{loop.index}}"
                                               id="day-{{loop.index}}">
                                        <label class="form-check-label" for="day-{{loop.index}}">
                                            {{day}}
                                        </label>
                                    </div>
                                    {% endfor %}
                                </div>
                            </div>
                        </div>

                        <!-- Footer -->
                        <div class="card-footer d-flex justify-content-end gap-2">
                            <button type="submit" class="btn btn-primary">Dauerhaft anmelden</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Right column: existing registrations -->
    <div class="col-12 col-lg-6 mt-4 mt-lg-0">
        <p class="h4 m-2">Bestehende dauerhafte Anmeldungen</p>
        {% if subscriptions | length == 0 %}
        <p class="m-2">Es gibt noch keine dauerhaften Anmeldungen</p>
        {% else %}
        {% for sub in subscriptions %}
        <div class="card mb-2">
            <div class="card-body py-2 px-3">
                <div class="d-flex justify-content-between align-items-center mb-1">
                    <h6 class="mb-0">{{ sub.household.name }}</h6>
                    <a href="/subscribe/{{sub.household.id}}/delete" class="text-danger">
                        <i class="bi bi-trash"></i>
                    </a>
                </div>
                <div class="row g-2">
                    <div class="col-3 text-center">
                        <div class="text-muted" style="font-size: 0.7rem;">Erwachsene</div>
                        <div class="fw-bold small">{{ sub.num_adult_meals }}</div>
                    </div>
                    <div class="col-3 text-center">
                        <div class="text-muted" style="font-size: 0.7rem;">Kinder</div>
                        <div class="fw-bold small">{{ sub.num_children_meals }}</div>
                    </div>
                    <div class="col-3 text-center">
                        <div class="text-muted" style="font-size: 0.7rem;">Kleinkinder</div>
                        <div class="fw-bold small">{{ sub.num_small_children_meals }}</div>
                    </div>
                    <div class="col-3 text-center">
                        <div class="text-muted" style="font-size: 0.7rem;">Tage</div>
                        <div class="fw-bold small">{{ sub.day_string_de() }}</div>
                    </div>
                </div>
            </div>
        </div>
        {% endfor %}
        </div>
        {% endif %}
    </div>
</div>


{% endblock %}