{% load i18n static %}
{% if cl.search_fields %}
<style>
    /* Specific override for the search toolbar to escape Django's legacy CSS */
    #toolbar.custom-search-toolbar {
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
    }
    
    #toolbar.custom-search-toolbar #searchbar.apple-search-input {
        /* Reset Django's height and padding from changelists.css */
        height: 3.5rem !important; 
        padding-left: 3.5rem !important;
        padding-right: 1rem !important;
        border: 2px solid #f1f5f9 !important;
        background-color: #f8fafc !important;
        border-radius: 1rem !important;
        font-size: 0.875rem !important;
        font-weight: 600 !important;
        width: 100% !important;
        max-width: 48rem !important;
        transition: all 0.2s ease !important;
        color: #1e293b !important;
        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
    }

    [data-theme="dark"] #toolbar.custom-search-toolbar #searchbar.apple-search-input {
        background-color: rgba(15, 23, 42, 0.5) !important;
        border-color: #1e293b !important;
        color: white !important;
    }

    #toolbar.custom-search-toolbar #searchbar.apple-search-input:focus {
        background-color: white !important;
        border-color: #3b82f6 !important;
        box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1) !important;
        outline: none !important;
    }

    [data-theme="dark"] #toolbar.custom-search-toolbar #searchbar.apple-search-input:focus {
        background-color: #0f172a !important;
    }

    #toolbar.custom-search-toolbar .search-btn {
        background: #2563eb !important;
        color: white !important;
        height: 3.5rem !important;
        padding: 0 2rem !important;
        border-radius: 1rem !important;
        font-weight: 800 !important;
        font-size: 0.875rem !important;
        border: none !important;
        box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.2) !important;
        cursor: pointer !important;
        transition: all 0.2s !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
    }

    #toolbar.custom-search-toolbar .search-btn:hover {
        background: #1d4ed8 !important;
        box-shadow: 0 20px 25px -5px rgba(37, 99, 235, 0.3) !important;
    }

    #toolbar.custom-search-toolbar .search-btn:active {
        transform: scale(0.98) !important;
    }

    #toolbar.custom-search-toolbar .warning-outlined-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.5rem !important;
        height: 3.5rem !important;
        padding: 0 1.5rem !important;
        border-radius: 1rem !important;
        font-weight: 800 !important;
        font-size: 0.875rem !important;
        background: transparent !important;
        border: 2px solid #f59e0b !important; /* amber-500 */
        color: #d97706 !important; /* amber-600 */
        cursor: pointer !important;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
        text-decoration: none !important;
    }

    [data-theme="dark"] #toolbar.custom-search-toolbar .warning-outlined-btn {
        color: #fbbf24 !important; /* amber-400 */
        border-color: rgba(245, 158, 11, 0.4) !important;
    }

    #toolbar.custom-search-toolbar .warning-outlined-btn:hover {
        background: #fffbeb !important; /* amber-50 */
        border-color: #d97706 !important;
        box-shadow: 0 10px 15px -3px rgba(245, 158, 11, 0.1) !important;
    }

    [data-theme="dark"] #toolbar.custom-search-toolbar .warning-outlined-btn:hover {
        background: rgba(245, 158, 11, 0.1) !important;
        border-color: #fbbf24 !important;
    }

    #toolbar.custom-search-toolbar .warning-outlined-btn:active {
        transform: scale(0.96) !important;
    }
</style>

<div id="toolbar" class="custom-search-toolbar">
    <form id="changelist-search" method="get" role="search" class="flex flex-wrap items-center gap-4">
        <div class="relative flex-1 max-w-2xl group">
            <div class="absolute inset-y-0 left-5 flex items-center pointer-events-none text-slate-400 group-focus-within:text-blue-500 transition-colors z-10">
                <i class="pi pi-search text-[16px]"></i>
            </div>
            <input type="text" name="{{ search_var }}" value="{{ cl.query }}" id="searchbar" class="apple-search-input"
                   placeholder="{% blocktranslate with name=cl.opts.verbose_name_plural %}Cerca tra {{ name }}...{% endblocktranslate %}"
                   {% if cl.search_help_text %} aria-describedby="searchbar_helptext"{% endif %}>
        </div>
        
        <button type="submit" class="search-btn">
            <i class="pi pi-search text-[14px]"></i>
            {% translate 'Search' %}
        </button>

        <a href="?{% if cl.is_popup %}{{ is_popup_var }}=1{% endif %}" class="warning-outlined-btn apple-tooltip-trigger" data-apple-tooltip="{% translate 'Cancella filtri e ricerca' %}">
            <i class="pi pi-undo text-[14px]"></i>
            {% translate 'Resetta' %}
        </a>

        {% if show_result_count %}
            <div class="hidden md:flex items-center gap-3 text-[11px] font-bold text-slate-500 bg-white dark:bg-slate-900 px-5 py-3.5 rounded-2xl border border-slate-100 dark:border-slate-800 shadow-sm transition-all hover:border-slate-200">
                <div class="flex items-center gap-2">
                    <span class="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse"></span>
                    {% blocktranslate count counter=cl.result_count %}{{ counter }} trovato{% plural %}{{ counter }} trovati{% endblocktranslate %}
                </div>
                
                <a href="?{% if cl.is_popup %}{{ is_popup_var }}=1{% if cl.add_facets %}&{% endif %}{% endif %}{% if cl.add_facets %}{{ is_facets_var }}{% endif %}" class="ml-2 pl-4 border-l border-slate-100 dark:border-slate-800 text-blue-500 hover:text-blue-600 flex items-center gap-2 font-black uppercase tracking-tighter">
                    {% if cl.show_full_result_count %}
                        <i class="pi pi-users text-[12px]"></i>
                        {% blocktranslate with full_result_count=cl.full_result_count %}{{ full_result_count }} totali{% endblocktranslate %}
                    {% else %}
                        <i class="pi pi-list text-[12px]"></i>
                        {% translate "Show all" %}
                    {% endif %}
                </a>
            </div>
        {% endif %}
        
        {% for pair in cl.params.items %}
            {% if pair.0 != search_var %}<input type="hidden" name="{{ pair.0 }}" value="{{ pair.1 }}">{% endif %}
        {% endfor %}
    </form>
    
    {% if cl.search_help_text %}
        <div class="mt-4 ml-5 text-[10px] font-black text-slate-400 uppercase tracking-[0.2em] flex items-center gap-2" id="searchbar_helptext">
            <i class="pi pi-question-circle"></i>
            {{ cl.search_help_text }}
        </div>
    {% endif %}
</div>
{% endif %}