{% extends "base.html" %}
{% block content %}
<div class="container mx-auto p-4 md:p-8 lg:p-12 relative max-w-7xl">
    <div class="space-y-8 pb-12">
        <!-- Header Area -->
        <div class="flex flex-col md:flex-row md:items-end justify-between gap-6">
            <div>
                <h1 class="text-2xl md:text-3xl font-bold text-white tracking-tight flex flex-wrap items-center gap-3">
                    Package Search
                    {% if query %}
                    <span
                        class="px-2 py-0.5 rounded bg-sky-500/10 text-sky-400 text-[10px] font-bold uppercase tracking-widest border border-sky-500/20 whitespace-nowrap">"{{
                        query }}"</span>
                    {% else %}
                    <span
                        class="px-2 py-0.5 rounded bg-emerald-500/10 text-emerald-400 text-[10px] font-bold uppercase tracking-widest border border-emerald-500/20 whitespace-nowrap">Recently
                        Updated</span>
                    {% endif %}
                </h1>
                <p class="text-slate-500 text-sm mt-1 font-medium">Browse and search through the local mirror index</p>
            </div>
            <div class="text-right">
                <div class="text-white text-xl font-mono font-bold">{{ "{:,}".format(total_count) }}</div>
                <div class="text-[9px] text-slate-500 font-bold uppercase tracking-widest">Matching Packages</div>
            </div>
        </div>

        <!-- Search Bar (Page Specific) -->
        <div class="glass-panel p-6 rounded-3xl relative overflow-hidden group">
            <form action="/search" method="GET" class="flex flex-col md:flex-row gap-4">
                <div class="flex-grow relative">
                    <input type="text" name="q" value="{{ query }}" placeholder="Search by package name..."
                        class="w-full bg-slate-900 border border-white/5 rounded-2xl py-4 pl-12 pr-4 text-sm text-white focus:outline-none focus:ring-1 focus:ring-sky-500/50 transition-all">
                    <svg class="w-5 h-5 text-slate-500 absolute left-4 top-4" fill="none" stroke="currentColor"
                        viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                    </svg>
                </div>
                <button type="submit"
                    class="px-8 py-4 bg-sky-600 hover:bg-sky-500 text-white text-sm font-bold rounded-2xl transition-all shadow-lg shadow-sky-900/20 active:scale-95">
                    Search Engine
                </button>
            </form>
        </div>

        <!-- Results Table -->
        <div class="glass-panel rounded-3xl overflow-hidden">
            <div class="overflow-x-auto">
                <table class="w-full text-left">
                    <thead>
                        <tr class="bg-white/[0.02] border-b border-white/5">
                            <th class="px-6 py-4 text-[10px] text-slate-500 font-bold uppercase tracking-widest">Package
                                Name</th>
                            <th class="px-6 py-4 text-[10px] text-slate-500 font-bold uppercase tracking-widest">Version
                            </th>
                            <th class="px-6 py-4 text-[10px] text-slate-500 font-bold uppercase tracking-widest">
                                Repository</th>
                            <th class="px-6 py-4 text-[10px] text-slate-500 font-bold uppercase tracking-widest">Size
                            </th>
                            <th class="px-6 py-4 text-[10px] text-slate-500 font-bold uppercase tracking-widest">Last
                                Updated</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-white/5">
                        {% for pkg in results %}
                        <tr class="hover:bg-white/[0.01] transition-colors group">
                            <td class="px-6 py-4">
                                <a href="https://archlinux.org/packages/{{ pkg.repo }}/x86_64/{{ pkg.name }}/"
                                    target="_blank"
                                    class="text-white font-bold text-sm tracking-tight hover:text-sky-400 border-b border-transparent hover:border-sky-500/30 transition-all flex items-center gap-2">
                                    {{ pkg.name }}
                                    <svg class="w-3 h-3 opacity-0 group-hover:opacity-100 transition-opacity"
                                        fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
                                    </svg>
                                </a>
                            </td>
                            <td class="px-6 py-4">
                                <div class="text-slate-400 font-mono text-xs">{{ pkg.version }}</div>
                            </td>
                            <td class="px-6 py-4">
                                <span
                                    class="px-2 py-0.5 rounded text-[9px] font-bold uppercase tracking-widest
                                    {% if pkg.repo == 'core' %}bg-sky-500/10 text-sky-400 border border-sky-500/20
                                    {% elif pkg.repo == 'extra' %}bg-indigo-500/10 text-indigo-400 border border-indigo-500/20
                                    {% else %}bg-emerald-500/10 text-emerald-400 border border-emerald-500/20{% endif %}">
                                    {{ pkg.repo }}
                                </span>
                            </td>
                            <td class="px-6 py-4">
                                <div class="text-slate-500 font-mono text-xs">{{ pkg.size | human_size }}</div>
                            </td>
                            <td class="px-6 py-4">
                                <div class="text-slate-500 text-xs font-medium">{{ pkg.mtime | human_time }}</div>
                            </td>
                        </tr>
                        {% endfor %}
                        {% if not results %}
                        <tr>
                            <td colspan="5" class="px-6 py-20 text-center">
                                <div class="flex flex-col items-center gap-4">
                                    <div class="w-12 h-12 rounded-2xl bg-slate-900 flex items-center justify-center">
                                        <svg class="w-6 h-6 text-slate-700" fill="none" stroke="currentColor"
                                            viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                                        </svg>
                                    </div>
                                    <div>
                                        <div class="text-white font-bold text-sm">No packages found</div>
                                        <p class="text-slate-500 text-xs mt-1">Try adjusting your search criteria</p>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        {% endif %}
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Pagination -->
        {% if total_pages > 1 %}
        <div class="flex items-center justify-center gap-2">
            {% if page > 1 %}
            <a href="/search?q={{ query }}&p={{ page - 1 }}"
                class="p-2 rounded-xl bg-white/5 border border-white/5 text-slate-400 hover:text-white hover:bg-white/10 transition-all">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
                </svg>
            </a>
            {% endif %}

            <div class="px-6 py-2 rounded-xl bg-white/5 border border-white/5 text-xs text-slate-400 font-mono">
                Page <span class="text-white font-bold">{{ page }}</span> of <span class="text-white font-bold">{{
                    total_pages }}</span>
            </div>

            {% if page < total_pages %} <a href="/search?q={{ query }}&p={{ page + 1 }}"
                class="p-2 rounded-xl bg-white/5 border border-white/5 text-slate-400 hover:text-white hover:bg-white/10 transition-all">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                </svg>
                </a>
                {% endif %}
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}