<!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}Snauw Counter{% endblock %}</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    <meta name="description" content="Bijhouden van onvriendelijk gedrag - privé en veilig">
    <meta name="theme-color" content="#667eea">

    <!-- PWA metadata -->
    <link rel="manifest" href="{{ url_for('static', filename='manifest.json') }}">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <meta name="apple-mobile-web-app-title" content="Snauw Counter">

    {% block head %}{% endblock %}
</head>
<body>
    <header class="header">
        <div class="container">
            <!-- Snauw Counter Banner -->
            <div class="banner-section">
                <div class="banner-image">
                    <svg class="snauw-banner" viewBox="0 0 1133 576" xmlns="http://www.w3.org/2000/svg">
                        <!-- Metal frame background -->
                        <defs>
                            <linearGradient id="metalGrad" x1="0%" y1="0%" x2="100%" y2="100%">
                                <stop offset="0%" style="stop-color:#4a4a4a;stop-opacity:1" />
                                <stop offset="50%" style="stop-color:#2c2c2c;stop-opacity:1" />
                                <stop offset="100%" style="stop-color:#1a1a1a;stop-opacity:1" />
                            </linearGradient>
                            <radialGradient id="boltGrad" cx="50%" cy="50%" r="50%">
                                <stop offset="0%" style="stop-color:#ffffff;stop-opacity:1" />
                                <stop offset="20%" style="stop-color:#e0e0e0;stop-opacity:1" />
                                <stop offset="100%" style="stop-color:#a0a0a0;stop-opacity:1" />
                            </radialGradient>
                        </defs>

                        <!-- Background frame -->
                        <rect x="20" y="20" width="1093" height="536" fill="url(#metalGrad)" stroke="#666" stroke-width="4" rx="15"/>

                        <!-- Corner bolts -->
                        <circle cx="45" cy="45" r="12" fill="url(#boltGrad)" stroke="#333" stroke-width="2"/>
                        <circle cx="45" cy="45" r="8" fill="none" stroke="#222" stroke-width="1"/>
                        <circle cx="45" cy="45" r="4" fill="none" stroke="#222" stroke-width="1"/>

                        <circle cx="1088" cy="45" r="12" fill="url(#boltGrad)" stroke="#333" stroke-width="2"/>
                        <circle cx="1088" cy="45" r="8" fill="none" stroke="#222" stroke-width="1"/>
                        <circle cx="1088" cy="45" r="4" fill="none" stroke="#222" stroke-width="1"/>

                        <circle cx="45" cy="531" r="12" fill="url(#boltGrad)" stroke="#333" stroke-width="2"/>
                        <circle cx="45" cy="531" r="8" fill="none" stroke="#222" stroke-width="1"/>
                        <circle cx="45" cy="531" r="4" fill="none" stroke="#222" stroke-width="1"/>

                        <circle cx="1088" cy="531" r="12" fill="url(#boltGrad)" stroke="#333" stroke-width="2"/>
                        <circle cx="1088" cy="531" r="8" fill="none" stroke="#222" stroke-width="1"/>
                        <circle cx="1088" cy="531" r="4" fill="none" stroke="#222" stroke-width="1"/>

                        <!-- Dark stormy background -->
                        <rect x="40" y="40" width="1053" height="496" fill="#1a1a2e" rx="10"/>

                        <!-- Storm clouds -->
                        <ellipse cx="150" cy="100" rx="60" ry="30" fill="#3d3d5c" opacity="0.8"/>
                        <ellipse cx="180" cy="85" rx="45" ry="25" fill="#4a4a6b" opacity="0.7"/>
                        <ellipse cx="950" cy="120" rx="70" ry="35" fill="#3d3d5c" opacity="0.8"/>
                        <ellipse cx="980" cy="105" rx="50" ry="28" fill="#4a4a6b" opacity="0.7"/>
                        <ellipse cx="500" cy="80" rx="40" ry="20" fill="#4a4a6b" opacity="0.6"/>

                        <!-- Lightning effects -->
                        <path d="M 120 150 L 140 180 L 130 180 L 150 220 L 135 200 L 145 200 L 125 170 Z" fill="#f1c40f" opacity="0.9"/>
                        <path d="M 980 160 L 1000 190 L 990 190 L 1010 230 L 995 210 L 1005 210 L 985 180 Z" fill="#f1c40f" opacity="0.9"/>

                        <!-- Swear symbols -->
                        <text x="180" y="250" fill="#e74c3c" font-size="32" font-weight="bold" font-family="Arial, sans-serif">@#$!?!</text>

                        <!-- Main title banner -->
                        <path d="M 300 180 L 833 180 L 853 220 L 833 260 L 300 260 L 280 220 Z" fill="#d35400" stroke="#a04000" stroke-width="3"/>
                        <path d="M 305 185 L 828 185 L 845 220 L 828 255 L 305 255 L 285 220 Z" fill="#e67e22"/>

                        <text x="566" y="235" text-anchor="middle" fill="white" font-size="42" font-weight="bold" font-family="Arial, sans-serif" text-shadow="2px 2px 4px rgba(0,0,0,0.5)">SNAUW COUNTER!</text>

                        <!-- Counter display -->
                        <rect x="410" y="350" width="313" height="80" fill="#2c3e50" stroke="#ecf0f1" stroke-width="4" rx="8"/>
                        <rect x="418" y="358" width="297" height="64" fill="#34495e" rx="4"/>

                        <text x="440" y="385" fill="#bdc3c7" font-size="24" font-weight="bold" font-family="Arial, sans-serif">STAND:</text>

                        <!-- Individual counter digits -->
                        <rect x="520" y="368" width="50" height="48" fill="#1a1a1a" stroke="#ecf0f1" stroke-width="2" rx="4"/>
                        <text x="545" y="402" text-anchor="middle" fill="#e74c3c" font-size="36" font-weight="bold" id="counter-digit-1">0</text>

                        <rect x="580" y="368" width="50" height="48" fill="#1a1a1a" stroke="#ecf0f1" stroke-width="2" rx="4"/>
                        <text x="605" y="402" text-anchor="middle" fill="#e74c3c" font-size="36" font-weight="bold" id="counter-digit-2">1</text>

                        <rect x="640" y="368" width="50" height="48" fill="#1a1a1a" stroke="#ecf0f1" stroke-width="2" rx="4"/>
                        <text x="665" y="402" text-anchor="middle" fill="#e74c3c" font-size="36" font-weight="bold" id="counter-digit-3">5</text>

                        <!-- Woman (angry, left side) -->
                        <!-- Hair -->
                        <path d="M 150 280 Q 120 270 110 300 Q 105 330 115 350 Q 125 360 140 365 Q 160 370 180 365 Q 200 360 210 350 Q 220 330 215 300 Q 205 270 175 280" fill="#8B4513" stroke="#654321" stroke-width="2"/>

                        <!-- Face -->
                        <ellipse cx="162" cy="320" rx="35" ry="40" fill="#FDBCB4" stroke="#E6A8A0" stroke-width="2"/>

                        <!-- Eyes (angry) -->
                        <ellipse cx="150" cy="310" rx="8" ry="6" fill="white"/>
                        <ellipse cx="174" cy="310" rx="8" ry="6" fill="white"/>
                        <circle cx="150" cy="310" r="4" fill="#2c3e50"/>
                        <circle cx="174" cy="310" r="4" fill="#2c3e50"/>

                        <!-- Angry eyebrows -->
                        <path d="M 140 300 L 158 305" stroke="#8B4513" stroke-width="3" stroke-linecap="round"/>
                        <path d="M 166 305 L 184 300" stroke="#8B4513" stroke-width="3" stroke-linecap="round"/>

                        <!-- Nose -->
                        <ellipse cx="162" cy="325" rx="3" ry="5" fill="#E6A8A0"/>

                        <!-- Mouth (shouting) -->
                        <ellipse cx="162" cy="340" rx="12" ry="8" fill="#8B0000"/>
                        <ellipse cx="162" cy="340" rx="10" ry="6" fill="#000000"/>

                        <!-- Pointing finger -->
                        <rect x="200" y="335" width="25" height="8" fill="#FDBCB4" rx="4"/>
                        <ellipse cx="228" cy="339" rx="6" ry="4" fill="#FDBCB4"/>

                        <!-- Arm -->
                        <ellipse cx="190" cy="360" rx="15" ry="30" fill="#2D4A22" transform="rotate(20 190 360)"/>

                        <!-- Body -->
                        <ellipse cx="162" cy="420" rx="40" ry="60" fill="#2D4A22"/>

                        <!-- Man (worried, right side) -->
                        <!-- Hair -->
                        <path d="M 920 280 Q 890 270 880 300 Q 875 320 885 340 Q 900 355 920 360 Q 945 365 970 360 Q 990 355 1005 340 Q 1015 320 1010 300 Q 1000 270 970 280" fill="#D2691E" stroke="#A0522D" stroke-width="2"/>

                        <!-- Face -->
                        <ellipse cx="950" cy="320" rx="40" ry="45" fill="#FDBCB4" stroke="#E6A8A0" stroke-width="2"/>

                        <!-- Eyes (worried) -->
                        <ellipse cx="935" cy="310" rx="9" ry="7" fill="white"/>
                        <ellipse cx="965" cy="310" rx="9" ry="7" fill="white"/>
                        <circle cx="935" cy="312" r="4" fill="#2c3e50"/>
                        <circle cx="965" cy="312" r="4" fill="#2c3e50"/>

                        <!-- Worried eyebrows -->
                        <path d="M 925 300 Q 935 295 945 300" stroke="#D2691E" stroke-width="3" stroke-linecap="round"/>
                        <path d="M 955 300 Q 965 295 975 300" stroke="#D2691E" stroke-width="3" stroke-linecap="round"/>

                        <!-- Nose -->
                        <ellipse cx="950" cy="325" rx="3" ry="5" fill="#E6A8A0"/>

                        <!-- Mouth (worried) -->
                        <path d="M 935 340 Q 950 350 965 340" stroke="#8B0000" stroke-width="3" fill="none" stroke-linecap="round"/>

                        <!-- Hand on head -->
                        <ellipse cx="920" cy="300" rx="8" ry="12" fill="#FDBCB4" transform="rotate(-30 920 300)"/>
                        <rect x="910" y="290" width="20" height="8" fill="#FDBCB4" rx="4" transform="rotate(-30 920 294)"/>

                        <!-- Arm -->
                        <ellipse cx="925" cy="350" rx="12" ry="25" fill="#1E3A8A" transform="rotate(-20 925 350)"/>

                        <!-- Body/shirt -->
                        <ellipse cx="950" cy="420" rx="45" ry="65" fill="#1E3A8A"/>

                        <!-- Update header counter with JavaScript hook -->
                        <text x="566" y="500" text-anchor="middle" fill="transparent" font-size="1" id="header-counter">015</text>
                    </svg>
                </div>
            </div>

            <nav class="nav">
                <a href="{{ url_for('main.index') }}" {% if request.endpoint == 'main.index' %}class="active"{% endif %}>
                    🏠 Home
                </a>
                <a href="{{ url_for('main.statistics') }}" {% if request.endpoint == 'main.statistics' %}class="active"{% endif %}>
                    📈 Statistieken
                </a>
                {% if current_user.is_authenticated %}
                    <a href="{{ url_for('main.logout') }}">🚪 Uitloggen</a>
                {% else %}
                    <a href="{{ url_for('main.login') }}" {% if request.endpoint == 'main.login' %}class="active"{% endif %}>
                        🔐 Inloggen
                    </a>
                {% endif %}
            </nav>
        </div>
    </header>

    <main class="container">
        <!-- Flash messages -->
        {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
                <div class="flash-messages">
                    {% for category, message in messages %}
                        <div class="alert alert-{{ 'error' if category == 'error' else category }}">
                            {{ message }}
                        </div>
                    {% endfor %}
                </div>
            {% endif %}
        {% endwith %}

        <!-- Privacy notice voor anonieme gebruikers -->
        {% if not current_user.is_authenticated %}
            <div class="privacy-notice" id="privacy-notice">
                <strong>🔒 Privacy:</strong> Als anonieme gebruiker worden je gegevens alleen lokaal opgeslagen in je browser.
                <a href="{{ url_for('main.register') }}" style="color: #856404; text-decoration: underline;">Maak een account</a>
                om je gegevens veilig op te slaan.
                <button onclick="hidePrivacyNotice()" style="float: right; background: none; border: none; color: #856404; cursor: pointer;">✕</button>
            </div>
        {% endif %}

        {% block content %}{% endblock %}
    </main>

    <!-- Floating Action Button voor snelle incident toevoeging -->
    {% if request.endpoint != 'main.add_incident' %}
        <button class="fab" onclick="quickAddIncident()" title="Snel incident toevoegen">+</button>
    {% endif %}

    <script src="{{ url_for('static', filename='js/app.js') }}"></script>
    {% block scripts %}{% endblock %}
</body>
</html>
