{% extends "base.html" %}
{% block title %}{{ 'Bearbeiten' if kampagne else 'Neue Kampagne' }}{{ " - " + app_name() }}{% endblock %}

{% block content %}
<div class="page-header">
    <h1>{% if kampagne %}Kampagne bearbeiten{% else %}Neue Kampagne{% 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="kampagne-form" class="btn-sm">Speichern</button>
    </div>
</div>

<form id="kampagne-form" method="post" action="{% if kampagne %}/kampagnen/{{ kampagne.id }}/bearbeiten{% else %}/kampagnen/neu{% endif %}">
    <div class="card">
        <div class="form-grid">
            <div class="full-width">
                <label for="titel">Titel *</label>
                <input type="text" id="titel" name="titel" value="{{ kampagne.titel if kampagne else '' }}" required>
            </div>
            <div>
                <label for="typ">Typ</label>
                <select id="typ" name="typ">
                    {% for opt in kat_optionen("kampagne_typ") %}
                    <option value="{{ opt.wert }}" {% if kampagne and kampagne.typ == opt.wert %}selected{% endif %}>{{ opt.label }}</option>
                    {% endfor %}
                </select>
            </div>
            <div>
                <label for="status">Status</label>
                <select id="status" name="status">
                    {% for opt in kat_optionen("kampagne_status") %}
                    <option value="{{ opt.wert }}" {% if kampagne and kampagne.status == opt.wert %}selected{% endif %}>{{ opt.label }}</option>
                    {% endfor %}
                </select>
            </div>
            <div>
                <label for="projekt">Projekt</label>
                <div class="search-dropdown" style="margin-top: 0;">
                    <input type="hidden" name="projekt" id="projekt-value" value="{{ kampagne.projekt if kampagne 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();}">
                        {{ kampagne.projekt if kampagne and kampagne.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 class="full-width">
                <label for="beschreibung">Beschreibung</label>
                <textarea id="beschreibung" name="beschreibung" rows="4">{{ kampagne.beschreibung if kampagne else '' }}</textarea>
            </div>
        </div>
    </div>
    <div class="btn-group" style="margin-top: 1rem;">
        <button type="submit">Speichern</button>
        <a href="/kampagnen" role="button" class="outline">Abbrechen</a>
    </div>
</form>
{% endblock %}
