{% extends "standalone/base.html" %}

{% block title %}Site Admin - {{ domain }}{% endblock %}

{% block body_class %}antialiased bg-gray-950 text-gray-200{% endblock %}

{% block body %}
<nav class="sticky top-0 z-50 bg-gray-900/95 backdrop-blur border-b border-gray-800">
    <div class="max-w-6xl mx-auto px-6 py-3 flex justify-between items-center flex-wrap gap-3">
        <div class="flex items-center gap-2.5">
            <span class="font-bold gradient-text">{{ brand_name }}</span>
            <span class="text-[0.6rem] font-bold uppercase tracking-wider px-2.5 py-1 rounded bg-gray-800 text-gray-500">Site Admin</span>
        </div>
        <div class="flex items-center gap-4 text-xs flex-wrap">
            <a href="#overview" class="text-gray-500 hover:text-white">Overview</a>
            <a href="#pages" class="text-gray-500 hover:text-white">Pages</a>
            <a href="#graphics" class="text-gray-500 hover:text-white">Graphics</a>
            <a href="#docs" class="text-gray-500 hover:text-white">Docs</a>
            <a href="#tools" class="text-gray-500 hover:text-white">Tools</a>
            <a href="#manifest" class="text-gray-500 hover:text-white">Files</a>
            <a href="index.html" class="font-semibold" style="color:var(--brand-primary);">&larr; View Site</a>
        </div>
    </div>
</nav>

