{% load i18n %}
{% if breadcrumbs %}
<nav aria-label="breadcrumb" class="mb-6">
    <ol class="flex items-center gap-2 text-sm">
        <li>
            <a href="{% url 'dashboard:command-center' %}" class="flex items-center gap-2 text-gray-400 hover:text-navy transition">
                <i data-lucide="home" class="w-4 h-4"></i>
                <span>{% trans 'Home' %}</span>
            </a>
        </li>
        <li class="text-gray-300">
            <i data-lucide="chevron-right" class="w-4 h-4"></i>
        </li>
        {% for crumb in breadcrumbs %}
            {% if forloop.last %}
                <li class="text-navy font-medium" aria-current="page">{{ crumb.title }}</li>
            {% else %}
                <li>
                    <a href="{{ crumb.url }}" class="text-gray-400 hover:text-navy transition">{{ crumb.title }}</a>
                </li>
                {% if not forloop.last %}
                <li class="text-gray-300">
                    <i data-lucide="chevron-right" class="w-4 h-4"></i>
                </li>
                {% endif %}
            {% endif %}
        {% endfor %}
    </ol>
</nav>
{% endif %}