{#
  UI/UX V2 Phase 1A — Breadcrumb component (INERT UNTIL INCLUDED)

  Expected optional context:
    breadcrumbs_v2: [{"label": "Clients", "url": "/clients"}, ...]
    breadcrumbs_aria_label_v2: default "Breadcrumb"

  The last item is rendered as the current page even if a URL is supplied.
#}
{% set _crumbs = breadcrumbs_v2|default([], true) %}
{% set _crumb_label = breadcrumbs_aria_label_v2|default('Breadcrumb', true) %}

{% if _crumbs %}
<nav aria-label="{{ _crumb_label }}" class="min-w-0" data-uiux-v2="breadcrumbs">
  <ol class="flex min-w-0 items-center gap-1.5 overflow-x-auto whitespace-nowrap text-sm text-slate-500" role="list">
    {% for crumb in _crumbs %}
      {% set _is_last = loop.last %}
      <li class="flex min-w-0 items-center gap-1.5">
        {% if not loop.first %}
          <svg class="h-4 w-4 shrink-0 text-slate-300" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 0 1 .02-1.06L11.168 10 7.23 6.29a.75.75 0 1 1 1.04-1.08l4.51 4.25a.75.75 0 0 1 0 1.08l-4.51 4.25a.75.75 0 0 1-1.06-.02Z" clip-rule="evenodd" />
          </svg>
        {% endif %}

        {% if not _is_last and crumb.get('url') %}
          <a href="{{ crumb.get('url') }}" class="max-w-56 truncate rounded px-1 py-0.5 font-medium text-slate-600 hover:text-brand-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500">
            {{ crumb.get('label', '') }}
          </a>
        {% else %}
          <span class="max-w-64 truncate px-1 py-0.5 font-semibold text-slate-900" {% if _is_last %}aria-current="page"{% endif %}>
            {{ crumb.get('label', '') }}
          </span>
        {% endif %}
      </li>
    {% endfor %}
  </ol>
</nav>
{% endif %}