{% from "components/icon/_macro.njk" import onsIcon %}
{% macro onsBreadcrumbs(params) %}
    {% set breadcrumbs %}
        <nav
            class="ons-breadcrumbs{{ ' ons-container' if params.variant }}{{ ' ' + params.classes if params.classes else '' }}"
            aria-label="{{ params.ariaLabel | default('Breadcrumbs') }}"
            {% if params.id %}id="{{ params.id }}"{% endif %}
        >
            <ol class="ons-breadcrumbs__items ons-u-fs-s">
                {%- for item in params.itemsList -%}
                    <li
                        class="ons-breadcrumbs__item{{ ' ' + item.itemClasses if item.itemClasses else '' }}"
                        id="breadcrumb-{{ loop.index }}"
                    >
                        <a
                            class="ons-breadcrumbs__link{{ ' ' + item.linkClasses if item.linkClasses else '' }}"
                            href="{% if not isDesignSystemExample %}{{ item.url }}{% else %}#0{% endif %}"
                            {% if item.id %}{{ ' ' }}id='{{ item.id }}'{% endif %}
                            {% if item.attributes %}{% for attribute, value in (item.attributes.items() if item.attributes is mapping and item.attributes.items else item.attributes) %}{{ ' ' }}{{ attribute }}="{{ value }}"{% endfor %}{% endif %}
                            >{{ item.text }}</a
                        >
                        {{-
                            onsIcon({
                                "iconType": "chevron"
                            })
                        -}}
                    </li>
                {%- endfor -%}
            </ol>
        </nav>
    {% endset %}
    {% if params.variant %}
        <div class="ons-breadcrumbs-wrapper ons-breadcrumbs-wrapper--{{ params.variant }}">{{ breadcrumbs | safe }}</div>
    {% else %}
        {{ breadcrumbs | safe }}
    {% endif %}
{% endmacro %}