ludikevent_crm/templates/revervation/catalogue.twig

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

{% block title %}{{ 'catalog.seo.title'|trans }}{% endblock %}
{% block description %}{{ 'catalog.seo.description'|trans }}{% endblock %}

{% block breadcrumb_json %}
    ,{
    "@type": "ListItem",
    "position": 1,
    "name": "{{ 'catalog.breadcrumb'|trans }}",
    "item": "{{ url('reservation_catalogue') }}"
    }
{% endblock %}

{% block body %}
    <utm-event event="view_catalogue"></utm-event>
    <div class="min-h-screen bg-gray-50/50 font-sans antialiased pb-20">

        {# --- HEADER --- #}
        <div class="max-w-7xl mx-auto pt-16 pb-8 px-4 text-center">
            <nav class="flex justify-center space-x-4 text-[10px] mb-8 uppercase tracking-[0.3em] font-black italic">
                <a href="{{ url('reservation') }}" class="text-slate-600 hover:text-[#fc0e50] transition">{{ 'nav.home'|trans }}</a>
                <span class="text-slate-500">/</span>
                <span class="text-amber-700 underline decoration-2 underline-offset-4">{{ 'catalog.breadcrumb'|trans }}</span>
            </nav>

            <h1 class="text-5xl md:text-7xl font-black text-slate-900 uppercase tracking-tighter italic leading-none mb-6">
                {{ 'catalog.header.main'|trans }} <span class="text-[#f39e36]">{{ 'catalog.header.highlight'|trans }}</span>
            </h1>
        </div>

        {# --- FILTRES --- #}
        <div class="sticky top-0 z-40 bg-gray-50/90 backdrop-blur-md border-b border-slate-200 mb-12">
            <div class="max-w-7xl mx-auto px-4 py-4">
                <div class="flex flex-wrap justify-center gap-2 md:gap-3">
                    <button data-filter="all" class="filter-btn px-5 py-2.5 rounded-xl font-black italic text-[9px] tracking-widest transition-all uppercase shadow-sm bg-slate-900 text-white border border-slate-900">
                        {{ 'catalog.filter.all'|trans }}
                    </button>

                    {% set categories_list = [
                        {'id': '2-7 ans', 'label': 'catalog.filter.cat_2_7'|trans, 'hover': 'hover:border-amber-500 hover:text-amber-600'},
                        {'id': '3-15 ans', 'label': 'catalog.filter.cat_3_15'|trans, 'hover': 'hover:border-blue-600 hover:text-blue-600'},
                        {'id': '3-99 ans', 'label': 'catalog.filter.cat_3_99'|trans, 'hover': 'hover:border-indigo-600 hover:text-indigo-600'},
                        {'id': 'barnums', 'label': 'catalog.filter.cat_barnums'|trans, 'hover': 'hover:border-slate-800 hover:text-slate-800'},
                        {'id': 'alimentaire', 'label': 'catalog.filter.cat_food'|trans, 'hover': 'hover:border-rose-500 hover:text-rose-600'},
                        {'id': 'options', 'label': 'catalog.filter.cat_options'|trans, 'hover': 'hover:border-emerald-500 hover:text-emerald-600'}
                    ] %}

                    {% for cat in categories_list %}
                        <button data-filter="{{ cat.id }}"
                                class="filter-btn px-5 py-2.5 rounded-xl font-black italic text-[9px] tracking-widest transition-all uppercase bg-white text-slate-600 border border-slate-200 {{ cat.hover }}">
                            {{ cat.label }}
                        </button>
                    {% endfor %}
                </div>
            </div>
        </div>

        {# --- GRILLE DE PRODUITS --- #}
        <div class="max-w-7xl mx-auto px-4">
            <div id="product-grid" class="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-x-8 gap-y-12">

                {% for product in products %}
                    <div class="product-item group transition-all duration-500" data-category="{{ product.category|lower }}">
                        <a href="{{ path('reservation_product_show', {id: product.slug}) }}" class="block">

                            <div class="relative overflow-hidden rounded-[1rem] bg-slate-100 aspect-square mb-6 shadow-sm group-hover:shadow-2xl transition-all duration-700">
                                {% if product.imageName %}
                                    <img src="{{ vich_uploader_asset(product,'imageFile') | imagine_filter('webp') }}" alt="{{ product.name }}" class="w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-1000">
                                {% else %}
                                    <img src="{{ asset('provider/images/favicon.png') | imagine_filter('webp') }}" alt="{{ product.name }}" class="w-full h-full object-cover opacity-50 transform group-hover:scale-110 transition-transform duration-1000">
                                {% endif %}

                                {# PRIX AVEC CLÉ #}
                                <div class="absolute top-5 right-5 bg-white/95 backdrop-blur-md px-4 py-2 rounded-2xl shadow-md border border-slate-100">
                                    <p class="text-slate-900 font-black text-sm italic leading-none">
                                        {{ 'catalog.product.from'|trans }} {{ product.priceDay|format_currency('EUR') }}
                                        {% if product.category == "barnums" %}
                                            / {{ 'catalog.product.weekend'|trans }}
                                        {% else %}
                                            / {{ 'catalog.product.day'|trans }}
                                        {% endif %}
                                    </p>
                                </div>
                            </div>

                            <div class="px-2">
                                <div class="flex items-center gap-3 mb-2">
                                    <span class="text-[10px] font-black text-blue-700 uppercase tracking-[0.2em] italic">
                                        {{ product.category }} {# Souvent laissé brut car vient de la base #}
                                    </span>
                                    <span class="w-4 h-[1px] bg-slate-300"></span>
                                    <span class="text-[9px] font-bold text-slate-500 uppercase tracking-widest">
                                        {{ 'catalog.product.ref'|trans }} {{ product.ref }}
                                    </span>
                                </div>

                                <h3 class="text-2xl font-black text-slate-900 uppercase tracking-tighter leading-[0.95] group-hover:text-[#f39e36] transition-colors line-clamp-2">
                                    {{ product.name }}
                                </h3>

                                <div class="mt-5 flex items-center gap-2 text-[11px] font-black uppercase tracking-[0.15em] text-slate-600 group-hover:text-[#f39e36] transition-colors">
                                    <span>{{ 'catalog.product.view_more'|trans }}</span>
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 transform group-hover:translate-x-2 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M17 8l4 4m0 0l-4-4m4-4H3" />
                                    </svg>
                                </div>
                            </div>
                        </a>
                    </div>
                {% endfor %}

                <div id="empty-msg" class="hidden col-span-full py-24 text-center bg-white rounded-[3.5rem] border-2 border-dashed border-slate-100">
                    <p class="text-slate-600 font-black italic uppercase tracking-widest text-xs">{{ 'catalog.empty'|trans }}</p>
                </div>

            </div>
        </div>
    </div>
{% endblock %}