{% load static %}

{% partialdef breadcrumb-navigation inline %}
<div class="breadcrumbs text-sm">
    <ul>
        {% for item in breadcrumb_menu_items %}
        <li>
            <a href="{{ item.path }}"
               hx-get="{{ item.path }}"
               hx-target="#main-content"
               hx-swap="innerHTML show:window:top"
               hx-push-url="true"
               class="{{ item.hover_class }}">
                <svg class="i" width="18" height="18" role="img" aria-label="{{ item.name }}">
                    <use xlink:href="{% static 'lara_django_base/icons/symbols.svg' %}#{{ item.icon }}">
                </svg>
                {{ item.name }}
            </a>
        </li>
        {% endfor %}
    </ul>
</div>
{% endpartialdef breadcrumb-navigation %}

<div id="experiment-components-content" class="md:px-1 lg:px-[5vw]">
    {% partial breadcrumb-navigation %}
    <div class="flex justify-end mb-3">
        <a href="{% url create_link %}"
           hx-get="{% url create_link %}"
           hx-target="#main-content"
           hx-swap="innerHTML show:window:top"
           hx-push-url="true"
           class="btn bg-green-500 text-white">Add</a>
    </div>
    <h1 class="text-2xl font-bold mb-4">{{ section_title }}</h1>
    {% include view_component %}
</div>