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

{% block title %}{{ site_title }} | Models{% endblock %}

{% block content %}
<div class="space-y-8">
    <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
        <h1 class="text-3xl font-black tracking-tight text-slate-900 dark:text-white">Site administration</h1>
        <div class="w-full md:w-96">
            <div class="admin-model-search-shell relative flex items-center w-full bg-white dark:bg-slate-900">
                <span class="models-search-icon-shell">
                    <span class="material-symbols-outlined text-slate-400">search</span>
                </span>
                <input id="modelsSearch" class="admin-themed-input w-full h-full bg-transparent border-none focus:ring-0 text-sm px-3 text-slate-900 dark:text-white placeholder:text-slate-400" placeholder="Search model or category..." type="text"/>
            </div>
        </div>
    </div>

    {% if model_categories %}
        <div class="space-y-6">
            {% for category in model_categories %}
            <section class="rounded-xl border border-slate-200 dark:border-slate-700 admin-border-soft bg-surface-light dark:bg-surface-dark overflow-hidden" data-category="{{ category.name }}">
                <div class="px-5 py-4 border-b border-slate-200 dark:border-slate-700 admin-border-soft-divider bg-slate-50 dark:bg-slate-800/50 flex items-center justify-between">
                    <h2 class="text-lg font-bold text-slate-900 dark:text-white">{{ category.name }}</h2>
                    <span class="text-xs text-slate-500 dark:text-slate-400">{{ category.models|length }} models</span>
                </div>
                <div class="divide-y divide-slate-100 dark:divide-slate-800/60">
                    {% for model in category.models %}
                    <div class="flex items-center justify-between gap-3 px-5 py-3 hover:bg-slate-50 dark:hover:bg-slate-800/30 transition-colors group" data-model-name="{{ model.display_name|lower }}">
                        <a href="/admin/{{ model.route_id }}" class="text-sm font-medium text-primary hover:underline flex-1">
                            {{ model.display_name }}
                        </a>
                        <div class="flex items-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
                            {% if model.model_admin.allow_add %}
                            <a href="/admin/{{ model.route_id }}" class="px-3 py-1.5 text-xs font-medium rounded bg-primary/10 text-primary hover:bg-primary hover:text-white transition-colors">
                                Add
                            </a>
                            {% endif %}
                            <a href="/admin/{{ model.route_id }}" class="px-3 py-1.5 text-xs font-medium rounded bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors">
                                Change
                            </a>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </section>
            {% endfor %}
        </div>
    {% else %}
        <div class="rounded-xl border border-dashed border-slate-300 dark:border-slate-700 bg-slate-50 dark:bg-slate-900/40 p-6 text-sm text-slate-500 dark:text-slate-400">
            No models are available for your current permissions.
        </div>
    {% endif %}
</div>
{% endblock %}

{% block extra_js %}
{{ super() }}
<script>
const modelsSearch = document.getElementById("modelsSearch");
if (modelsSearch) {
    modelsSearch.addEventListener("input", function (event) {
        const query = (event.target.value || "").toLowerCase().trim();
        const categories = document.querySelectorAll("[data-category]");
        categories.forEach(function (category) {
            const categoryName = (category.getAttribute("data-category") || "").toLowerCase();
            let visibleRows = 0;
            category.querySelectorAll("[data-model-name]").forEach(function (row) {
                const modelName = row.getAttribute("data-model-name") || "";
                const matches = !query || modelName.includes(query) || categoryName.includes(query);
                row.style.display = matches ? "" : "none";
                if (matches) {
                    visibleRows += 1;
                }
            });
            category.style.display = visibleRows > 0 ? "" : "none";
        });
    });
}
</script>
{% endblock %}