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

{% block content %}
<div class="page-header">
    <h1>📅 {{ veranstaltung.titel }}</h1>
    <div class="btn-group">
        <a href="/veranstaltungen" role="button" class="btn-sm outline">← Liste</a>
        <a href="/veranstaltungen/{{ veranstaltung.id }}/bearbeiten" role="button" class="btn-sm">Bearbeiten</a>
        <button class="btn-sm btn-icon" onclick="if(confirm('Veranstaltung wirklich löschen?')) window.location='/veranstaltungen/{{ veranstaltung.id }}/loeschen'">🗑️</button>
    </div>
</div>

<div class="detail-grid">
    <div class="detail-main">
        <div class="card">
            <div class="card-header"><h3>Details</h3></div>
            <div class="info-grid">
                <div class="info-label">Datum</div>
                <div class="info-value">{{ veranstaltung.start_datum.strftime('%d.%m.%Y %H:%M') if veranstaltung.start_datum else '-' }}{% if veranstaltung.end_datum %} – {{ veranstaltung.end_datum.strftime('%d.%m.%Y %H:%M') }}{% endif %}</div>
                {% if veranstaltung.ort %}<div class="info-label">Ort</div><div class="info-value">{{ veranstaltung.ort }}</div>{% endif %}
                {% if veranstaltung.typ %}<div class="info-label">Typ</div><div class="info-value">{{ veranstaltung.typ }}</div>{% endif %}
                <div class="info-label">Status</div><div class="info-value"><span class="tag-chip">{{ veranstaltung.status }}</span></div>
                {% if veranstaltung.max_teilnehmer %}<div class="info-label">Max. Teilnehmer</div><div class="info-value">{{ veranstaltung.max_teilnehmer }}</div>{% endif %}
                {% if veranstaltung.projekt %}<div class="info-label">Projekt</div><div class="info-value">{{ veranstaltung.projekt }}</div>{% endif %}
            </div>
        </div>

        {% if veranstaltung.beschreibung %}
        <div class="card">
            <div class="card-header"><h3>Beschreibung</h3></div>
            <div style="white-space: pre-wrap; font-size: 0.9rem;">{{ veranstaltung.beschreibung }}</div>
        </div>
        {% endif %}
    </div>

    <div class="detail-sidebar">
        <!-- Kampagne-Zuordnung -->
        <div class="card">
            <div class="card-header"><h3>Kampagne</h3></div>
            {% if veranstaltung.kampagne %}
            <div style="display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0; font-size: 0.9rem;">
                <span>📢</span>
                <a href="/kampagnen/{{ veranstaltung.kampagne_id }}" style="flex: 1;">{{ veranstaltung.kampagne.titel }}</a>
            </div>
            <form method="post" action="/veranstaltungen/{{ veranstaltung.id }}/kampagne" style="margin-top: 0.5rem;">
                <input type="hidden" name="kampagne_id" value="">
                <button type="submit" class="btn-sm outline" style="font-size: 0.8rem; color: #e53e3e; border-color: #e53e3e; padding: 0.2rem 0.5rem;"
                        onclick="return confirm('Kampagne-Zuordnung entfernen?')">Entfernen</button>
            </form>
            <form method="post" action="/veranstaltungen/{{ veranstaltung.id }}/teilnehmer-aus-kampagne"
                  style="margin-top: 0.75rem; border-top: 1px solid var(--kw-border); padding-top: 0.75rem;">
                <div style="font-size: 0.8rem; color: var(--kw-text-muted); margin-bottom: 0.4rem;">Kontakte aus Kampagne übernehmen:</div>
                <select name="kampagne_status" style="margin-bottom: 0.4rem; font-size: 0.85rem;">
                    <option value="">– Alle Status –</option>
                    <option value="neu">Neu</option>
                    <option value="kontaktiert">Kontaktiert</option>
                    <option value="reagiert">Reagiert</option>
                    <option value="abgelehnt">Abgelehnt</option>
                    <option value="abgemeldet">Abgemeldet</option>
                    <option value="erledigt">Erledigt</option>
                </select>
                <button type="submit" class="btn-sm" style="margin: 0; width: 100%;">→ Als Teilnehmer übernehmen</button>
            </form>
            {% else %}
            {% if alle_kampagnen %}
            <form method="post" action="/veranstaltungen/{{ veranstaltung.id }}/kampagne">
                <select name="kampagne_id" style="margin-bottom: 0.4rem;">
                    <option value="">– Kampagne wählen –</option>
                    {% for k in alle_kampagnen %}
                    <option value="{{ k.id }}">{{ k.titel }}</option>
                    {% endfor %}
                </select>
                <button type="submit" class="btn-sm" style="margin: 0;">Zuordnen</button>
            </form>
            {% else %}
            <p style="font-size: 0.85rem; color: var(--kw-text-muted);">Keine Kampagnen vorhanden.</p>
            {% endif %}
            {% endif %}
        </div>

        <!-- Auswertungs-Link -->
        <div class="card">
            <a href="/auswertungen/veranstaltungen/{{ veranstaltung.id }}" class="btn-sm outline" style="width:100%; text-align:center;">📊 Auswertung</a>
        </div>
    </div>
