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

{% block content %}
<div class="page-header">
    <h1>Suchergebnisse für "{{ q }}"</h1>
</div>

<!-- Filter Tabs -->
<div style="display: flex; gap: 0.5rem; margin-bottom: 1rem;">
    <a href="/suche?q={{ q|urlencode }}" role="button" class="btn-sm {% if not typ_filter %}contrast{% else %}outline{% endif %}">
        Alle
    </a>
    <a href="/suche?q={{ q|urlencode }}&typ=kontakt{% if gruppe_filter %}&gruppe={{ gruppe_filter }}{% endif %}{% if tag_filter %}&tag={{ tag_filter }}{% endif %}{% if ort_filter %}&ort={{ ort_filter }}{% endif %}" role="button" class="btn-sm {% if typ_filter == 'kontakt' %}contrast{% else %}outline{% endif %}">
        👤 Kontakte ({{ ergebnisse.kontakt|length }})
    </a>
    <a href="/suche?q={{ q|urlencode }}&typ=aktivitaet" role="button" class="btn-sm {% if typ_filter == 'aktivitaet' %}contrast{% else %}outline{% endif %}">
        📋 Aktivitäten ({{ ergebnisse.aktivitaet|length }})
    </a>
    <a href="/suche?q={{ q|urlencode }}&typ=veranstaltung" role="button" class="btn-sm {% if typ_filter == 'veranstaltung' %}contrast{% else %}outline{% endif %}">
        📅 Veranstaltungen ({{ ergebnisse.veranstaltung|length }})
    </a>
</div>

<!-- Erweiterte Filter -->
<details style="margin-bottom: 1.5rem;">
    <summary style="cursor: pointer; font-size: 0.85rem; color: var(--kw-text-muted);">Filter</summary>
    <form method="get" action="/suche" style="display: flex; gap: 0.75rem; align-items: end; flex-wrap: wrap; margin-top: 0.75rem; padding: 0.75rem; border: 1px solid var(--kw-border); border-radius: 6px;">
        <input type="hidden" name="q" value="{{ q }}">
        {% if typ_filter %}<input type="hidden" name="typ" value="{{ typ_filter }}">{% endif %}
        <div>
            <label style="font-size: 0.75rem;">Gruppe</label>
            <select name="gruppe" style="margin: 0; font-size: 0.8rem; padding: 0.3rem;">
                <option value="">Alle Gruppen</option>
                {% for g in gruppen %}
                <option value="{{ g.id }}" {% if gruppe_filter == g.id %}selected{% endif %}>{{ g.name }}</option>
                {% endfor %}
            </select>
        </div>
        <div>
            <label style="font-size: 0.75rem;">Tag</label>
            <select name="tag" style="margin: 0; font-size: 0.8rem; padding: 0.3rem;">
                <option value="">Alle Tags</option>
                {% for kat in kategorien %}
                <optgroup label="{{ kat.name }}">
                    {% for t in kat.tags %}
                    <option value="{{ t.id }}" {% if tag_filter == t.id %}selected{% endif %}>{{ t.name }}</option>
                    {% endfor %}
                </optgroup>
                {% endfor %}
            </select>
        </div>
        <div>
            <label style="font-size: 0.75rem;">Ort</label>
            <input type="text" name="ort" value="{{ ort_filter or '' }}" placeholder="z.B. Berlin" style="margin: 0; font-size: 0.8rem; padding: 0.3rem;">
        </div>
        <button type="submit" class="btn-sm" style="margin: 0; padding: 0.3rem 0.8rem;">Filtern</button>
        {% if gruppe_filter or tag_filter or ort_filter %}
        <a href="/suche?q={{ q|urlencode }}{% if typ_filter %}&typ={{ typ_filter }}{% endif %}" class="btn-sm outline" style="margin: 0; padding: 0.3rem 0.8rem;">Zurücksetzen</a>
        {% endif %}
    </form>
</details>

{% set hat_ergebnisse = ergebnisse.kontakt|length + ergebnisse.aktivitaet|length + ergebnisse.veranstaltung|length + (ergebnisse.kampagne|length if ergebnisse.kampagne else 0) %}

{% if hat_ergebnisse %}
    {% if ergebnisse.kontakt and (not typ_filter or typ_filter == 'kontakt') %}
    <div class="card">
        <div class="card-header"><h3>👤 Kontakte</h3></div>
        {% for erg in ergebnisse.kontakt %}
        <a href="/kontakte/{{ erg.entity_id }}" class="search-result-item" style="display: block;">
            <div class="search-result-title">{{ erg.titel }}</div>
            {% if erg.untertitel %}<div class="search-result-sub">{{ erg.untertitel }}</div>{% endif %}
        </a>
        {% endfor %}
    </div>
    {% endif %}

    {% if ergebnisse.aktivitaet and (not typ_filter or typ_filter == 'aktivitaet') %}
    <div class="card">
        <div class="card-header"><h3>📋 Aktivitäten</h3></div>
        {% for erg in ergebnisse.aktivitaet %}
        <a href="/aktivitaeten/{{ erg.entity_id }}" class="search-result-item" style="display: block;">
            <div class="search-result-title">{{ erg.titel }}</div>
            {% if erg.untertitel %}<div class="search-result-sub">{{ erg.untertitel }}</div>{% endif %}
        </a>
        {% endfor %}
    </div>
    {% endif %}

    {% if ergebnisse.kampagne and (not typ_filter or typ_filter == 'kampagne') %}
    <div class="card">
        <div class="card-header"><h3>📢 Kampagnen</h3></div>
        {% for erg in ergebnisse.kampagne %}
        <a href="/kampagnen/{{ erg.entity_id }}" class="search-result-item" style="display: block;">
            <div class="search-result-title">{{ erg.titel }}</div>
            {% if erg.untertitel %}<div class="search-result-sub">{{ erg.untertitel }}</div>{% endif %}
        </a>
        {% endfor %}
    </div>
    {% endif %}

    {% if ergebnisse.veranstaltung and (not typ_filter or typ_filter == 'veranstaltung') %}
    <div class="card">
        <div class="card-header"><h3>📅 Veranstaltungen</h3></div>
        {% for erg in ergebnisse.veranstaltung %}
        <a href="/veranstaltungen/{{ erg.entity_id }}" class="search-result-item" style="display: block;">
            <div class="search-result-title">{{ erg.titel }}</div>
            {% if erg.untertitel %}<div class="search-result-sub">{{ erg.untertitel }}</div>{% endif %}
        </a>
        {% endfor %}
    </div>
    {% endif %}
{% else %}
<div class="empty-state">
    <div class="empty-state-icon">🔍</div>
    <p>Keine Ergebnisse für "{{ q }}".</p>
</div>
{% endif %}
{% endblock %}
