{# Breadcrumb Component - Tailwind CSS #}
{% if storybook.breadcrumb %}
{% set needs_truncation = storybook.breadcrumb|length > 3 %}

  <nav aria-label="breadcrumb" class="breadcrumb hg:w-full hg:mb-2 hg:md:my-3 hg:2xl:my-4">
    <h2 id="system-breadcrumb" class="hg:sr-only">{{ 'Breadcrumb' }}</h2>
    <ol class="breadcrumb-items hg:flex hg:flex-row hg:items-center hg:gap-1 hg:md:gap-2 hg:p-0 hg:m-0 hg:list-none hg:leading-none">

      {% for item in storybook.breadcrumb %}
        {% set is_first = loop.first %}
        {% set is_last_two = loop.revindex <= 2 %}
        {% set should_show = not needs_truncation or is_first or is_last_two %}

        {% if loop.first %}
          <li class="breadcrumb-item hg:text-xs hg:md:text-sm hg:2xl:text-base hg:flex hg:items-center hg:gap-1 hg:md:gap-2" aria-labelledby="{{ item.text }}">
            <a href="{{ item.url }}" class="breadcrumb-home hg:no-underline hg:flex hg:items-center">{{ include('@mercury/components/icon/icon.twig', { weight: 'bold', icon: 'house', icon_size: 'hg:text-sm hg:md:text-base' }) }}</a>
          </li>
        {% endif %}

        {# Insert ellipsis after first item if truncation is needed #}
        {% if needs_truncation and loop.index == 2 %}
          <li aria-hidden="true" class="breadcrumb-dots hg:text-xs hg:md:text-sm hg:flex hg:items-center">
            {{ include('@mercury/components/icon/icon.twig', { weight: 'bold', icon: 'dots-three', icon_size: 'hg:text-sm hg:md:text-base' }) }}
          </li>
          <li aria-hidden="true" class="breadcrumb-caret hg:text-xs hg:md:text-sm hg:flex hg:items-center">
            {{ include('@mercury/components/icon/icon.twig', { weight: 'bold', icon: 'caret-right', icon_size: 'hg:text-sm hg:md:text-base' }) }}
          </li>
        {% endif %}

        {# Render breadcrumb item #}
        {% if should_show %}
          {% if loop.last %}
            <li class="breadcrumb-item hg:text-xs hg:md:text-sm hg:2xl:text-base hg:flex hg:items-center active" aria-current="page">
              {{ item.text }}
            </li>
          {% elseif item.url and not is_first %}
            <li class="breadcrumb-item hg:text-xs hg:md:text-sm hg:2xl:text-base hg:flex hg:items-center">
              <a href="{{ item.url }}" class="hg:no-underline hg:hover:underline hg:focus:underline">{{ item.text }}</a>
            </li>
          {% endif %}

          {# Add chevron after item (except last) #}
          {% if not loop.last and (not needs_truncation or is_last_two or is_first) %}
            <li aria-hidden="true" class="breadcrumb-caret hg:text-xs hg:md:text-sm hg:flex hg:items-center">
              {{ include('@mercury/components/icon/icon.twig', { weight: 'bold', icon: 'caret-right', icon_size: 'hg:text-sm hg:md:text-base' }) }}
            </li>
          {% endif %}
        {% endif %}

      {% endfor %}
    </ol>
  </nav>
{% endif %}
