{% 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-flex w-items-center w-h-full w-text-primary w-px-0.5 w-text-14 w-no-underline w-outline-offset-inside hover:w-underline hover:w-text-primary w-h-full' breadcrumb_item_classes='w-h-full w-flex w-items-center w-overflow-hidden w-transition w-duration-300 w-whitespace-nowrap w-flex-shrink-0 w-font-bold' icon_classes='w-w-4 w-h-4 w-ml-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-justify-center w-box-border w-ml-0 w-p-4 w-w-[50px] 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="breadcrumb-expand" class_name="w-w-4 w-h-4" %}
        </button>

        <div class="w-relative w-h-[50px] w-mr-4 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 w-h-full"
                aria-label="{% trans 'Breadcrumb' %}">
                <ol class="w-flex w-flex-row w-justify-start w-items-center w-h-full w-pl-0 w-my-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>
                                {% icon name="arrow-right" class_name=icon_classes %}
                            </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>
                                {% icon name="arrow-right" class_name=icon_classes %}
                            </li>
                        {% elif forloop.last %}
                            <li class="{{ breadcrumb_item_classes }}" {% if trailing_breadcrumb_title %} data-breadcrumb-item hidden {% endif %}>
                                <a class="{{ breadcrumb_link_classes }}"
                                    href="{% url 'wagtailadmin_explore' page.id %}">
                                    {{ page.get_admin_display_title }}
                                </a>
                                {% if trailing_breadcrumb_title %}
                                    {% icon name="arrow-right" class_name=icon_classes %}
                                {% endif %}
                            </li>
                        {% else %}
                            <li class="{{ breadcrumb_item_classes }} w-max-w-0" data-breadcrumb-item hidden>
                                <a class="{{ breadcrumb_link_classes }}" href="{% url 'wagtailadmin_explore' page.id %}">
                                    {{ page.get_admin_display_title }}
                                </a>
                                {% icon name="arrow-right" class_name=icon_classes %}
                            </li>
                        {% endif %}
                    {% endfor %}
                    {% if trailing_breadcrumb_title %}
                        <li class="{{ breadcrumb_item_classes }}">
                            <div class="w-flex w-justify-start w-items-center">
                                {{ trailing_breadcrumb_title }}
                            </div>
                        </li>
                    {% endif %}
                </ol>
            </nav>
        </div>
    </div>
{% endwith %}

