{% load i18n wagtailadmin_tags %}
{% comment %}
    Variables this template accepts:

    `pages` - A list of wagtail page objects
    `trailing_breadcrumb_title` (string?) - use this for a non linkable last breadcrumb
{% endcomment %}
{% with breadcrumb_link_classes='w-text-grey-600 w-text-14 w-no-underline w-outline-offset-inside hover:w-underline hover:w-text-primary' breadcrumb_item_classes='w-flex w-items-center w-overflow-hidden w-transition w-duration-300 w-whitespace-nowrap w-flex-shrink-0' icon_classes='w-w-4 w-h-4 w-mr-3' %}
    {# Breadcrumbs are visible on mobile by default but hidden on desktop #}

    <div class="w-flex w-flex-row w-items-center w-overflow-x-auto w-overflow-y-hidden w-scrollbar-thin" data-breadcrumb-next>
        <button
            type="button"
            data-toggle-breadcrumbs
            class="w-flex w-items-center w-box-border w-ml-0 w-p-4 w-h-full w-bg-transparent w-text-grey-400 w-transition hover:w-scale-110 hover:w-text-primary w-outline-offset-inside"
            aria-label="{% trans 'Toggle breadcrumbs' %}"
            aria-expanded="false"
        >
            {% icon name="dots-horizontal" class_name="w-w-3.5 w-h-4" %}
        </button>

        <div class="w-relative w-h-full w-bg-grey-50 w-top-0 w-z-20 w-flex w-items-center w-flex-row w-flex-1 sm:w-flex-none w-transition w-duration-300">
            <nav class="w-flex w-items-center w-flex-row"
                aria-label="{% trans 'Breadcrumb' %}">
                <ol class="w-flex w-flex-row w-justify-start w-items-center w-pl-0 w-gap-2 sm:w-gap-0 sm:w-space-x-2">
                    {% for page in pages %}
                        {% if page.is_root %}
                            <li class="{{ breadcrumb_item_classes }} w-max-w-0" data-breadcrumb-item hidden>
                                <a class="{{ breadcrumb_link_classes }}" href="{% url 'wagtailadmin_explore_root' %}">
                                    {% trans "Root" %}
                                </a>
                            </li>
                        {% elif forloop.first %}
                            {# For limited-permission users whose breadcrumb starts further down from the root #}
                            <li class="{{ breadcrumb_item_classes }} w-max-w-0" data-breadcrumb-item hidden>
                                <a class="{{ breadcrumb_link_classes }}" href="{% url 'wagtailadmin_explore' page.id %}">
                                    {% trans "Root" %}
                                </a>
                            </li>
                        {% elif forloop.last %}
                            <li class="{{ breadcrumb_item_classes }}" {% if trailing_breadcrumb_title %} data-breadcrumb-item hidden {% endif %}>
                                {% icon name="arrow-right" class_name=icon_classes %}
                                <a class="{{ breadcrumb_link_classes }} {% if not trailing_breadcrumb_title %} w-font-bold !w-text-primary {% endif %}"
                                    href="{% url 'wagtailadmin_explore' page.id %}">
                                    {{ page.get_admin_display_title }}
                                </a>
                            </li>
                            {% if trailing_breadcrumb_title %}
                                <li class="{{ breadcrumb_item_classes }}">
                                    {% icon name="arrow-right" class_name=icon_classes %}
                                    <div class="w-flex w-justify-start w-items-center w-font-bold w-text-primary">
                                        {{ trailing_breadcrumb_title }}
                                    </div>
                                </li>
                            {% endif %}
                        {% else %}
                            <li class="{{ breadcrumb_item_classes }} w-max-w-0" data-breadcrumb-item hidden>
                                {% icon name="arrow-right" class_name=icon_classes %}
                                <a class="{{ breadcrumb_link_classes }}" href="{% url 'wagtailadmin_explore' page.id %}">
                                    {{ page.get_admin_display_title }}
                                </a>
                            </li>
                        {% endif %}
                    {% endfor %}
                </ol>
            </nav>
        </div>
    </div>
{% endwith %}

