{% set required_keys = ["dict_templates_with_required_keys"] %}

<style>
    .check-section {
        padding: var(--space-8) 0;
        max-width: var(--container-lg);
    }

    .check-section h1 {
        margin-bottom: var(--space-8);
    }

    .check-block {
        margin-bottom: var(--space-8);
    }

    .check-block-label {
        font-size: var(--font-size-xs);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: var(--letter-spacing-widest);
        color: var(--color-text-muted);
        margin-bottom: var(--space-3);
    }

    .check-table-wrap {
        background-color: var(--color-bg-elevated);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        overflow: hidden;
        box-shadow: var(--shadow-sm);
    }

    .check-table {
        width: 100%;
        font-size: var(--font-size-sm);
    }

    .check-table thead tr {
        background-color: var(--color-bg-sunken);
        border-bottom: 1px solid var(--color-border-strong);
    }

    .check-table th {
        padding: var(--space-3) var(--space-6);
        text-align: left;
        font-weight: 600;
        color: var(--color-text-muted);
        letter-spacing: var(--letter-spacing-wide);
    }

    .check-table td {
        padding: var(--space-3) var(--space-6);
        color: var(--color-text);
        border-bottom: 1px solid var(--color-border);
    }

    .check-table tbody tr:last-child td {
        border-bottom: none;
    }

    .check-table tbody tr:hover {
        background-color: var(--color-bg-sunken);
    }

    .check-value {
        font-family: var(--font-mono);
        font-size: var(--font-size-xs);
        background-color: var(--color-bg-sunken);
        color: var(--color-text);
        padding: var(--space-1) var(--space-3);
        border-radius: var(--radius-sm);
        border: 1px solid var(--color-border);
    }

    .check-empty {
        padding: var(--space-6);
        color: var(--color-text-muted);
        font-size: var(--font-size-sm);
    }

    .check-count {
        font-size: var(--font-size-xs);
        color: var(--color-text-muted);
        font-weight: 400;
        margin-left: var(--space-2);
    }

    .check-macro-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-3);
        padding: var(--space-6);
    }
</style>

<section class="check-section container">
    <h1>Client check</h1>

    <div class="check-block">
        <p class="check-block-label">Backend data</p>
        <div class="check-table-wrap">
            {%- if dict_templates_with_required_keys %}
            <table class="check-table">
                <thead>
                    <tr>
                        <th>Key</th>
                        <th>Value</th>
                    </tr>
                </thead>
                <tbody>
                    {%- for key, value in dict_templates_with_required_keys.items() %}
                    <tr>
                        <td>{{ key }}</td>
                        <td><span class="check-value">{{ value }}</span></td>
                    </tr>
                    {%- endfor %}
                </tbody>
            </table>
            {%- else %}
            <p class="check-empty">No data received from backend.</p>
            {%- endif %}
        </div>
    </div>

    <div class="check-block">
        <p class="check-block-label">Local storage</p>
        <div class="check-table-wrap" id="ls-card">
            <p class="check-empty">Loading...</p>
        </div>
    </div>

    <div class="check-block">
        <p class="check-block-label">SEO files</p>
        <div class="check-table-wrap">
            <table class="check-table">
                <thead>
                    <tr>
                        <th>File</th>
                        <th>Link</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>robots.txt</td>
                        <td><a class="check-value" href="/robots.txt" target="_blank">/robots.txt</a></td>
                    </tr>
                    <tr>
                        <td>sitemap.xml</td>
                        <td><a class="check-value" href="/sitemap.xml" target="_blank">/sitemap.xml</a></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <div class="check-block">
        <p class="check-block-label">Cookies</p>
        <div class="check-table-wrap" id="cookie-card">
            <p class="check-empty">Loading...</p>
        </div>
    </div>

    <div class="check-block">
        {%- set macro_count = apep.macros.__dict__ | length %}
        <p class="check-block-label">
            Registered macros
            <span class="check-count">({{ macro_count }})</span>
        </p>
        <div class="check-table-wrap">
            {%- if apep.macros.__dict__ %}
            {%- set macros_sorted = apep.macros.__dict__ | sort %}
            <div class="check-macro-grid">
                {%- for name in macros_sorted %}
                <span class="check-value">{{ name }}</span>
                {%- endfor %}
            </div>
            {%- else %}
            <p class="check-empty">No macros registered.</p>
            {%- endif %}
        </div>
    </div>

</section>

<script>
    (function () {
        function buildTable(entries) {
            if (!entries.length) return '<p class="check-empty">No entries found.</p>';
            var t = '<table class="check-table"><thead><tr><th>Key</th><th>Value</th></tr></thead><tbody>';
            entries.forEach(function (e) {
                t += '<tr><td>' + e[0] + '</td><td><span class="check-value">' + e[1] + '</span></td></tr>';
            });
            t += '</tbody></table>';
            return t;
        }

        var lsCard = document.getElementById('ls-card');
        var lsKeys = Object.keys(localStorage);
        if (lsKeys.length === 0) {
            lsCard.innerHTML = '<p class="check-empty">No local storage entries found.</p>';
        } else {
            lsCard.innerHTML = buildTable(lsKeys.map(function (k) {
                return [k, localStorage.getItem(k)];
            }));
        }

        var cookieCard = document.getElementById('cookie-card');
        var raw = document.cookie;
        if (!raw) {
            cookieCard.innerHTML = '<p class="check-empty">No cookies found.</p>';
        } else {
            var pairs = raw.split(';').map(function (c) {
                var p = c.trim().split('=');
                return [p[0], p.slice(1).join('=') || ''];
            });
            cookieCard.innerHTML = buildTable(pairs);
        }
    })();
</script>