{% extends "base.html" %}

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

{% block content %}
<div class="seo-tool seo-report-page">
    <header class="seo-header">
        <h1><span class="icon">🔍</span> SEO Report</h1>
        {% if target %}<p class="seo-report-target">{{ target }}</p>{% endif %}
    </header>

    {% if status != "done" %}
    <div class="seo-empty">
        <p>This audit is <strong>{{ status or "unknown" }}</strong>. Refresh once it finishes,
           or start a new one from <a href="/tools/seo">SEO Diagnostics</a>.</p>
    </div>
    {% else %}
    <div class="seo-score-card">
        <div class="seo-gauge seo-grade-{{ grade|lower }}" role="img" aria-label="Score {{ score }}, grade {{ grade }}">
            <span class="seo-gauge-score">{{ score }}</span>
            <span class="seo-gauge-grade">{{ grade }}</span>
        </div>
        <div class="seo-score-meta">
            <div class="seo-counts">
                <span class="seo-chip seo-chip-pass">{{ counts.get('pass', 0) }} pass</span>
                <span class="seo-chip seo-chip-warn">{{ counts.get('warn', 0) }} warn</span>
                <span class="seo-chip seo-chip-fail">{{ counts.get('fail', 0) }} fail</span>
                <span class="seo-chip seo-chip-info">{{ counts.get('info', 0) }} info</span>
            </div>
            <p class="seo-report-sub">{{ page_count }} page(s) audited
               {% if generated_at %}&middot; {{ generated_at[:10] }}{% endif %}</p>
        </div>
    </div>

    <div class="seo-categories">
        {% for cat, meta in categories.items() %}
        <div class="seo-cat-pill">
            <span class="seo-cat-name">{{ cat|replace('_', ' ')|title }}</span>
            {% if meta.score is not none %}<span class="seo-cat-score">{{ meta.score }}</span>{% endif %}
        </div>
        {% endfor %}
    </div>

    <div class="seo-checks">
        {% for cat, meta in categories.items() %}
        <section class="seo-check-group">
            <h2>{{ cat|replace('_', ' ')|title }}</h2>
            {% for check in checks if check.category == cat %}
            <div class="seo-check seo-check-{{ check.status }}">
                <span class="seo-check-status">{{ check.status }}</span>
                <div class="seo-check-body">
                    <span class="seo-check-title">{{ check.title }}{% if check.url and page_count > 1 %} <span class="seo-check-url">{{ check.url }}</span>{% endif %}</span>
                    {% if check.value %}<span class="seo-check-value">{{ check.value }}</span>{% endif %}
                    {% if check.recommendation %}<span class="seo-check-rec">{{ check.recommendation }}</span>{% endif %}
                </div>
                <span class="seo-check-severity seo-sev-{{ check.severity }}">{{ check.severity }}</span>
            </div>
            {% endfor %}
        </section>
        {% endfor %}
    </div>
    {% endif %}
</div>
{% endblock %}