{% set status_colors = kat_farben("teilnehmer_status") %}
{% set status_options = [] %}
{% for opt in kat_optionen("teilnehmer_status") %}
{% set _ = status_options.append((opt.wert, opt.label)) %}
{% endfor %}
{% set rollen_optionen = kat_optionen("teilnehmer_rolle") %}

{% if teilnehmer_liste %}
<div style="overflow-x:auto;">
<table class="data-table">
    <thead>
        <tr>
            <th>Name</th>
            <th>Organisation</th>
            <th>E-Mail</th>
            <th>Telefon</th>
            <th>Rolle</th>
            <th style="min-width:150px;">Status</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        {% for tn in teilnehmer_liste %}
        {% set c = tn.kontakt %}
        <tr id="tn-{{ tn.id }}">
            <td style="font-weight:500; white-space:nowrap;">
                <a href="/kontakte/{{ c.id }}">{{ c.anzeigename }}</a>
            </td>
            <td style="font-size:0.85rem;">{{ c.firmenname or '–' }}</td>
            <td style="font-size:0.85rem;">{{ c.email1 or '–' }}</td>
            <td style="font-size:0.85rem; white-space:nowrap;">{{ c.telefon or c.mobil or '–' }}</td>
            <td>
                {% set rollen_icons = kat_icons("teilnehmer_rolle") %}
                {% set rollen_labels = kat_dict("teilnehmer_rolle") %}
                <span style="font-size:0.8rem; font-weight:500;">
                    {{ rollen_icons.get(tn.rolle, '') }} {{ rollen_labels.get(tn.rolle, tn.rolle) }}
                </span>
            </td>
            <td>
                <select name="status"
                        style="margin:0; padding:0.2rem 0.4rem; font-size:0.8rem; min-width:150px;
                               border-color:{{ status_colors.get(tn.status, '#607D8B') }};
                               color:{{ status_colors.get(tn.status, '#607D8B') }};"
                        hx-post="/veranstaltungen/{{ veranstaltung_id }}/teilnehmer/{{ tn.id }}/status"
                        hx-target="#teilnehmer-container" hx-swap="innerHTML">
                    {% for val, label in status_options %}
                    <option value="{{ val }}" {% if tn.status == val %}selected{% endif %}>{{ label }}</option>
                    {% endfor %}
                </select>
            </td>
            <td>
                <button class="btn-icon"
                        style="font-size:0.75rem; padding:0.1rem 0.3rem; color:#e53e3e; border:1px solid #e53e3e;"
                        hx-delete="/veranstaltungen/{{ veranstaltung_id }}/teilnehmer/{{ tn.id }}"
                        hx-target="#teilnehmer-container" hx-swap="innerHTML"
                        hx-confirm="Teilnehmer entfernen?">x</button>
            </td>
        </tr>
        {% endfor %}
    </tbody>
</table>
</div>
{% else %}
<div class="empty-state" style="padding:1rem 0;">
    <div class="empty-state-icon">👥</div>
    <p>Noch keine Teilnehmer erfasst.</p>
</div>
{% endif %}

<!-- Hinzufügen -->
<div style="margin-top:0.75rem; border-top:1px solid var(--kw-border); padding-top:0.75rem;">
    <form hx-post="/veranstaltungen/{{ veranstaltung_id }}/teilnehmer"
          hx-target="#teilnehmer-container" hx-swap="innerHTML"
          style="display:flex; gap:0.5rem; align-items:center; flex-wrap:wrap;">
        <input type="hidden" name="kontakt_id" id="tn-kontakt-id-{{ veranstaltung_id }}" value="">

        <div class="search-dropdown" style="margin:0; flex:1; min-width:200px;">
            <button type="button" class="search-dropdown-toggle btn-sm"
                    id="tn-kontakt-toggle-{{ veranstaltung_id }}"
                    onclick="var menu=this.nextElementSibling; menu.classList.toggle('open'); if(menu.classList.contains('open')){var inp=menu.querySelector('input[type=text]'); if(inp){inp.value='';} menu.querySelectorAll('.search-dropdown-item').forEach(function(el){el.style.display='';}); if(inp) inp.focus();}">
                + Person hinzufügen
            </button>
            <div class="search-dropdown-menu" style="min-width:280px;">
                <input type="text" placeholder="Suchen…" autocomplete="off"
                       onclick="event.stopPropagation();"
                       oninput="var q=this.value.toLowerCase(); this.closest('.search-dropdown-menu').querySelectorAll('.search-dropdown-item').forEach(function(el){el.style.display=el.dataset.search.indexOf(q)>=0?'':'none';});">
                {%- for k in alle_kontakte %}
                <div class="search-dropdown-item"
                     data-search="{{ (k.anzeigename + ' ' + (k.firmenname or ''))|lower }}"
                     onclick="document.getElementById('tn-kontakt-id-{{ veranstaltung_id }}').value='{{ k.id }}'; document.getElementById('tn-kontakt-toggle-{{ veranstaltung_id }}').textContent='{{ k.anzeigename|replace("'", "\\'") }}'; this.closest('.search-dropdown-menu').classList.remove('open');">
                    {{ k.anzeigename }}{% if k.firmenname %} <span style="font-size:0.8rem; color:var(--kw-text-muted);">· {{ k.firmenname }}</span>{% endif %}
                </div>
                {%- endfor %}
            </div>
        </div>

        <select name="rolle" style="margin:0; padding:0.25rem 0.4rem; font-size:0.85rem;">
            {% for opt in rollen_optionen %}
            <option value="{{ opt.wert }}">{{ opt.icon or '' }} {{ opt.label }}</option>
            {% endfor %}
        </select>

        <button type="submit" class="btn-sm" style="margin:0;">Hinzufügen</button>
    </form>
</div>
