<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}{{ app_name() }}{% endblock %}</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
    <link rel="stylesheet" href="/static/css/style.css">
    <script src="/static/js/htmx.min.js"></script>
    <script src="/static/js/app.js" defer></script>
</head>
<body>
    <div class="app-layout">
        <!-- Sidebar -->
        <nav class="sidebar">
            <a href="/" class="sidebar-brand">📋 <span>{{ app_name() }}</span></a>
            <div class="sidebar-nav">
                <a href="/" class="sidebar-link {% if active_page == 'dashboard' %}active{% endif %}">
                    <span class="nav-icon">🏠</span> <span>Dashboard</span></a>
                <a href="/workflows" class="sidebar-link {% if active_page == 'workflows' %}active{% endif %}">
                    <span class="nav-icon">📖</span> <span>Workflows</span></a>
                <a href="/aufraemen" class="sidebar-link {% if active_page == 'aufraemen' %}active{% endif %}">
                    <span class="nav-icon">🧹</span> <span>Aufräumen</span></a>
                <div class="sidebar-section">Kontakte</div>
                <a href="/kontakte" class="sidebar-link {% if active_page == 'kontakte' %}active{% endif %}">
                    <span class="nav-icon">👤</span> <span>Personen</span></a>
                <a href="/organisationen" class="sidebar-link {% if active_page == 'organisationen' %}active{% endif %}">
                    <span class="nav-icon">🏢</span> <span>Organisationen</span></a>
                <a href="/recherche" class="sidebar-link {% if active_page == 'recherche' %}active{% endif %}">
                    <span class="nav-icon">🎯</span> <span>Recherche</span></a>
                <div class="sidebar-section">Aktivitäten</div>
                <a href="/aktivitaeten" class="sidebar-link {% if active_page == 'aktivitaeten' %}active{% endif %}">
                    <span class="nav-icon">📋</span> <span>Aktivitäten</span></a>
                <a href="/veranstaltungen" class="sidebar-link {% if active_page == 'veranstaltungen' %}active{% endif %}">
                    <span class="nav-icon">📅</span> <span>Veranstaltungen</span></a>
                <a href="/kampagnen" class="sidebar-link {% if active_page == 'kampagnen' %}active{% endif %}">
                    <span class="nav-icon">📢</span> <span>Kampagnen</span></a>
                <a href="/spenden" class="sidebar-link {% if active_page == 'spenden' %}active{% endif %}">
                    <span class="nav-icon">💰</span> <span>Spenden</span></a>
                <a href="/auswertungen" class="sidebar-link {% if active_page == 'auswertungen' %}active{% endif %}">
                    <span class="nav-icon">📊</span> <span>Auswertungen</span></a>
                <div class="sidebar-section">Verwaltung</div>
                <a href="/tags" class="sidebar-link {% if active_page == 'tags' %}active{% endif %}">
                    <span class="nav-icon">🏷️</span> <span>Tags</span></a>
                <a href="/einstellungen" class="sidebar-link {% if active_page == 'einstellungen' %}active{% endif %}">
                    <span class="nav-icon">⚙️</span> <span>Einstellungen</span></a>
            </div>
            {% if user %}
            <div class="sidebar-user">
                <span>{{ user.kuerzel }}</span>
                <a href="/logout" style="color: rgba(255,255,255,0.7); font-size: 0.8rem;">Abmelden</a>
            </div>
            {% endif %}
        </nav>

        <!-- Main Content -->
        <div class="main-content">
            <!-- Top Bar -->
            <header class="top-bar">
                <div class="search-box">
                    <input type="search" id="global-search" name="q"
                           placeholder="Suchen... (Ctrl+K)"
                           hx-get="/suche/live"
                           hx-trigger="keyup changed delay:200ms"
                           hx-target="#search-dropdown"
                           hx-swap="innerHTML"
                           autocomplete="off">
                    <span class="search-kbd">Ctrl+K</span>
                    <div id="search-dropdown"></div>
                </div>
                {% block top_bar_right %}{% endblock %}
            </header>

            <!-- Page Content -->
            <main class="page-content">
                {% block content %}{% endblock %}
            </main>
        </div>
    </div>
    <script>
    /* Leere Felder aus GET-Formularen entfernen (verhindert ?kampagne_id= int-Fehler) */
    document.addEventListener('DOMContentLoaded', function() {
        document.querySelectorAll('form[method="get"]').forEach(function(f) {
            f.addEventListener('submit', function() {
                this.querySelectorAll('input, select').forEach(function(el) {
                    if (el.value === '') el.name = '';
                });
            });
        });
    });
    </script>
</body>
</html>
