{% sw_extends '@Storefront/storefront/layout/breadcrumb.html.twig' %}

{# ---------------- START: SET TEMPLATE VARS ---------------- #}

{# ThemeWare: Set theme variables #}
{% set twtBreadcrumbCompatibility = theme_config('twt-breadcrumb-compatibility') %}
{% set twtBreadcrumbFurtherInformation = theme_config('twt-breadcrumb-further-information') %}
{% set twtBreadcrumbSeparatorStyle = theme_config('twt-breadcrumb-separator-style') %}
{% set homeLabel = context.salesChannel.translated.homeName|default("general.homeLink"|trans) %}

{# ---------------- END: SET TEMPLATE VARS ---------------- #}

{# TODO: Check if "Add wrapper 'breadcrumb-inner-container' around breadcrumb for further formatting" is needed. #}

{# ThemeWare: Changes on the breadcrumb #}
{% block layout_breadcrumb_list %}
    {% if twtBreadcrumbCompatibility != 1 %}
        <ol class="breadcrumb"
            itemscope
            itemtype="https://schema.org/BreadcrumbList">

            {% block twt_component_listing_breadcrumb_further_information %}
                {# ThemeWare: Add futher information snippet #}
                {% if twtBreadcrumbFurtherInformation == 3 or twtBreadcrumbFurtherInformation == 4 or twtBreadcrumbFurtherInformation == 6 %}
                    <div class="breadcrumb-container twt-breadcrumb-further-information">
                        <span>{{ "twt.breadcrumb.furtherInformation"|trans|sw_sanitize }}</span>
                    </div>
                {% endif %}

                {# ThemeWare: Add home icon #}
                {% if twtBreadcrumbFurtherInformation == 2 or twtBreadcrumbFurtherInformation == 4 %}
                    <li class="breadcrumb-item twt-breadcrumb-home-icon"
                        itemprop="itemListElement"
                        itemscope
                        itemtype="https://schema.org/ListItem">
                        <a href="{{ path('frontend.home.page') }}"
                           class="home-link{% if controllerAction is same as('home') %} is-active{% endif %}"
                           title="{{ homeLabel|striptags }}"
                           itemprop="item">
                            <link itemprop="url"
                                  href="{{ path('frontend.home.page') }}"/>
                            {% sw_icon 'home' %}
                            <span class="breadcrumb-title" itemprop="name">{{ "general.homeLink"|trans|sw_sanitize }}</span>
                        </a>
                        <meta itemprop="position" content="0"/>
                    </li>
                {% endif %}

                {# ThemeWare: Add home link #}
                {% if twtBreadcrumbFurtherInformation == 5 or twtBreadcrumbFurtherInformation == 6 %}
                    <li class="breadcrumb-item twt-breadcrumb-home-link"
                        itemprop="itemListElement"
                        itemscope
                        itemtype="https://schema.org/ListItem">
                        <a href="{{ path('frontend.home.page') }}"
                           class="home-link{% if controllerAction is same as('home') %} is-active{% endif %}"
                           title="{{ homeLabel|striptags }}"
                           itemprop="item">
                            <link itemprop="url"
                                  href="{{ path('frontend.home.page') }}"/>
                            <span class="breadcrumb-title" itemprop="name">{{ "general.homeLink"|trans|sw_sanitize }}</span>
                        </a>
                        <meta itemprop="position" content="0"/>
                    </li>
                {% endif %}

                {# ThemeWare: Add separator #}
                {% if (twtBreadcrumbFurtherInformation == 2 or twtBreadcrumbFurtherInformation == 5 or twtBreadcrumbFurtherInformation == 4 or twtBreadcrumbFurtherInformation == 6) and controllerAction is not same as('home') %}
                    <div class="breadcrumb-placeholder">
                        {% if twtBreadcrumbSeparatorStyle == 2 %}
                            {% sw_icon 'arrow-medium-double-right' style { 'size': 'fluid', 'pack': 'solid'} %}
                        {% elseif twtBreadcrumbSeparatorStyle == 3 %}
                            {% sw_icon 'arrow-right' %}
                        {% elseif twtBreadcrumbSeparatorStyle == 10 %}
                            <span class="text slash">/</span>
                        {% elseif twtBreadcrumbSeparatorStyle == 11 %}
                            <span class="text dot">•</span>
                        {% elseif twtBreadcrumbSeparatorStyle == 12 %}
                            <span class="text pipe">|</span>
                        {% elseif twtBreadcrumbSeparatorStyle == 13 %}
                            <span class="text dash">—</span>
                        {% else %}
                            {# Default #}
                            {% sw_icon 'arrow-medium-right' style { 'size': 'fluid', 'pack': 'solid'} %}
                        {% endif %}
                    </div>
                {% endif %}
            {% endblock %}

            {# Default #}
            {% for breadcrumbCategory in breadcrumbCategories %}
                {% set key = breadcrumbCategory.id %}
                {% set name = breadcrumbCategory.translated.name %}

                {{ block('layout_breadcrumb_list_item') }}

                {{ block('layout_breadcrumb_placeholder') }}
            {% endfor %}
        </ol>
    {% else %}

        {# Default block #}
        {{ parent() }}
    {% endif %}
{% endblock %}


{# ThemeWare: Change separator icon #}
{% block layout_breadcrumb_placeholder %}
    {% if twtBreadcrumbCompatibility != 1 %}
        {% if key != breadcrumbKeys|last %}
            <div class="breadcrumb-placeholder">
                {% if twtBreadcrumbSeparatorStyle == 2 %}
                    {% sw_icon 'arrow-medium-double-right' style { 'size': 'fluid', 'pack': 'solid'} %}
                {% elseif twtBreadcrumbSeparatorStyle == 3 %}
                    {% sw_icon 'arrow-right' %}
                {% elseif twtBreadcrumbSeparatorStyle == 10 %}
                    <span class="text slash">/</span>
                {% elseif twtBreadcrumbSeparatorStyle == 11 %}
                    <span class="text dot">•</span>
                {% elseif twtBreadcrumbSeparatorStyle == 12 %}
                    <span class="text pipe">|</span>
                {% elseif twtBreadcrumbSeparatorStyle == 13 %}
                    <span class="text dash">—</span>
                {% else %}
                    {# Default #}
                    {% sw_icon 'arrow-medium-right' style { 'size': 'fluid', 'pack': 'solid'} %}
                {% endif %}
            </div>
        {% endif %}
    {% else %}

        {# Default block #}
        {{ parent() }}
    {% endif %}
{% endblock %}