{% extends "base.html" %}
{% block title %}Veranstaltungen{{ " - " + app_name() }}{% endblock %}

{% block content %}
<div class="page-header">
    <h1>Veranstaltungen <span style="font-size:0.9rem; color:var(--kw-text-muted); font-weight:normal;">({{ veranstaltungen|length }})</span></h1>
    <a href="/veranstaltungen/neu" role="button" class="btn-sm">+ Neue Veranstaltung</a>
</div>

<!-- Status-Tabs -->
{% set base = [] %}
{% if f_typ %}{% set _ = base.append('typ=' + f_typ) %}{% endif %}
{% if f_kampagne_id %}{% set _ = base.append('kampagne_id=' + f_kampagne_id|string) %}{% endif %}
{% if f_von %}{% set _ = base.append('von=' + f_von) %}{% endif %}
{% if f_bis %}{% set _ = base.append('bis=' + f_bis) %}{% endif %}
{% if f_q %}{% set _ = base.append('q=' + f_q) %}{% endif %}
{% if f_ort %}{% set _ = base.append('ort=' + f_ort) %}{% endif %}
{% set base_qs = '&' + base|join('&') if base else '' %}
<div style="display:flex; gap:0.4rem; margin-bottom:0.5rem; flex-wrap:wrap;">
    <a href="/veranstaltungen?{{ base|join('&') }}" role="button" class="btn-sm {% if not f_status %}contrast{% else %}outline{% endif %}">Alle</a>
    {% for opt in kat_optionen("veranstaltung_status") %}
    <a href="/veranstaltungen?status={{ opt.wert }}{{ base_qs }}" role="button" class="btn-sm {% if f_status == opt.wert %}contrast{% else %}outline{% endif %}">{{ opt.label }}</a>
    {% endfor %}
</div>

<!-- Filter + Tabelle kombiniert -->
<form method="get" action="/veranstaltungen">
    <table class="data-table">
        <thead>
            <tr>
                <th style="white-space:nowrap;">Datum</th>
                <th>Titel</th>
                <th>Ort</th>
                <th>Typ</th>
                <th>Status</th>
                <th style="text-align:right;">Teiln.</th>
                <th style="min-width:140px;">Kampagne</th>
            </tr>
            <tr class="tbl-filter-row">
                <td>
                    <input type="date" name="von" value="{{ f_von or '' }}" title="Von"
                           style="display:block; margin-bottom:2px !important;">
                    <input type="date" name="bis" value="{{ f_bis or '' }}" title="Bis"
                           style="display:block;">
                </td>
                <td>
                    <input type="text" name="q" value="{{ f_q or '' }}" placeholder="Titel suchen…">
                </td>
                <td>
                    <input type="text" name="ort" value="{{ f_ort or '' }}" placeholder="Ort suchen…">
                </td>
                <td>
                    {% if alle_typen %}
                    <select name="typ" onchange="this.form.submit()">
                        <option value="">Alle Typen</option>
                        {% for t in alle_typen %}
                        <option value="{{ t }}" {% if f_typ == t %}selected{% endif %}>{{ t }}</option>
                        {% endfor %}
                    </select>
                    {% endif %}
                </td>
                <td>
                    <select name="status" onchange="this.form.submit()">
                        <option value="">Alle</option>
                        {% for opt in kat_optionen("veranstaltung_status") %}
                        <option value="{{ opt.wert }}" {% if f_status == opt.wert %}selected{% endif %}>{{ opt.label }}</option>
                        {% endfor %}
                    </select>
                </td>
                <td></td>
                <td>
                    {% if alle_kampagnen %}
                    <select name="kampagne_id" onchange="this.form.submit()" style="display:block; margin-bottom:2px !important;">
                        <option value="">Alle Kampagnen</option>
                        {% for k in alle_kampagnen %}
                        <option value="{{ k.id }}" {% if f_kampagne_id == k.id %}selected{% endif %}>{{ k.titel }}</option>
                        {% endfor %}
                    </select>
                    {% endif %}
                    {% if f_typ or f_kampagne_id or f_von or f_bis or f_q or f_ort or f_status %}
                    <a href="/veranstaltungen" class="btn-sm outline" style="margin:0; font-size:0.7rem; padding:0.15rem 0.4rem; display:inline-block;" title="Zurücksetzen">✕</a>
                    {% endif %}
                </td>
            </tr>
        </thead>
        <tbody>
            {% for v in veranstaltungen %}
            <tr style="cursor:pointer;" onclick="window.location='/veranstaltungen/{{ v.id }}'">
                <td style="white-space:nowrap;">{{ v.start_datum.strftime('%d.%m.%Y') if v.start_datum else '–' }}</td>
                <td><strong>{{ v.titel }}</strong></td>
                <td style="font-size:0.85rem;">{{ v.ort or '–' }}</td>
                <td style="font-size:0.85rem;">{{ v.typ or '–' }}</td>
                <td><span class="tag-chip">{{ v.status }}</span></td>
                <td style="text-align:right;">{{ v.teilnehmer|length }}</td>
                <td style="font-size:0.85rem;">
                    {% if v.kampagne %}
                    <a href="/kampagnen/{{ v.kampagne_id }}" onclick="event.stopPropagation();">{{ v.kampagne.titel }}</a>
                    {% else %}–{% endif %}
                </td>
            </tr>
            {% else %}
            <tr><td colspan="7" style="text-align:center; padding:2rem; color:var(--kw-text-muted);">Keine Veranstaltungen gefunden.</td></tr>
            {% endfor %}
        </tbody>
    </table>
</form>
{% endblock %}
