{#
 # ============================================================================
 # MOLECULE: BREADCRUMB
 # ============================================================================
 #
 # Fil d'ariane pour la navigation hiérarchique.
 # Affiche le chemin de navigation avec liens cliquables.
 #
 # ============================================================================
 # COMPOSITION (Atomes utilisés)
 # ============================================================================
 #
 # - _atoms/icon/icon.html.twig (séparateur, home)
 # - _atoms/link/link.html.twig
 #
 # ============================================================================
 # PARAMÈTRES
 # ============================================================================
 #
 # | Paramètre  | Type    | Défaut    | Description                              |
 # |------------|---------|-----------|------------------------------------------|
 # | items      | array   | []        | Liste des éléments [{label, href}]       |
 # | showHome   | bool    | true      | Afficher l'icône Home au début           |
 # | homeHref   | string  | '/'       | URL du lien Home                         |
 # | separator  | string  | 'chevron' | Séparateur: chevron, slash, arrow        |
 # | size       | string  | 'md'      | Taille: sm, md, lg                       |
 # | class      | string  | ''        | Classes additionnelles                   |
 #
 # ============================================================================
 # EXEMPLES D'UTILISATION
 # ============================================================================
 #
 # Breadcrumb simple:
 # {% include '_molecules/breadcrumb/breadcrumb.html.twig' with {
 #     items: [
 #         { label: 'Dashboard', href: '/dashboard' },
 #         { label: 'Utilisateurs', href: '/users' },
 #         { label: 'Jean Dupont' }
 #     ]
 # } %}
 #
 # Sans icône Home:
 # {% include '_molecules/breadcrumb/breadcrumb.html.twig' with {
 #     items: [
 #         { label: 'Catégorie', href: '/cat' },
 #         { label: 'Sous-catégorie' }
 #     ],
 #     showHome: false
 # } %}
 #
 # ============================================================================
 #}

{# ============================================================================
   CONFIGURATION DES VALEURS PAR DÉFAUT
   ============================================================================ #}

{% set items = items ?? [] %}
{% set showHome = showHome ?? true %}
{% set homeHref = homeHref ?? '/' %}
{% set separator = separator ?? 'chevron' %}
{% set size = size ?? 'md' %}
{% set class = class ?? '' %}

{# ============================================================================
   CLASSES TAILWIND
   ============================================================================ #}

{% set sizeClasses = {
    'sm': 'text-xs',
    'md': 'text-sm',
    'lg': 'text-base'
} %}

{% set iconSizes = {
    'sm': 'xs',
    'md': 'sm',
    'lg': 'md'
} %}

{% set separatorIcons = {
    'chevron': 'chevron-right',
    'slash': 'slash',
    'arrow': 'arrow-right'
} %}

{% set breadcrumbClasses = [
    'flex items-center flex-wrap gap-1',
    sizeClasses[size] ?? sizeClasses['md'],
    class
]|join(' ')|trim %}

{# ============================================================================
   RENDU HTML
   ============================================================================ #}

<nav aria-label="Fil d'ariane" class="{{ breadcrumbClasses }}">
    <ol class="flex items-center flex-wrap gap-1">

        {# Home #}
        {% if showHome %}
            <li class="flex items-center">
                <a href="{{ homeHref }}" class="text-gray-400 hover:text-gray-600 transition-colors p-1" aria-label="Accueil">
                    {% include '_atoms/icon/icon.html.twig' with {
                        name: 'home',
                        size: iconSizes[size] ?? 'sm'
                    } only %}
                </a>
            </li>
            {% if items|length > 0 %}
                <li class="text-gray-300" aria-hidden="true">
                    {% include '_atoms/icon/icon.html.twig' with {
                        name: separatorIcons[separator] ?? 'chevron-right',
                        size: iconSizes[size] ?? 'sm'
                    } only %}
                </li>
            {% endif %}
        {% endif %}

        {# Items #}
        {% for item in items %}
            <li class="flex items-center">
                {% if not loop.last and item.href is defined %}
                    <a href="{{ item.href }}" class="text-gray-500 hover:text-gray-700 hover:underline transition-colors">
                        {{ item.label }}
                    </a>
                {% else %}
                    <span class="text-gray-900 font-medium" aria-current="page">
                        {{ item.label }}
                    </span>
                {% endif %}
            </li>
            {% if not loop.last %}
                <li class="text-gray-300" aria-hidden="true">
                    {% include '_atoms/icon/icon.html.twig' with {
                        name: separatorIcons[separator] ?? 'chevron-right',
                        size: iconSizes[size] ?? 'sm'
                    } only %}
                </li>
            {% endif %}
        {% endfor %}

    </ol>
</nav>