{% extends "base.html" %}

{% block extra_head %}
<link rel="stylesheet" href="{{ static_url('/static/css/sidebar.css') }}">
<link rel="stylesheet" href="{{ static_url('/static/css/seo-tool.css') }}">
{% endblock %}

{% block content %}
<div class="seo-layout" data-seo-tool>
    <aside class="sidebar-card" role="navigation" aria-label="SEO Diagnostics">
        <div class="sidebar-heading" role="heading" aria-level="2">SEO Diagnostics</div>
        <div class="sidebar-nav">
            <a href="/tools" class="sidebar-link">
                <span class="icon">&#x1F9F0;</span>
                All tools
            </a>
            <a href="/tools/seo" class="sidebar-link active">
                <span class="icon">&#x1F50D;</span>
                SEO audit
            </a>
        </div>

        <div class="sidebar-section">
            <div class="sidebar-heading">What it checks</div>
            <ul class="seo-side-list">
                <li>Crawlability and indexing</li>
                <li>Meta tags and titles</li>
                <li>Structured data (JSON-LD)</li>
                <li>Core Web Vitals</li>
                <li>Accessibility and mobile</li>
                <li>AI-readiness</li>
            </ul>
        </div>

        <div class="sidebar-section">
            <div class="sidebar-heading">Tips</div>
            <ul class="seo-side-list">
                <li>Use Single URL for one page, Sitemap to crawl many.</li>
                <li>Sitemap mode is capped at 50 pages per run.</li>
                <li>Only one audit runs at a time per visitor.</li>
                <li>Progress streams live below as pages load.</li>
            </ul>
        </div>
    </aside>

    <div class="seo-main">
        <header class="seo-header">
            <h1><span class="icon">🔍</span> SEO Diagnostics</h1>
            <p>Audit any URL or sitemap against a broad battery of technical, on-page, structured-data,
               Core Web Vitals, accessibility and AI-readiness checks. Progress streams live.</p>
        </header>

        <section class="seo-form-card">
            <form class="seo-form" data-seo-form autocomplete="off" aria-label="Run SEO audit">
                <div class="seo-form-row">
                    <input type="url" name="url" class="seo-input" placeholder="https://example.com" required aria-required="true" aria-label="URL or sitemap to audit">
                    <select name="mode" class="seo-select" data-seo-mode aria-label="Audit mode">
                        <option value="url">Single URL</option>
                        <option value="sitemap">Sitemap</option>
                    </select>
                    <label class="seo-pages" data-seo-pages hidden>
                        Pages
                        <input type="number" name="max_pages" class="seo-input seo-input-num" value="10" min="1" max="50">
                    </label>
                    <button type="submit" class="btn btn-primary seo-run-btn" data-seo-run>Run audit</button>
                </div>
                <p class="seo-form-error" data-seo-error hidden role="alert"></p>
            </form>
        </section>

        <section class="seo-live" data-seo-live hidden aria-label="Audit progress">
            <div class="seo-live-head">
                <span class="seo-live-status" data-seo-status role="status" aria-live="polite">Starting…</span>
                <span class="seo-live-count" data-seo-count aria-live="polite"></span>
            </div>
            <div class="seo-progress"><div class="seo-progress-bar" data-seo-bar></div></div>
            <ul class="seo-log" data-seo-log role="log" aria-live="polite"></ul>
        </section>

        <section class="seo-report" data-seo-report hidden aria-label="Audit report">
            <div class="seo-score-card">
                <div class="seo-gauge" data-seo-gauge>
                    <span class="seo-gauge-score" data-seo-score>0</span>
                    <span class="seo-gauge-grade" data-seo-grade></span>
                </div>
                <div class="seo-score-meta">
                    <h2 data-seo-target></h2>
                    <div class="seo-counts" data-seo-counts></div>
                    <a class="seo-report-link" data-seo-report-link href="#" target="_blank" rel="noopener">Open full report</a>
                </div>
            </div>
            <div class="seo-categories" data-seo-categories></div>
            <div class="seo-checks" data-seo-checks></div>
        </section>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script type="module">
    import { SeoDiagnostics } from "{{ static_url('/static/js/SeoDiagnostics.js') }}";
    window.app.seoDiagnostics = new SeoDiagnostics();
</script>
{% endblock %}