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

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

<!-- Status-Tabs -->
{% set base = [] %}
{% if f_typ %}{% set _ = base.append('typ=' + f_typ) %}{% endif %}
{% if f_projekt %}{% set _ = base.append('projekt=' + f_projekt) %}{% endif %}
{% if f_q %}{% set _ = base.append('q=' + f_q) %}{% 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="/kampagnen?{{ base|join('&') }}" role="button" class="btn-sm {% if not f_status %}contrast{% else %}outline{% endif %}">Alle</a>
    {% for opt in kat_optionen("kampagne_status") %}
    <a href="/kampagnen?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="/kampagnen">
    {% if f_status %}<input type="hidden" name="status" value="{{ f_status }}">{% endif %}
    <table class="data-table">
        <thead>
            <tr>
                <th>Titel</th>
                <th>Typ</th>
                <th>Status</th>
                <th>Projekt</th>
                <th style="text-align:right;">Kontakte</th>
                <th style="text-align:center; font-size:0.8rem; color:#4CAF50;">Reag.</th>
                <th style="text-align:center; font-size:0.8rem; color:#e53e3e;">Abg.</th>
                <th style="text-align:right;">Spenden €</th>
                <th>Erstellt</th>
                <th style="min-width:100px;"></th>
            </tr>
            <tr class="tbl-filter-row">
                <td>
                    <input type="text" name="q" value="{{ f_q or '' }}" placeholder="Titel suchen…">
                </td>
                <td>
                    <select name="typ" onchange="this.form.submit()">
                        <option value="">Alle Typen</option>
                        {% for key, label in typ_labels.items() %}
                        <option value="{{ key }}" {% if f_typ == key %}selected{% endif %}>{{ label }}</option>
                        {% endfor %}
                    </select>
                </td>
                <td></td>
                <td>
                    {% if alle_projekte %}
                    <select name="projekt" onchange="this.form.submit()">
                        <option value="">Alle Projekte</option>
                        {% for p in alle_projekte %}
                        <option value="{{ p }}" {% if f_projekt == p %}selected{% endif %}>{{ p }}</option>
                        {% endfor %}
                    </select>
                    {% endif %}
                </td>
                <td colspan="4"></td>
                <td></td>
                <td>
                    {% if f_typ or f_projekt or f_q %}
                    <a href="/kampagnen{% if f_status %}?status={{ f_status }}{% endif %}" 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 k in kampagnen %}
            {% set sc = {} %}
            {% for kk in k.kontakte %}{% set _ = sc.update({kk.status: (sc.get(kk.status, 0) + 1)}) %}{% endfor %}
            <tr style="cursor:pointer;" onclick="window.location='/kampagnen/{{ k.id }}'">
                <td>
                    <strong>{{ k.titel }}</strong>
                    {% if k.beschreibung %}<div style="font-size:0.75rem; color:var(--kw-text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:200px;">{{ k.beschreibung[:60] }}…</div>{% endif %}
                </td>
                <td style="font-size:0.85rem;">{{ k.typ_label }}</td>
                <td>
                    {% set _ks_f = kat_farben("kampagne_status") %}
                    <span class="tag-chip" style="background:{{ _ks_f.get(k.status, '#2196F3') }}; color:white; font-size:0.75rem;">
                        {{ k.status_label }}
                    </span>
                </td>
                <td style="font-size:0.85rem;">{{ k.projekt or '–' }}</td>
                <td style="text-align:right; font-weight:600;">{{ k.kontakte|length }}</td>
                <td style="text-align:center; font-size:0.85rem; color:#4CAF50; font-weight:600;">{{ sc.get('reagiert', 0) }}</td>
                <td style="text-align:center; font-size:0.85rem; color:#e53e3e;">{{ sc.get('abgelehnt', 0) }}</td>
                <td style="text-align:right; font-size:0.85rem;">
                    {% set sp = k.spenden | sum(attribute='betrag') if k.spenden else 0 %}
                    {% if sp > 0 %}<span style="color:var(--kw-primary); font-weight:600;">{{ '%.2f'|format(sp) }}</span>{% else %}–{% endif %}
                </td>
                <td style="font-size:0.85rem; white-space:nowrap;">
                    {{ k.erstellt_am.strftime('%d.%m.%Y') if k.erstellt_am else '–' }}
                    {% if k.erstellt_von %}<span style="color:var(--kw-text-muted);"> · {{ k.erstellt_von }}</span>{% endif %}
                </td>
                <td onclick="event.stopPropagation();">
                    <a href="/auswertungen/kampagnen/{{ k.id }}" class="btn-sm outline" style="font-size:0.75rem; padding:0.15rem 0.5rem;" title="Auswertung">📊</a>
                </td>
            </tr>
            {% else %}
            <tr><td colspan="10" style="text-align:center; padding:2rem; color:var(--kw-text-muted);">
                Keine Kampagnen gefunden.
                {% if not f_status and not f_typ and not f_projekt and not f_q %}
                <br><a href="/kampagnen/neu" class="btn-sm" style="margin-top:0.5rem;">Erste Kampagne anlegen</a>
                {% endif %}
            </td></tr>
            {% endfor %}
        </tbody>
    </table>
</form>
{% endblock %}
