<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}Sub Admin{% endblock %} | Event Photo</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <style>
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body { font-family: 'Plus Jakarta Sans', sans-serif; background: #f1f5f9; color: #0f172a; min-height: 100vh; display: flex; }

        /* Sidebar */
        .sa-sidebar {
            width: 240px; min-height: 100vh; background: #ffffff;
            border-right: 1px solid #e2e8f0; display: flex; flex-direction: column;
            flex-shrink: 0; position: sticky; top: 0; height: 100vh; overflow-y: auto;
        }
        .sa-logo-wrap {
            padding: 20px 16px; border-bottom: 1px solid #e2e8f0;
            display: flex; align-items: center; justify-content: center;
        }
        .sa-logo-wrap img { max-width: 130px; height: auto; }
        .sa-nav { padding: 16px 10px; flex: 1; }
        .sa-nav-title { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: #94a3b8; padding: 10px 12px 6px; display: block; }
        .sa-nav a {
            display: flex; align-items: center; gap: 8px;
            padding: 10px 14px; margin: 2px 0; border-radius: 10px;
            color: #475569; font-size: 14px; font-weight: 500;
            text-decoration: none; transition: all 0.2s;
        }
        .sa-nav a:hover { background: #f1f5f9; color: #0f172a; }
        .sa-nav a.active { background: #e0f2fe; color: #0f2b3d; font-weight: 700; border-left: 3px solid #2c7da0; padding-left: 11px; }
        .sa-footer { padding: 14px 16px; border-top: 1px solid #e2e8f0; }
        .sa-role-badge { background: #fef3c7; color: #92400e; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 20px; display: inline-block; margin-bottom: 10px; }
        .sa-logout {
            display: block; width: 100%; padding: 10px; background: #ef4444;
            color: #ffffff; border: none; border-radius: 10px; font-size: 14px;
            font-weight: 700; cursor: pointer; text-align: center; text-decoration: none;
        }
        .sa-logout:hover { background: #dc2626; }

        /* Main */
        .sa-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
        .sa-topbar {
            background: #ffffff; border-bottom: 1px solid #e2e8f0;
            padding: 16px 24px; display: flex; align-items: center;
            justify-content: space-between; gap: 12px;
        }
        .sa-topbar-left p { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: #94a3b8; }
        .sa-topbar-left h1 { font-size: 22px; font-weight: 800; color: #0f172a; }
        .sa-user-chip { font-size: 13px; font-weight: 600; color: #475569; background: #f1f5f9; padding: 6px 14px; border-radius: 20px; }

        /* Content */
        .sa-content { padding: 24px; flex: 1; }

        /* Cards */
        .sa-card { background: #ffffff; border-radius: 16px; border: 1px solid #e2e8f0; box-shadow: 0 2px 8px rgba(0,0,0,0.04); overflow: hidden; margin-bottom: 20px; }
        .sa-card-header { padding: 20px 24px; border-bottom: 1px solid #f1f5f9; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
        .sa-card-header h2 { font-size: 18px; font-weight: 800; color: #0f172a; }
        .sa-card-body { padding: 20px 24px; }
        .sa-eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: #64748b; margin-bottom: 4px; }

        /* Toasts */
        .sa-toast-container { position: fixed; top: 20px; right: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; max-width: 360px; pointer-events: none; }
        .sa-toast { padding: 13px 18px; border-radius: 12px; font-size: 14px; font-weight: 600; color: #fff; box-shadow: 0 4px 16px rgba(0,0,0,0.2); display: flex; align-items: center; justify-content: space-between; gap: 10px; pointer-events: all; animation: saToastIn 0.3s ease; }
        .sa-toast.success { background: linear-gradient(135deg,#16a34a,#15803d); }
        .sa-toast.error   { background: linear-gradient(135deg,#dc2626,#b91c1c); }
        .sa-toast.info    { background: linear-gradient(135deg,#2c7da0,#1a5f7a); }
        .sa-toast button  { background: transparent; border: none; color: #fff; font-size: 18px; cursor: pointer; padding: 0; }
        @keyframes saToastIn { from { opacity:0; transform:translateX(20px); } to { opacity:1; transform:translateX(0); } }

        .pill { background: #f1f5f9; color: #475569; font-size: 13px; font-weight: 700; padding: 4px 12px; border-radius: 20px; border: 1px solid #e2e8f0; }

        @media (max-width: 768px) {
            .sa-sidebar { display: none; }
            .sa-content { padding: 14px; }
        }
    </style>
    {% block head %}{% endblock %}
</head>
<body>
    <!-- Toast container -->
    <div class="sa-toast-container" id="saToastContainer"></div>

    <!-- Sidebar -->
    <aside class="sa-sidebar">
        <div class="sa-logo-wrap">
            <img src="/admin/static/imtma_logo.png" alt="Logo">
        </div>
        <nav class="sa-nav">
            <span class="sa-nav-title">Main</span>
            <a href="/subadmin/dashboard" class="{% if active == 'dashboard' %}active{% endif %}">📊 Dashboard</a>

            <span class="sa-nav-title">Management</span>
            <a href="/subadmin/visitors" class="{% if active == 'visitors' %}active{% endif %}">👥 Visitors</a>
            <a href="/subadmin/consent"  class="{% if active == 'consent'  %}active{% endif %}">📋 Consent</a>
        </nav>
        <div class="sa-footer">
            <span class="sa-role-badge">Sub Admin</span>
            <form method="POST" action="/logout">
                <button type="submit" class="sa-logout">Logout</button>
            </form>
        </div>
    </aside>

    <!-- Main -->
    <div class="sa-main">
        <header class="sa-topbar">
            <div class="sa-topbar-left">
                <p class="sa-eyebrow">{% block eyebrow %}Sub Admin{% endblock %}</p>
                <h1>{% block page_title %}Dashboard{% endblock %}</h1>
            </div>
            <span class="sa-user-chip">{{ session.get('username', 'sub_admin') }}</span>
        </header>

        <main class="sa-content">
            {% block content %}{% endblock %}
        </main>
    </div>

    <script>
        function saToast(msg, type) {
            const c = document.getElementById('saToastContainer');
            const t = document.createElement('div');
            t.className = `sa-toast ${type}`;
            t.innerHTML = `<span>${msg}</span><button onclick="this.parentElement.remove()">&times;</button>`;
            c.appendChild(t);
            setTimeout(() => t.remove(), 4000);
        }
    </script>
    {% block scripts %}{% endblock %}
</body>
</html>