{#
    Breadcrumb Component - Fil d'Ariane

    Paramètres:
    - items: Array [{label, url}] - Dernier élément sans url = page courante

    Exemple d'utilisation:
    {% include 'flowbite_components/layout/_breadcrumb.html.twig' with {
        items: [
            {label: 'Accueil', url: path('app_home')},
            {label: 'Utilisateurs', url: path('users_list')},
            {label: 'Profil'}
        ]
    } %}
#}

{% if items is defined and items|length > 0 %}
<nav class="flex mb-4" aria-label="Breadcrumb">
   <ol class="inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse">
      {% for item in items %}
         {% if loop.first %}
            {# Premier élément avec icône home #}
            <li class="inline-flex items-center">
               {% if item.url is defined %}
                  <a href="{{ item.url }}" class="inline-flex items-center text-sm font-medium text-body hover:text-fg-brand">
                     <svg class="w-4 h-4 me-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m4 12 8-8 8 8M6 10.5V19a1 1 0 0 0 1 1h3v-3a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3h3a1 1 0 0 0 1-1v-8.5"/>
                     </svg>
                     {{ item.label }}
                  </a>
               {% else %}
                  <span class="inline-flex items-center text-sm font-medium text-body-light">
                     <svg class="w-4 h-4 me-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m4 12 8-8 8 8M6 10.5V19a1 1 0 0 0 1 1h3v-3a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3h3a1 1 0 0 0 1-1v-8.5"/>
                     </svg>
                     {{ item.label }}
                  </span>
               {% endif %}
            </li>
         {% elseif loop.last %}
            {# Dernier élément - page courante #}
            <li aria-current="page">
               <div class="flex items-center">
                  <svg class="w-4 h-4 text-body-light mx-1 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                     <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7"/>
                  </svg>
                  <span class="ms-1 text-sm font-medium text-body-light md:ms-2">{{ item.label }}</span>
               </div>
            </li>
         {% else %}
            {# Éléments intermédiaires #}
            <li>
               <div class="flex items-center">
                  <svg class="w-4 h-4 text-body-light mx-1 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                     <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7"/>
                  </svg>
                  {% if item.url is defined %}
                     <a href="{{ item.url }}" class="ms-1 text-sm font-medium text-body hover:text-fg-brand md:ms-2">{{ item.label }}</a>
                  {% else %}
                     <span class="ms-1 text-sm font-medium text-body-light md:ms-2">{{ item.label }}</span>
                  {% endif %}
               </div>
            </li>
         {% endif %}
      {% endfor %}
   </ol>
</nav>
{% endif %}