{% extends 'dashboard/base.twig' %}

{% block title %}Recherche : {{ query }}{% endblock %}

{% block body %}
    <div class="page-transition">
        <div class="flex flex-col md:flex-row md:items-center justify-between mb-10 gap-6">
            <div>
                <p class="text-blue-600 font-bold text-[10px] uppercase tracking-[0.4em] mb-2">Recherche Multicritères</p>
                <h1 class="text-3xl font-black text-slate-900 dark:text-white uppercase tracking-tighter">
                    Résultats pour <span class="text-blue-600">"{{ query }}"</span>
                </h1>
            </div>
            <div class="bg-white dark:bg-slate-800 px-6 py-3 rounded-2xl border border-slate-200 dark:border-slate-700 shadow-sm">
                <span class="text-xs font-bold text-slate-500 uppercase tracking-widest">
                    <span class="text-blue-600 text-lg mr-1">{{ results|length }}</span> correspondance(s)
                </span>
            </div>
        </div>

        {# Formulaire de mise à jour #}
        <div class="mb-12">
            <form action="{{ path('app_crm_search') }}" method="GET" class="relative max-w-2xl">
                <input type="text" name="q" value="{{ query }}" placeholder="Rechercher à nouveau..."
                       class="w-full pl-6 pr-40 py-4 bg-white dark:bg-slate-900 border-2 border-slate-100 dark:border-slate-800 focus:border-blue-600 focus:ring-0 rounded-2xl text-slate-900 dark:text-white font-medium shadow-xl shadow-slate-200/40 dark:shadow-none transition-all outline-none">
                <button type="submit" class="absolute right-2 top-2 bottom-2 px-6 bg-slate-900 dark:bg-blue-600 text-white text-[10px] font-bold uppercase tracking-widest rounded-xl hover:bg-blue-600 transition-all">
                    Actualiser
                </button>
            </form>
        </div>

        {% if results is not empty %}
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                {% for item in results %}
                    <div class="bg-white dark:bg-[#1e293b] p-6 rounded-[2.5rem] border border-slate-200 dark:border-slate-800 shadow-[0_10px_40px_rgba(0,0,0,0.02)] hover:shadow-xl hover:translate-y-[-4px] transition-all group">
                        <div class="flex items-center space-x-4 mb-6">
                            <div class="w-14 h-14 bg-slate-100 dark:bg-slate-800 rounded-2xl flex items-center justify-center text-slate-900 dark:text-white font-black text-xl border border-slate-200 dark:border-slate-700 uppercase">
                                {{ item.initials }}
                            </div>
                            <div class="overflow-hidden">
                                <span class="px-2 py-0.5 bg-indigo-50 dark:bg-indigo-900/30 text-[8px] font-bold text-indigo-600 uppercase rounded-md border border-indigo-100 dark:border-indigo-800">
                                    {{ item.type }}
                                </span>
                                <h3 class="font-bold text-slate-900 dark:text-white text-lg leading-none truncate mt-2">{{ item.title }}</h3>
                                <p class="text-xs text-slate-400 mt-1 truncate">{{ item.subtitle }}</p>
                            </div>
                        </div>

                        <div class="flex items-center justify-between pt-5 border-t border-slate-50 dark:border-slate-800">
                            <div class="text-[10px] font-mono text-slate-400">#{{ item.id }}</div>
                            <a href="{{ item.link }}" class="flex items-center space-x-2 px-4 py-2 bg-slate-900 dark:bg-slate-700 text-white rounded-xl text-[10px] font-bold uppercase tracking-widest hover:bg-blue-600 transition-colors">
                                <span>Accéder</span>
                            </a>
                        </div>
                    </div>
                {% endfor %}
            </div>
        {% else %}
            <div class="p-20 bg-white dark:bg-slate-900 rounded-[3rem] text-center border-2 border-dashed border-slate-100 dark:border-slate-800">
                <p class="text-slate-400 font-medium italic">Aucune donnée trouvée pour cette recherche.</p>
            </div>
        {% endif %}
    </div>
{% endblock %}