<!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 nonce="{{ csp_nonce }}">
    var CookieConsent = {
        storageKey: 'af_cookie_consent',
        init: function() {
            var consent = localStorage.getItem(this.storageKey);
            if (!consent) {
                document.getElementById('cookie-banner').style.display = 'block';
            }
        },
        accept: function() {
            localStorage.setItem(this.storageKey, 'accepted');
            document.getElementById('cookie-banner').style.display = 'none';
        },
        dismiss: function() {
            localStorage.setItem(this.storageKey, 'declined');
            document.getElementById('cookie-banner').style.display = 'none';
        }
    };
    CookieConsent.init();

    // ─── CSP-safe event delegation (replaces inline on* handlers) ────
    (function() {
        var H = {
            'data-onclick': 'click',
            'data-onsubmit': 'submit',
            'data-onchange': 'change',
            'data-oninput': 'input',
            'data-onkeyup': 'keyup',
            'data-onkeydown': 'keydown',
            'data-onkeypress': 'keypress',
            'data-onfocus': 'focusin',
            'data-onblur': 'focusout',
        };
        function _resolveFn(name, ctx) {
            // Resolve dotted function names (e.g. "CookieConsent.accept")
            // Try ctx first, then fall back to window (global functions)
            var parts = name.split('.');
            var obj = ctx || window;
            for (var i = 0; i < parts.length; i++) {
                if (typeof obj[parts[i]] === 'function') {
                    obj = obj[parts[i]];
                } else if (i === 0 && window && typeof window[parts[i]] === 'function') {
                    // First part not found on ctx — fall back to window
                    obj = window;
                    obj = obj[parts[i]];
                } else {
                    return null;
                }
            }
            return obj;
        }
        function _parseCall(code) {
            // Parse "fnName(args)" or "fnName" or "obj.fn(args)" or "return fn(args)"
            var s = code.trim();
            if (s.startsWith('return ')) s = s.slice(7).trim();
            // Match fnName(...) or obj.fn(...)
            var m = s.match(/^([\w.$]+)\((.*)\)$/);
            if (m) return { fn: m[1], argsStr: m[2] };
            // No args
            if (/^[\w.$]+$/.test(s)) return { fn: s, argsStr: '' };
            return null;
        }
        function _splitArgs(str) {
            if (!str.trim()) return [];
            var args = [], current = '', depth = 0, inStr = false, strChar = '';
            for (var i = 0; i < str.length; i++) {
                var c = str[i];
                if (inStr) { if (c === strChar) inStr = false; current += c; continue; }
                if (c === '"' || c === "'") { inStr = true; strChar = c; current += c; continue; }
                if (c === '(' || c === '[' || c === '{') depth++;
                if (c === ')' || c === ']' || c === '}') depth--;
                if (c === ',' && depth === 0) { args.push(current.trim()); current = ''; continue; }
                current += c;
            }
            if (current.trim()) args.push(current.trim());
            return args;
        }
        function _invoke(code, el, e) {
            var parsed = _parseCall(code);
            if (!parsed) return undefined;
            var fn = _resolveFn(parsed.fn, el);
            if (!fn) { console.warn('CSP delegate: unknown function', parsed.fn); return undefined; }
            var args = _splitArgs(parsed.argsStr);
            // Replace 'this' references with element, 'event' with e, parse string literals
            args = args.map(function(a) {
                if (a === 'this') return el;
                if (a === 'event' || a === 'e') return e;
                if (a === 'this.value') return el.value;
                if (a === 'this.form') return el.form;
                if (a === 'this.checked') return el.checked;
                // Parse string literals (strip surrounding quotes)
                if ((a.startsWith("'") && a.endsWith("'")) || (a.startsWith('"') && a.endsWith('"'))) {
                    return a.slice(1, -1);
                }
                return a; // pass raw for numbers, booleans, etc.
            });
            return fn.apply(window, args);
        }
        for (var attr in H) {
            (function(a, ev) {
                document.addEventListener(ev, function(e) {
                    var el = e.target.closest('[' + a + ']');
                    if (!el) return;
                    var code = el.getAttribute(a);
                    if (!code) return;
                    var result = _invoke(code, el, e);
                    if (result === false) {
                        e.preventDefault();
                        e.stopPropagation();
                    }
                }, ev === 'focusin' || ev === 'focusout');
            })(attr, H[attr]);
        }
        // Handle data-onerror/data-onload for images (non-bubbling)
        ['error', 'load'].forEach(function(ev) {
            document.addEventListener(ev, function(e) {
                var code = e.target.getAttribute('data-' + ev);
                if (!code) return;
                _invoke(code, e.target, e);
            }, true);
        });
    })();
    </script>
    {% block scripts %}{% endblock %}
</body>
</html>
