{% extends 'base/base.html' %}

{% block title %}Admin · Appearance{% endblock %}

{% block content %}
<section class="w-full">
    <div class="flex items-start justify-between">
        <div>
            <h2 class="font-light text-ink text-2xl">Admin</h2>
            <p class="mt-2 text-sm text-ink-muted">Color themes, saved to the filesystem.</p>
        </div>
        <span class="text-xs text-ink-muted">{{ available_themes | length }} themes</span>
    </div>

    {% include 'admin/partials/nav.html' %}
</section>

<!-- Themes -->
<section class="w-full space-y-4">
    <div class="flex items-center gap-2">
        <ion-icon name="color-palette-outline" class="text-brand text-lg"></ion-icon>
        <h3 class="text-sm font-semibold text-ink">Themes</h3>
    </div>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
        {% for theme in available_themes %}
            <div class="rounded-xl border p-4 transition {% if theme.id == active_theme %}border-brand ring-2 ring-brand/20{% else %}border-line{% endif %}">
                <div class="flex items-center gap-2 mb-3">
                    <span class="h-6 w-6 rounded-full border border-line" style="background: {{ theme.light.canvas }};"></span>
                    <span class="h-6 w-6 rounded-full" style="background: {{ theme.light.brand }};"></span>
                    <span class="h-6 w-6 rounded-full" style="background: {{ theme.dark.canvas }};"></span>
                </div>

                <div class="flex items-center justify-between mb-3">
                    <span class="text-sm font-medium text-ink">{{ theme.name }}</span>
                    {% if theme.id == active_theme %}
                        <span class="text-[11px] font-semibold uppercase tracking-wide text-brand">Active</span>
                    {% elif theme.id in custom_ids %}
                        <span class="text-[11px] font-mono text-ink-muted">custom</span>
                    {% endif %}
                </div>

                <div class="flex items-center gap-2">
                    {% if theme.id != active_theme %}
                    <form method="POST" action="{{ url_for('admin_bp.update_theme') }}" class="flex-1">
                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
                        <input type="hidden" name="theme" value="{{ theme.id }}" />
                        <button type="submit" class="w-full py-1.5 px-3 rounded-lg border border-line text-xs text-ink hover:bg-line transition">
                            Activate
                        </button>
                    </form>
                    {% endif %}

                    {% if theme.id in custom_ids %}
                    <form method="POST" action="{{ url_for('admin_bp.delete_theme', name=theme.id) }}"
                          onsubmit="return confirm('Delete this theme?');">
                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
                        <button type="submit" class="py-1.5 px-3 rounded-lg border border-danger/40 text-xs text-danger hover:bg-danger/10 transition">
                            Delete
                        </button>
                    </form>
                    {% endif %}
                </div>
            </div>
        {% endfor %}
    </div>
</section>

<!-- Create custom theme -->
<section class="w-full space-y-4">
    <div class="flex items-center gap-2">
        <ion-icon name="add-circle-outline" class="text-brand text-lg"></ion-icon>
        <h3 class="text-sm font-semibold text-ink">Create theme</h3>
    </div>

    <form method="POST" action="{{ url_for('admin_bp.create_theme') }}" class="rounded-xl border border-line bg-surface p-6 space-y-6">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />

        <div class="space-y-2 max-w-sm">
            <label for="theme-name" class="text-[13px] font-medium text-ink">Theme name</label>
            <input
                id="theme-name"
                name="name"
                type="text"
                required
                placeholder="My brand"
                class="w-full px-3.5 py-2.5 text-sm rounded-lg bg-raised border border-line focus:border-ink placeholder:text-ink-muted/60 text-ink transition-colors"
            />
        </div>

        <div class="grid grid-cols-2 gap-6">
            <div class="space-y-2">
                <p class="text-xs font-semibold uppercase tracking-wide text-ink-muted">Light</p>
                {% for token in theme_tokens %}
                <label class="flex items-center justify-between gap-3 py-1">
                    <span class="text-xs font-mono text-ink-muted">{{ token }}</span>
                    <span class="flex items-center gap-2">
                        <span class="text-[11px] font-mono text-ink-muted">{{ active_palette.light[token] }}</span>
                        <input type="color" name="light_{{ token }}" value="{{ active_palette.light[token] }}"
                               class="h-8 w-10 rounded border border-line bg-raised cursor-pointer" />
                    </span>
                </label>
                {% endfor %}
            </div>

            <div class="space-y-2">
                <p class="text-xs font-semibold uppercase tracking-wide text-ink-muted">Dark</p>
                {% for token in theme_tokens %}
                <label class="flex items-center justify-between gap-3 py-1">
                    <span class="text-xs font-mono text-ink-muted">{{ token }}</span>
                    <span class="flex items-center gap-2">
                        <span class="text-[11px] font-mono text-ink-muted">{{ active_palette.dark[token] }}</span>
                        <input type="color" name="dark_{{ token }}" value="{{ active_palette.dark[token] }}"
                               class="h-8 w-10 rounded border border-line bg-raised cursor-pointer" />
                    </span>
                </label>
                {% endfor %}
            </div>
        </div>

        <div class="flex justify-end">
            <button type="submit"
                    class="px-4 py-2.5 rounded-lg bg-ink text-canvas text-sm font-medium hover:opacity-90 active:scale-[0.99] transition">
                Create &amp; activate theme
            </button>
        </div>
    </form>
</section>
{% endblock %}