{% extends "admin_base.html" %}
{% import "macros/admin_crud_list.html" as crud %}
{% import "macros/modal.html" as modal %}
{% import "macros/loading_spinner.html" as spinner %}

{% block extra_head %}
{% include "partials/admin_vendor_chartjs.html" %}
{% endblock %}

{% block page_title %}SEO Projects{% endblock %}

{% block admin_content %}
<div class="mx-auto w-full max-w-7xl space-y-6 p-4 sm:p-6" data-plugin="seo-tool" id="seo-admin-root">

    <div class="flex flex-wrap items-start justify-between gap-4">
        <div>
            <h1 class="mb-1 text-2xl font-semibold">SEO Intelligence</h1>
            <p class="text-muted">Semrush-style audits for any domain — hosting agnostic.</p>
        </div>
    </div>

    <div class="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-4">
        <div class="flex flex-col gap-1 rounded-xl border border-divider bg-surface p-4 shadow-sm">
            <span class="text-xs font-medium uppercase tracking-wide text-muted">Projects</span>
            <span class="text-2xl font-semibold" id="seo-stat-projects">—</span>
        </div>
        <div class="flex flex-col gap-1 rounded-xl border border-divider bg-surface p-4 shadow-sm">
            <span class="text-xs font-medium uppercase tracking-wide text-muted">Domains</span>
            <span class="text-2xl font-semibold" id="seo-stat-domains">—</span>
        </div>
        <div class="flex flex-col gap-1 rounded-xl border border-divider bg-surface p-4 shadow-sm">
            <span class="text-xs font-medium uppercase tracking-wide text-muted">Crawl pages (month)</span>
            <span class="text-2xl font-semibold" id="seo-crawl-usage">—</span>
        </div>
        <div class="flex flex-col gap-1 rounded-xl border border-divider bg-surface p-4 shadow-sm">
            <span class="text-xs font-medium uppercase tracking-wide text-muted">Tracked keywords</span>
            <span class="text-2xl font-semibold" id="seo-stat-keywords">—</span>
        </div>
    </div>

    <div class="space-y-5">
        <section class="min-w-0 space-y-4 rounded-xl border border-divider bg-surface p-4 shadow-sm sm:p-5">
            {{ crud::shell_open(config_url="/plugins/seo-tool/assets/admin/projects_list.json", mount_id="seo-projects-list", custom_mount=true) }}
            <div class="min-w-0">
                <table class="w-full">
                    <thead></thead>
                    <tbody>
                        <tr><td colspan="3" class="crud-empty-state">{{ spinner::loading_spinner(label="Loading projects…", inline=true) }}</td></tr>
                    </tbody>
                </table>
            </div>
            {{ crud::shell_close() }}
        </section>

        <section class="min-w-0 space-y-4 rounded-xl border border-divider bg-surface p-4 shadow-sm sm:p-5">
            {{ crud::shell_open(config_url="/plugins/seo-tool/assets/admin/domains_list.json", mount_id="seo-domains-list", custom_mount=true) }}
            <div class="min-w-0">
                <table class="w-full">
                    <thead></thead>
                    <tbody>
                        <tr><td colspan="6" class="crud-empty-state">{{ spinner::loading_spinner(label="Loading domains…", inline=true) }}</td></tr>
                    </tbody>
                </table>
            </div>
            {{ crud::shell_close() }}
        </section>
    </div>
</div>

<script type="application/json" id="seo-projects-json">[]</script>

{{ modal::modal(id="seoProjectModal", title='<span id="seo-project-modal-title">New project</span>', body_html='<div id="seo-project-form-fields"><div class="crud-empty-state">Loading…</div></div>', aria_labelledby="seo-project-modal-title") }}

{{ modal::modal(id="seoDomainModal", title='<span id="seo-domain-modal-title">Add domain</span>', body_html='<div id="seo-domain-form-fields"><div class="crud-empty-state">Loading…</div></div><p class="small text-muted">Works for any host — WordPress, static sites, Blocks, etc.</p>', aria_labelledby="seo-domain-modal-title") }}
{% endblock %}

{% block scripts %}
<script src="/plugins/seo-tool/assets/js/seo_common.js"></script>
<script src="/plugins/seo-tool/assets/js/admin_list.js"></script>
{% endblock %}