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

{% block breadcrumbs %}{% endblock %}

{% block content %}
    <div class="grid gap-6 animate-fade-in">

        {# ── رأس الصفحة + صندوق البحث ── #}
        <section class="hero-glow p-6 md:p-8">
            <div class="relative z-10 flex flex-col gap-6">
                <div class="flex flex-col gap-3">
                    <p class="text-xs font-medium uppercase tracking-[0.2em] text-base-content/40">
                        <i class="fa-solid fa-circle text-[5px] text-primary align-middle me-1.5"></i>
                        {% trans "Deep Search" %}
                    </p>
                    <h1 class="text-3xl font-bold tracking-tight md:text-4xl">
                        {% trans "Global Search" %}
                    </h1>
                    <p class="text-sm text-base-content/50">
                        {% trans "Search across all apps and models from one place." %}
                    </p>
                </div>

                <form method="get" action="{% url 'admin:global-search' %}" class="flex flex-col gap-2 sm:flex-row">
                    <label class="dash-input-wrap flex-1">
                        <i class="fa-solid fa-magnifying-glass text-base-content/40"></i>
                        <input type="search" id="global-search-q" name="q"
                               value="{{ query }}"
                               placeholder="{% trans 'Search all models' %}…" autocomplete="off"/>
                        <kbd class="kbd-sm">Ctrl</kbd> + <kbd class="kbd-sm">K</kbd>
                    </label>
                    <button type="submit" class="btn btn-primary">
                        <i class="fa-solid fa-magnifying-glass"></i>
                        {% trans "Search" %}
                    </button>
                </form>

                {% if query %}
                    <div class="flex flex-wrap items-center gap-2 text-sm text-base-content/60">
                        <span class="badge badge-primary badge-outline">{{ total }} {% trans "results" %}</span>
                        <span class="badge badge-ghost">{{ app_count }} {% trans "apps" %}</span>
                        <span>{% trans "for" %} <strong class="text-primary">“{{ query }}”</strong></span>
                    </div>
                {% endif %}
            </div>
        </section>

        {# ── النتائج: لكل تطبيق بطاقة تفتح على قائمة سجلات قابلة للضغط ── #}
        {% if query %}
            {% for group in results %}
                <section class="glass-panel shadow-1 gs-app overflow-hidden">
                    <header class="gs-app-head">
                        <span class="gs-app-icon"><i class="fa-solid fa-folder-open"></i></span>
                        <h2 class="flex-1 text-sm font-bold">{{ group.app_name }}</h2>
                        <span class="gs-app-count">{{ group.models|length }} {% trans "models" %}</span>
                    </header>

                    <ul class="gs-list">
                        {% for m in group.models %}
                            <li class="gs-model">
                                <div class="gs-model-label">
                                    <i class="fa-solid fa-table-list"></i>
                                    <span>{{ m.name }}</span>
                                    <span class="gs-model-count">{{ m.count }}</span>
                                </div>
                                <ul class="gs-rows">
                                    {% for row in m.rows %}
                                        <li class="gs-item">
                                            {% if row.url %}
                                                <a href="{{ row.url }}" class="gs-link">
                                                    <span class="gs-item-text">{{ row.text }}</span>
                                                    <i class="fa-solid fa-chevron-left gs-item-arrow" aria-hidden="true"></i>
                                                </a>
                                            {% else %}
                                                <span class="gs-locked" title="{% trans 'No change permission' %}">
                                                    <span class="gs-item-text">{{ row.text }}</span>
                                                    <i class="fa-solid fa-lock gs-item-arrow" aria-hidden="true"></i>
                                                </span>
                                            {% endif %}
                                        </li>
                                    {% endfor %}
                                </ul>
                                {% if m.show_more %}
                                    <div class="gs-more">
                                        <a href="{{ m.changelist_url }}?q={{ query|urlencode }}">
                                            {% trans "View all results in the list" %} ({{ m.count }})
                                            <i class="fa-solid fa-arrow-left"></i>
                                        </a>
                                    </div>
                                {% endif %}
                            </li>
                        {% endfor %}
                    </ul>
                </section>
            {% empty %}
                <section class="stat-card p-8 text-center">
                    <div class="text-3xl mb-2"><i class="fa-solid fa-circle-question text-base-content/20"></i></div>
                    <p class="text-base-content/60">{% trans "No results found for" %} <strong>“{{ query }}”</strong></p>
                    <p class="text-sm text-base-content/40 mt-1">
                        {% trans "Try a different word, or check the spelling." %}
                    </p>
                </section>
            {% endfor %}
        {% else %}
            <section class="stat-card p-8 text-center">
                <div class="text-3xl mb-2"><i class="fa-solid fa-magnifying-glass text-base-content/20"></i></div>
                <p class="text-base-content/60">{% trans "Type a word to search across all apps and models." %}</p>
            </section>
        {% endif %}

        {% if query and results %}
            <p class="text-center text-xs text-base-content/40 pb-1">
                <i class="fa-solid fa-mouse-pointer me-1"></i>
                {% trans "Click any result to open it directly — records you cannot modify are shown locked." %}
            </p>
        {% endif %}
    </div>
{% endblock %}