{% set required_keys = ["dict_templates_with_required_keys"] %}
<content>
    <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);
        }
    </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>
    </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>
</content>