{% load traduction_tags %}
<!-- Breadcrumb -->
<section class="bg-primary text-white py-12">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <nav class="flex mb-4" aria-label="Breadcrumb">
            <ol class="flex items-center space-x-2 text-sm">
                <li>
                    <a href="{% url 'core:home' %}" class="hover:text-accent transition">{% trans_text 'Accueil' 'Home' 'Startseite' %}</a>
                </li>
                {% for crumb in breadcrumbs %}
                <li class="flex items-center">
                    <svg class="w-4 h-4 mx-2 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                    </svg>
                    {% if crumb.url %}
                    <a href="{{ crumb.url }}" class="hover:text-accent transition">{{ crumb.title }}</a>
                    {% else %}
                    <span class="text-gray-300">{{ crumb.title }}</span>
                    {% endif %}
                </li>
                {% endfor %}
            </ol>
        </nav>
        <h1 class="text-3xl md:text-4xl font-bold">{% block breadcrumb_title %}{{ page_title }}{% endblock %}</h1>
        {% if page_subtitle %}
        <p class="mt-2 text-lg text-gray-300">{{ page_subtitle }}</p>
        {% endif %}
    </div>
</section>