</div>

<!-- Teilnehmer – vollbreit -->
<div class="card" style="margin-top: 1rem;">
    <div class="card-header">
        <h3>Teilnehmer ({{ veranstaltung.teilnehmer|length }})</h3>
    </div>
    <div id="teilnehmer-container">
        {% with teilnehmer_liste=veranstaltung.teilnehmer, veranstaltung_id=veranstaltung.id %}
        {% include "components/teilnehmer.html" %}
        {% endwith %}
    </div>
</div>

<!-- Todos -->
{% set offene_akt = aktivitaeten|selectattr('status', 'equalto', 'offen')|list %}
{% if offene_akt %}
<div class="card" style="margin-top: 1rem;">
    <div class="card-header">
        <h3>
            Todos
            <span style="background: #dd6b20; color: white; border-radius: 999px; font-size: 0.7rem; font-weight: 700; padding: 0.1rem 0.5rem; margin-left: 0.3rem; vertical-align: middle;">{{ offene_akt|length }}</span>
            <span style="font-size: 0.75rem; font-weight: 400; color: var(--kw-text-muted); margin-left: 0.3rem;">Unerledigte Aktivitäten</span>
        </h3>
    </div>
    {% for akt in offene_akt|sort(attribute='faellig_am') %}
    <div style="display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0; border-bottom: 1px solid var(--kw-border);">
        <span style="font-size: 0.85rem;">{{ akt.art_icon }}</span>
        <div style="flex: 1; min-width: 0;">
            <a href="/aktivitaeten/{{ akt.id }}" style="font-size: 0.85rem; font-weight: 500; text-decoration: none; color: inherit;">{{ akt.betreff or 'Ohne Betreff' }}</a>
            {% if akt.faellig_am %}<br><span style="font-size: 0.75rem; color: #dd6b20;">fällig {{ akt.faellig_am.strftime('%d.%m.%Y') }}</span>{% endif %}
        </div>
        {% if akt.zugewiesen_an %}<span style="font-size: 0.75rem; color: var(--kw-primary);">→ {{ akt.zugewiesen_an }}</span>{% endif %}
        <a href="/aktivitaeten/{{ akt.id }}/bearbeiten" style="font-size: 0.75rem;" title="Bearbeiten">✏️</a>
        <a href="/aktivitaeten/{{ akt.id }}/loeschen"
           onclick="return confirm('Aktivität wirklich löschen?')"
           style="font-size: 0.75rem; text-decoration: none;" title="Löschen">🗑️</a>
        <form method="post" action="/aktivitaeten/{{ akt.id }}/erledigt" style="display: contents;">
            <button type="submit" class="btn-icon" style="font-size: 0.7rem; padding: 0.1rem 0.4rem; border: 1px solid var(--kw-success); color: var(--kw-success); display: inline-block; width: auto;" title="Erledigt">✓</button>
        </form>
    </div>
    {% endfor %}
</div>
{% endif %}

<!-- Aktivitäten Timeline -->
<div class="card" style="margin-top: 1rem;">
    <div class="card-header">
        <h3>Aktivitäten{% if aktivitaeten %} ({{ aktivitaeten|length }}){% endif %}</h3>
        <a href="/aktivitaeten/neu?veranstaltung_id={{ veranstaltung.id }}" role="button" class="btn-sm">+ Neu</a>
    </div>
    {% if aktivitaeten %}
    <div class="timeline">
        {% for akt in aktivitaeten %}
        {% include "components/aktivitaet_item.html" %}
        {% endfor %}
    </div>
    {% else %}
    <div class="empty-state"><p>Keine Aktivitäten vorhanden.</p></div>
    {% endif %}
</div>

{% endblock %}
