{# header.html.twig #}


<!-- Search offcanvas -->
<div class="offcanvas offcanvas-top" id="searchBox" data-bs-backdrop="static" tabindex="-1">
    <div class="offcanvas-header border-bottom p-0 py-lg-1">
        <!-- 
        1) On met method="GET" pour envoyer les paramètres dans l'URL.
        2) L'action pointe vers "/fr/produits/tous" ou la route Twig appropriée.
      -->
        <form class="container d-flex align-items-center" method="GET" action="/fr/produits/tous">
            <!-- 
          3) Nom de l'input : name="criteria[search][value]" 
          pour générer ?criteria[search][value]=pommier
        -->
            <input type="search" name="criteria[search][value]"
                class="form-control form-control-lg fs-lg border-0 rounded-0 py-3 ps-0"
                placeholder="Rechercher un produit" data-autofocus="offcanvas">

            <!-- Bouton qui ferme l'offcanvas (reset le champ) -->
            <button type="reset" class="btn-close fs-lg" data-bs-dismiss="offcanvas" aria-label="Close">
            </button>
        </form>
    </div>
</div>

<header class="navbar navbar-expand-lg navbar-sticky bg-body d-block z-fixed p-0 container rounded-pill shadow mt-3"
    data-sticky-navbar='{"offset": 500}'>

    {# ------------------------------------------------------------------ #}
    {# 1. Container = 3 zones flex : gauche / centre / droite #}
    {# ------------------------------------------------------------------ #}
    <div class="container d-flex align-items-center justify-content-between ">
        {# ----------- GAUCHE : logo + catégories ------------------ #}
        <div class="d-flex align-items-center gap-3">
            <a href="{{ path('sylius_shop_homepage') }}" class="navbar-brand fs-2 m-0 ps-4 p-2">
                <img src="{{ asset('build/app/shop/images/logo_ma_pepiniere.png','app.shop') }}" alt="Logo"
                    class="img-fluid" style="max-height:60px" />
            </a>

            {{ render(
            url('sylius_shop_partial_channel_menu_taxon_index',{
            template:'@SyliusShop/Taxon/_horizontalMenu.html.twig'
            })
            ) }}
        </div>

        {# ------------------ CENTRE : liens sup. ------------------- #}
        <ul class="navbar-nav flex-row gap-1 d-none d-lg-flex">
            <li class="nav-item">
                <a class="nav-link pe-3"
                    href="{{ path('sylius_shop_product_index', {'slug': 'tous/plante-d-exterieur'}) }}">Plantes
                    d'extérieur</a>
            </li>
            <li class="nav-item">
                <a class="nav-link pe-3"
                    href="{{ path('sylius_shop_product_index', {'slug': 'accessoires'}) }}">Accessoires de jardin</a>
            </li>

            <li class="nav-item">
                <a class="nav-link pe-3" href="{{ path('about',{'_locale':app.request.locale}) }}">À&nbsp;propos</a>
            </li>
            <li class="nav-item">
                <a class="nav-link pe-3" href="{{ path('article_index',{'_locale':app.request.locale}) }}">Blog</a>
            </li>
        </ul>

        {# ------------------ DROITE : search / cart / account -------- #}
        <div class="d-flex align-items-center">

            {# ——— Recherche ——— #}
            {# icône sur mobile ; champ complet sur desktop #}
            <button type="button"
                class="btn btn-icon btn-lg fs-xl btn-outline-secondary border-0 rounded-circle animate-shake d-lg-none"
                data-bs-toggle="offcanvas" data-bs-target="#searchBox" aria-label="Toggle search bar">
                <i class="ci-search animate-target"></i>
            </button>

            <div class="dropdown">
                <button type="button" class="btn btn-outline-secondary justify-content-start d-none d-lg-flex"
                    style="max-width: 240px" data-bs-toggle="dropdown" data-bs-auto-close="outside"
                    aria-label="Toggle search bar">
                    <i class="ci-search fs-base ms-n1 me-2"></i>
                    <span class="text-body-tertiary fw-normal">Recherche</span>
                </button>
                <div class="dropdown-menu dropdown-menu-end p-3"
                    style="--cz-dropdown-min-width: 20rem; --cz-dropdown-spacer: 1rem">

                    <!-- FORMULAIRE avec logique correcte -->
                    <form class="position-relative" method="GET" action="/fr/produits/tous">
                        <!-- Champ avec nom pour critère Sylius -->
                        <input type="search" name="criteria[search][value]" class="form-control rounded-pill"
                            placeholder="Rechercher un produit" data-autofocus="dropdown">

                        <!-- Bouton loupe pour soumettre -->
                        <button type="submit"
                            class="btn btn-icon btn-sm fs-lg btn-secondary rounded-circle position-absolute top-0 end-0 mt-1 me-1"
                            aria-label="Search">
                            <i class="ci-arrow-right"></i>
                        </button>
                    </form>

                </div>
            </div>


            {# ——— Compte ——— #}
            <a href="{{ path('sylius_shop_login') }}"
                class="btn btn-icon btn-lg fs-lg btn-outline-secondary border-0 rounded-circle animate-shake">
                <i class="ci-user animate-target"></i>
                <span class="visually-hidden">Account</span>
            </a>

            {# ——— Panier ——— #}
            {{ render(
            url('sylius_shop_partial_cart_summary',{
            template:'@SyliusShop/Cart/_widget.html.twig'
            })
            ) }}


        </div>
    </div>
</header>