{# ========================================
   CATALOGUE
   Liste filtrée des bateaux — filtres (port, date, formule, type, capacité, budget, options) + grille de résultats
   ======================================== #}
{% extends 'base.twig' %}

{% block title %}Catalogue - Nautiloc{% endblock %}

{% block content %}
<section class="mb-6 flex flex-col gap-3 md:flex-row md:items-end md:justify-between">
    <div>
        <h1 class="text-3xl font-black uppercase md:text-4xl">Catalogue des bateaux</h1>
        <p class="mt-1 text-sm font-semibold text-abyss-800">Cap sur les bateaux disponibles selon vos critères.</p>
    </div>
    <div class="rounded-lg border-2 border-abyss-900 bg-white px-3 py-2 text-xs font-black uppercase shadow-[3px_3px_0_0_#041824]">
        {{ boats|length }} résultat(s)
    </div>
</section>

<section class="grid gap-6 lg:grid-cols-[310px_1fr]">
    {# ======== Panneau filtres ======== #}
    <aside class="h-fit rounded-2xl border-4 border-abyss-900 bg-white p-5 shadow-[6px_6px_0_0_#041824]">
        <h2 class="mb-4 text-lg font-black uppercase">Filtres</h2>
        <form method="get" action="/catalogue" class="space-y-4">
            <div>
                <label class="mb-1 block text-xs font-black uppercase tracking-wider">Port</label>
                <select name="port" class="w-full rounded-lg border-2 border-abyss-900 bg-sand-100 px-3 py-2 text-sm">
                    <option value="">Tous</option>
                    {% for port in ports %}
                        <option value="{{ port.id_port }}" {% if filters.port is defined and filters.port == port.id_port %}selected{% endif %}>{{ port.nom }}</option>
                    {% endfor %}
                </select>
            </div>
            <div>
                <label class="mb-1 block text-xs font-black uppercase tracking-wider">Date (optionnel)</label>
                <input type="date" name="date_depart" value="{{ filters.date_depart|default('') }}" class="w-full rounded-lg border-2 border-abyss-900 bg-sand-100 px-3 py-2 text-sm">
            </div>
            <div>
                <label class="mb-1 block text-xs font-black uppercase tracking-wider">Formule</label>
                <select name="formule" class="w-full rounded-lg border-2 border-abyss-900 bg-sand-100 px-3 py-2 text-sm">
                    <option value="">Toutes</option>
                    {% for formule in formules %}
                        <option value="{{ formule.id_formule }}" {% if filters.formule is defined and filters.formule == formule.id_formule %}selected{% endif %}>{{ formule.libelle }}</option>
                    {% endfor %}
                </select>
            </div>
            <div>
                <label class="mb-1 block text-xs font-black uppercase tracking-wider">Type de bateau</label>
                <select name="type" class="w-full rounded-lg border-2 border-abyss-900 bg-sand-100 px-3 py-2 text-sm">
                    <option value="">Tous</option>
                    {% for type in types_bateaux|default([]) %}
                        <option value="{{ type.id_type_bateau }}" {% if filters.type is defined and filters.type == type.id_type_bateau %}selected{% endif %}>{{ type.libelle }}</option>
                    {% endfor %}
                </select>
            </div>
            <div>
                <label class="mb-1 block text-xs font-black uppercase tracking-wider">Capacité min.</label>
                <div class="mt-2 grid grid-cols-3 gap-2 text-[11px] font-black uppercase">
                    {% for cap in [2, 4, 8] %}
                        <a href="/catalogue?capacite={{ cap }}" class="rounded border-2 border-abyss-900 bg-white px-2 py-1 text-center shadow-[2px_2px_0_0_#041824]">{{ cap }}+</a>
                    {% endfor %}
                </div>
                <input type="number" name="capacite" min="1" value="{{ filters.capacite|default('') }}" placeholder="Valeur personnalisée" class="mt-2 w-full rounded-lg border-2 border-abyss-900 bg-sand-100 px-3 py-2 text-sm">
            </div>
            <div>
                <label class="mb-1 block text-xs font-black uppercase tracking-wider">Budget max (€)</label>
                <div class="mt-2 grid grid-cols-3 gap-2 text-[11px] font-black uppercase">
                    {% for budget in [150, 300, 500] %}
                        <a href="/catalogue?budget={{ budget }}" class="rounded border-2 border-abyss-900 bg-white px-2 py-1 text-center shadow-[2px_2px_0_0_#041824]">≤ {{ budget }}€</a>
                    {% endfor %}
                </div>
                <input type="number" step="1" name="budget" min="0" value="{{ filters.budget|default('') }}" placeholder="Valeur personnalisée" class="mt-2 w-full rounded-lg border-2 border-abyss-900 bg-sand-100 px-3 py-2 text-sm">
            </div>
            <div>
                <label class="mb-1 block text-xs font-black uppercase tracking-wider">Tri</label>
                <select name="tri" class="w-full rounded-lg border-2 border-abyss-900 bg-sand-100 px-3 py-2 text-sm">
                    <option value="popularite" {% if filters.tri|default('popularite') == 'popularite' %}selected{% endif %}>Popularité</option>
                    <option value="type" {% if filters.tri|default('') == 'type' %}selected{% endif %}>Type de bateau</option>
                    <option value="prix_asc" {% if filters.tri|default('') == 'prix_asc' %}selected{% endif %}>Prix croissant</option>
                    <option value="prix_desc" {% if filters.tri|default('') == 'prix_desc' %}selected{% endif %}>Prix décroissant</option>
                    <option value="capacite" {% if filters.tri|default('') == 'capacite' %}selected{% endif %}>Capacité</option>
                </select>
            </div>
            <label class="flex items-center justify-between rounded-lg border-2 border-abyss-900 bg-sand-100 px-3 py-2 text-sm font-semibold"><span>Sans permis</span><input class="h-5 w-5 accent-coral-500" type="checkbox" name="sans_permis" value="1" {% if filters.sans_permis is defined %}checked{% endif %}></label>
            <label class="flex items-center justify-between rounded-lg border-2 border-abyss-900 bg-sand-100 px-3 py-2 text-sm font-semibold"><span>Familial</span><input class="h-5 w-5 accent-coral-500" type="checkbox" name="familial" value="1" {% if filters.familial is defined %}checked{% endif %}></label>
            <label class="flex items-center justify-between rounded-lg border-2 border-abyss-900 bg-sand-100 px-3 py-2 text-sm font-semibold"><span>Skipper dispo</span><input class="h-5 w-5 accent-coral-500" type="checkbox" name="skipper" value="1" {% if filters.skipper is defined %}checked{% endif %}></label>
            <div class="grid grid-cols-2 gap-2">
                <button type="submit" class="rounded-lg border-2 border-abyss-900 bg-coral-500 px-4 py-2 text-sm font-black uppercase text-white shadow-[4px_4px_0_0_#041824]">Filtrer</button>
                <a href="/catalogue" class="rounded-lg border-2 border-abyss-900 bg-white px-4 py-2 text-center text-sm font-black uppercase shadow-[4px_4px_0_0_#041824]">Réinitialiser</a>
            </div>
        </form>
    </aside>

    {# ======== Grille de résultats ======== #}
    <div>
        {% if boats is empty %}
            <div class="rounded-2xl border-4 border-abyss-900 bg-white p-8 text-center shadow-[6px_6px_0_0_#041824]">
                <p class="text-xl font-black uppercase">Aucun bateau trouvé</p>
                <p class="mt-2 text-sm font-semibold">Changez un filtre et remettez le cap.</p>
            </div>
        {% else %}
            <div class="grid gap-5 md:grid-cols-2 xl:grid-cols-3">
                {% for boat in boats %}
                    <article class="flex h-full flex-col overflow-hidden rounded-2xl border-4 border-abyss-900 bg-white shadow-[6px_6px_0_0_#041824]">
                        <img src="{{ boat.photo_url }}" alt="{{ boat.nom }}" class="h-44 w-full object-cover">
                        <div class="flex flex-1 flex-col gap-2 p-4">
                            <div class="flex items-center justify-between gap-2">
                                <h3 class="text-lg font-black">{{ boat.nom }}</h3>
                                {% if filters.date_depart|default('') == '' or filters.formule|default('') == '' %}
                                    <span class="rounded-full border-2 border-abyss-900 bg-slate-200 px-2 py-0.5 text-[10px] font-black uppercase">Disponibilité à vérifier</span>
                                {% elseif boat.availability is same as(true) %}
                                    <span class="rounded-full border-2 border-abyss-900 bg-emerald-200 px-2 py-0.5 text-[10px] font-black uppercase">Disponible</span>
                                {% else %}
                                    <span class="rounded-full border-2 border-abyss-900 bg-rose-200 px-2 py-0.5 text-[10px] font-black uppercase">Complet</span>
                                {% endif %}
                            </div>
                            <p class="text-xs font-semibold uppercase tracking-wider text-abyss-800">{{ boat.type_libelle }} · {{ boat.port_nom }}</p>
                            <p class="line-clamp-2 text-sm font-medium">{{ boat.slogan }}</p>
                            <div class="mt-auto flex items-center justify-between border-t-2 border-dashed border-abyss-900 pt-2">
                                <span class="text-sm font-black">Dès {{ boat.prix_min|default(0)|number_format(0, ',', ' ') }}€</span>
                                <a href="/bateaux/{{ boat.id_bateau }}" class="rounded-md border-2 border-abyss-900 bg-sand-100 px-2 py-1 text-xs font-black uppercase shadow-[2px_2px_0_0_#041824]">Voir la fiche</a>
                            </div>
                        </div>
                    </article>
                {% endfor %}
            </div>
        {% endif %}
    </div>
</section>
{% endblock %}