<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    {% if GOOGLE_SITE_VERIFICATION %}
    <meta name="google-site-verification" content="{{ GOOGLE_SITE_VERIFICATION }}">
    {% endif %}
    <title>{% block title %}AgentForms{% endblock %}</title>
    <link rel="icon" type="image/svg+xml" href="/static/favicon.svg">
    <link rel="shortcut icon" href="/static/favicon.svg">
    <link rel="apple-touch-icon" href="/static/favicon.svg">
    {% block head_extra %}{% endblock %}
    {% include '_shared.css.html' %}
    <style nonce="{{ csp_nonce }}">
        /* Dashboard-specific styles (shared CSS provides :root + base) */
        .main-wrapper { display: flex; flex-direction: column; min-height: calc(100vh - 60px); }
        .container { max-width: 1200px; margin: 0 auto; padding: 20px; flex: 1 0 auto; }
        .card { background: var(--bg-card); border-radius: 8px; padding: 20px; margin-bottom: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
        table { width: 100%; border-collapse: collapse; }
        th, td { text-align: left; padding: 12px; border-bottom: 1px solid var(--border); }
        th { background: var(--bg-elevated); font-weight: 600; }
        .badge { display: inline-block; padding: 2px 8px; background: var(--accent-dim); border-radius: 12px; font-size: 12px; color: var(--accent-bright); }
        .token { font-family: var(--mono); background: var(--bg-elevated); padding: 2px 6px; border-radius: 3px; display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; box-sizing: border-box; }
        td.text-trunc { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .stats { display: flex; gap: 16px; margin-bottom: 20px; }
        .stat { flex: 1; background: var(--bg-card); padding: 20px; border-radius: 8px; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
        .stat-value { font-size: 2em; font-weight: bold; color: var(--text); }
        .stat-label { color: var(--text-muted); margin-top: 4px; }
        form input, form textarea { width: 100%; padding: 10px; margin: 8px 0; border: 1px solid var(--border); border-radius: 4px; }
        form button { margin-top: 12px; }
        .success { background: var(--accent-dim); color: var(--accent-bright); padding: 12px; border-radius: 4px; margin-bottom: 16px; }
        .error { background: #fef2f2; color: #991b1b; padding: 12px; border-radius: 4px; margin-bottom: 16px; }
        .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
        .btn-danger { background: #dc3545; }
        .btn-danger:hover { background: #bb2d3b; }
        @media (max-width: 640px) {
            .container { padding: 12px; }
            .stats { flex-wrap: wrap; }
            .stat { flex: 1 1 calc(50% - 8px); min-width: 140px; }
            th, td { padding: 8px 6px; font-size: 13px; }
            .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
            form input, form textarea { min-height: 44px; }
        }
    </style>
</head>
<body>
    {% include 'nav.html' %}
    <div class="main-wrapper">
    <div class="container">
        {% block content %}{% endblock %}
    </div>
    {% include '_footer.html' %}
    </div>

    <!-- Cookie Consent Banner -->
    <div id="cookie-banner" style="display:none; position:fixed; bottom:0; left:0; right:0; background:#18181b; border-top:1px solid #27272a; padding:16px 24px; z-index:9999; box-shadow:0 -4px 12px rgba(0,0,0,0.4);">
        <div style="max-width:1200px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;">
            <div style="flex:1; min-width:200px;">
                <span style="color:#e4e4e7; font-size:14px;">We use essential cookies to keep AgentForms working. <a href="/privacy" style="color:#00ff41;">Learn more</a>.</span>
            </div>
            <div style="display:flex; gap:8px;">
                <button data-onclick="CookieConsent.dismiss()" style="padding:8px 16px; background:transparent; color:#a1a1aa; border:1px solid #27272a; border-radius:6px; cursor:pointer; font-size:13px;">Decline</button>
                <button data-onclick="CookieConsent.accept()" style="padding:8px 16px; background:#00ff41; color:#0a0a0b; border:none; border-radius:6px; cursor:pointer; font-weight:600; font-size:13px;">Accept</button>
            </div>
        </div>
    </div>
    <script src="/static/js/base-cookie-consent.js"></script>
    {% block scripts %}{% endblock %}
</body>
</html>
