{% extends "base.html" %}
{% block title %}{{ 'Bearbeiten' if aktivitaet else 'Neue Aktivität' }}{{ " - " + app_name() }}{% endblock %}

{% block content %}
<div class="page-header">
    <h1>{% if aktivitaet %}Aktivität bearbeiten{% else %}Neue Aktivität{% endif %}</h1>
    <div class="btn-group">
        <a href="#" role="button" class="btn-sm outline" onclick="event.preventDefault(); window.history.back();">Abbrechen</a>
        <button type="submit" form="aktivitaet-form" class="btn-sm">Speichern</button>
    </div>
</div>

<form id="aktivitaet-form" method="post" action="{% if aktivitaet %}/aktivitaeten/{{ aktivitaet.id }}/bearbeiten{% else %}/aktivitaeten/neu{% endif %}">
    <input type="hidden" name="next" value="{{ request.headers.get('referer', '') }}">
    {% if veranstaltung_id %}
    <input type="hidden" name="veranstaltung_id" value="{{ veranstaltung_id }}">
    {% endif %}
    {% if kampagne_id %}
    <input type="hidden" name="kampagne_id" value="{{ kampagne_id }}">
    {% endif %}

    <div class="card">
        <div class="form-grid">
            <div>
                {% if not aktivitaet and kontakt_id %}
                {%- set vk = kontakte | selectattr('id', 'equalto', kontakt_id) | first %}
                <label>Kontakt</label>
                <input type="hidden" name="kontakt_id" value="{{ kontakt_id }}">
                <p style="margin: 0; padding: 0.4rem 0.5rem; background: var(--kw-bg); border: 1px solid var(--kw-border); border-radius: var(--kw-radius); font-weight: 500; font-size: 0.9rem;">{{ vk.anzeigename if vk else '–' }}</p>
                {% else %}
                <label for="kontakt_id">Kontakt *</label>
                <select id="kontakt_id" name="kontakt_id" required>
                    <option value="">Bitte wählen</option>
                    {% for k in kontakte %}
                    <option value="{{ k.id }}" {% if (aktivitaet and aktivitaet.kontakt_id == k.id) or kontakt_id == k.id %}selected{% endif %}>{{ k.anzeigename }}</option>
                    {% endfor %}
                </select>
                {% endif %}
            </div>
            <div>
                <label for="art">Art *</label>
                <select id="art" name="art" required>
                    {% for opt in kat_optionen("aktivitaet_art") %}
                    <option value="{{ opt.wert }}" {% if aktivitaet and aktivitaet.art == opt.wert %}selected{% endif %}>{{ opt.label }}</option>
                    {% endfor %}
                </select>
            </div>
            <div>
                <label for="datum">Datum</label>
                <input type="datetime-local" id="datum" name="datum" value="{{ aktivitaet.datum.strftime('%Y-%m-%dT%H:%M') if aktivitaet and aktivitaet.datum else (jetzt or '') }}">
            </div>
            <div>
                <label for="status">Status</label>
                <select id="status" name="status">
                    {% for opt in kat_optionen("aktivitaet_status") %}
                    <option value="{{ opt.wert }}" {% if (not aktivitaet and opt.wert == 'information') or (aktivitaet and aktivitaet.status == opt.wert) %}selected{% endif %}>{{ opt.label }}</option>
                    {% endfor %}
                </select>
            </div>
            <div>
                <label for="faellig_am">Fällig am</label>
                <input type="datetime-local" id="faellig_am" name="faellig_am" value="{{ aktivitaet.faellig_am.strftime('%Y-%m-%dT%H:%M') if aktivitaet and aktivitaet.faellig_am else '' }}">
            </div>
            <div class="full-width">
                <label for="betreff">Betreff</label>
                <input type="text" id="betreff" name="betreff" value="{{ aktivitaet.betreff if aktivitaet else '' }}">
            </div>
            <div class="full-width">
                <label for="bemerkung">Bemerkung</label>
                <textarea id="bemerkung" name="bemerkung" rows="4">{{ aktivitaet.bemerkung if aktivitaet else '' }}</textarea>
            </div>
            <div>
                <label for="projekt">Projekt</label>
                <div class="search-dropdown" style="margin-top: 0;">
                    <input type="hidden" name="projekt" id="projekt-value" value="{{ aktivitaet.projekt if aktivitaet else '' }}">
                    <button type="button" class="search-dropdown-toggle" id="projekt-toggle"
                            style="font-size: 0.85rem; padding: 0.4rem 0.6rem; height: auto;"
                            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();}">
                        {{ aktivitaet.projekt if aktivitaet and aktivitaet.projekt else '– Projekt wählen –' }}
                    </button>
                    <div class="search-dropdown-menu" style="max-height: 250px;">
                        <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';});">
                        <div class="search-dropdown-item" data-search="" data-value=""
                             onclick="document.getElementById('projekt-value').value=''; document.getElementById('projekt-toggle').textContent='– Projekt wählen –'; this.closest('.search-dropdown-menu').classList.remove('open'); document.getElementById('projekt-neu-container').style.display='none';">
                            – Kein Projekt –
                        </div>
                        {% if projekte is defined %}
                        {% for p in projekte %}
                        <div class="search-dropdown-item" data-search="{{ p|lower }}" data-value="{{ p }}"
                             onclick="document.getElementById('projekt-value').value='{{ p }}'; document.getElementById('projekt-toggle').textContent='{{ p }}'; this.closest('.search-dropdown-menu').classList.remove('open'); document.getElementById('projekt-neu-container').style.display='none';">
                            {{ p }}
                        </div>
                        {% endfor %}
                        {% endif %}
                        <div class="search-dropdown-item" data-search="" style="color: var(--kw-primary); font-weight: 600;"
                             onclick="this.closest('.search-dropdown-menu').classList.remove('open'); document.getElementById('projekt-neu-container').style.display='block'; document.getElementById('projekt-neu-input').focus();">
                            + Neues Projekt…
                        </div>
                    </div>
                </div>
                <div id="projekt-neu-container" style="display: none; margin-top: 0.4rem;">
                    <input type="text" id="projekt-neu-input" name="projekt_neu" placeholder="Neues Projekt eingeben…"
                           oninput="document.getElementById('projekt-value').value=''; document.getElementById('projekt-toggle').textContent=this.value || '– Projekt wählen –';">
                </div>
            </div>
            <div>
                <label for="zugewiesen_an">Zugewiesen an</label>
                <select id="zugewiesen_an" name="zugewiesen_an">
                    <option value="">– Niemand –</option>
                    {% for b in benutzer %}
                    <option value="{{ b.kuerzel }}" {% if (aktivitaet and aktivitaet.zugewiesen_an == b.kuerzel) or (not aktivitaet and user.kuerzel == b.kuerzel) %}selected{% endif %}>{{ b.name }} ({{ b.kuerzel }})</option>
                    {% endfor %}
                </select>
            </div>
        </div>
    </div>

    <div class="btn-group" style="margin-top: 1rem;">
        <button type="submit">💾 Speichern</button>
        <a href="{{ request.headers.get('referer', '/aktivitaeten') }}" role="button" class="outline">Abbrechen</a>
    </div>
</form>
{% endblock %}