<div class="max-w-6xl mx-auto px-6 py-8 space-y-8">
    <section id="overview">
        <div class="bg-gray-900 rounded-xl p-6 border border-gray-800">
            <div class="flex flex-col md:flex-row justify-between gap-6">
                <div>
                    <h1 class="text-xl font-bold mb-1">{{ brand_name }}</h1>
                    <p class="text-gray-500 text-sm">{{ domain }} &bull; {{ niche }}</p>
                    <p class="text-gray-600 text-xs mt-1">Generated: {{ gen_date }}</p>
                </div>
                <div class="flex gap-4">
                    {% for stat in [{'val': total_pages, 'label': 'Pages'}, {'val': total_images, 'label': 'Images'}, {'val': total_docs, 'label': 'Docs'}, {'val': total_files, 'label': 'Total'}] %}
                    <div class="text-center bg-gray-950 rounded-lg px-4 py-3 min-w-[70px]">
                        <div class="text-lg font-bold gradient-text">{{ stat.val }}</div>
                        <div class="text-[0.6rem] text-gray-600 uppercase">{{ stat.label }}</div>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </section>

    <section id="pages">
        <h2 class="text-lg font-bold mb-3">Pages Directory</h2>
        <div class="bg-gray-900 rounded-xl overflow-hidden border border-gray-800">
            <table class="w-full">
                <thead><tr class="bg-gray-950"><th class="text-left px-4 py-2.5 text-[0.65rem] font-bold uppercase text-gray-600 border-b border-gray-800">Path</th><th class="text-left px-4 py-2.5 text-[0.65rem] font-bold uppercase text-gray-600 border-b border-gray-800">Description</th></tr></thead>
                <tbody>
                    {% for path, title, icon in page_list %}
                    <tr class="hover:bg-gray-800/50"><td class="px-4 py-2.5 border-b border-gray-800 text-sm">{{ icon }} <a href="{{ path }}" style="color:var(--brand-primary);">{{ path }}</a></td><td class="px-4 py-2.5 border-b border-gray-800 text-sm text-gray-500">{{ title }}</td></tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </section>

    <section id="graphics">
        <h2 class="text-lg font-bold mb-3">Graphics &amp; Images</h2>
        {% if img_items %}
        <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3">
            {% for cat, fname, rel_path in img_items %}
            <div class="bg-gray-900 rounded-lg overflow-hidden border border-gray-800">
                <div class="h-28 flex items-center justify-center bg-gray-950 p-2"><img src="{{ rel_path }}" alt="{{ fname }}" class="max-w-full max-h-full object-contain" onerror="this.style.display='none';this.parentElement.innerHTML='<span class=\'text-2xl text-gray-700\'>&#128444;</span>';"></div>
                <div class="px-2.5 py-2"><div class="text-[0.6rem] text-gray-600">{{ cat }}</div><div class="text-xs text-gray-400 truncate">{{ fname }}</div></div>
            </div>
            {% endfor %}
        </div>
        {% else %}<p class="text-gray-600 text-sm">No images available.</p>{% endif %}
    </section>

    <section id="docs">
        <h2 class="text-lg font-bold mb-3">Business Documents</h2>
        <div class="bg-gray-900 rounded-xl p-5 border border-gray-800">
            {% if docs_by_tier %}
                {% for tier, doc_list in docs_by_tier.items() %}
                <div class="mb-4 last:mb-0">
                    <div class="flex items-center gap-2 mb-2"><span class="text-[0.65rem] font-bold uppercase px-2 py-0.5 rounded text-white" style="background:var(--brand-primary);">{{ tier }}</span><span class="text-gray-600 text-xs">{{ doc_list|length }} docs</span></div>
                    {% for dk, dv, tier_slug in doc_list %}
                    <a href="docs/{{ tier_slug }}/{{ dk }}.html" class="block bg-gray-950 rounded-lg px-4 py-2.5 mb-1.5 text-sm text-gray-400 border border-gray-800 hover:border-gray-600">{{ dv.get('title', dk) }}</a>
                    {% endfor %}
                </div>
                {% endfor %}
            {% else %}<p class="text-gray-600 text-sm">No business documents yet.</p>{% endif %}
        </div>
    </section>

    <section id="tools">
        <h2 class="text-lg font-bold mb-3">Interactive Tools</h2>
        <div class="bg-gray-900 rounded-xl p-5 border border-gray-800">
            {% if augments %}
                {% for aug in augments %}
                <div class="flex items-center justify-between bg-gray-950 rounded-lg px-4 py-3 mb-1.5 border border-gray-800">
                    <div><div class="font-medium text-sm">{{ aug.title }}</div><div class="text-xs text-gray-600">{{ aug.description[:80] }}{% if aug.description|length > 80 %}...{% endif %}</div></div>
                    <a href="tools/{{ aug.slug }}.html" class="text-xs font-bold" style="color:var(--brand-primary);">Open &rarr;</a>
                </div>
                {% endfor %}
            {% else %}<p class="text-gray-600 text-sm">No tools yet.</p>{% endif %}
        </div>
    </section>

    <section id="manifest">
        <h2 class="text-lg font-bold mb-3">File Manifest</h2>
        <details class="bg-gray-900 rounded-xl overflow-hidden border border-gray-800 group">
            <summary class="px-5 py-3 cursor-pointer text-sm font-medium text-gray-500 flex justify-between items-center">Show all {{ total_files }} files<svg class="w-4 h-4 group-open:rotate-180 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg></summary>
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead><tr class="bg-gray-950"><th class="text-left px-4 py-2 text-[0.6rem] uppercase text-gray-600 border-b border-gray-800">Path</th><th class="text-left px-4 py-2 text-[0.6rem] uppercase text-gray-600 border-b border-gray-800">Type</th><th class="text-right px-4 py-2 text-[0.6rem] uppercase text-gray-600 border-b border-gray-800">Size</th></tr></thead>
                    <tbody>
                        {% for fpath, ftype, size_str in manifest_rows %}
                        <tr><td class="px-4 py-1.5 border-b border-gray-800 text-xs font-mono text-gray-500">{{ fpath }}</td><td class="px-4 py-1.5 border-b border-gray-800 text-xs text-gray-600">{{ ftype }}</td><td class="px-4 py-1.5 border-b border-gray-800 text-xs text-gray-600 text-right">{{ size_str }}</td></tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </details>
    </section>
</div>

<footer class="border-t border-gray-800 py-8 px-6 text-center mt-4">
    <p class="text-gray-700 text-xs">Powered by <span class="gradient-text font-bold">Aura</span></p>
</footer>
{% endblock %}