{% sw_extends '@Storefront/storefront/layout/breadcrumb.html.twig' %}
{% block layout_breadcrumb_inner %}
{% if category %}
{% set breadcrumbCategories = sw_breadcrumb_full(category, context.context) %}
{% set categoryId = category.id %}
{% if feature('v6.5.0.0') %}
{% set breadcrumbKeys = breadcrumbCategories|keys %}
{% else %}
{% sw_silent_feature_call "v6.5.0.0" %}
{# @deprecated tag:v6.5.0 - Use "sw_breadcrumb_full" directly. #}
{% set breadcrumb = sw_breadcrumb(category) %}
{# @deprecated tag:v6.5.0 - Use "sw_breadcrumb_full" directly. #}
{% set breadcrumbKeys = breadcrumb|keys %}
{# @deprecated tag:v6.5.0 - Use "sw_breadcrumb_full" directly. #}
{% set breadcrumbTypes = sw_breadcrumb_build_types(breadcrumbCategories) %}
{% endsw_silent_feature_call %}
{% endif %}
{% set isProduct = controllerName === 'Product' %}
{% if breadcrumbCategories|length > 0 %}
<nav aria-label="breadcrumb" class="boxed-layout">
{% block layout_breadcrumb_list %}
<ol class="breadcrumb flex items-center py-2 font-accent text-grey-600 uppercase text-xs"
itemscope
itemtype="https://schema.org/BreadcrumbList">
<div class="breadcrumb-placeholder flex justify-center items-center w-5 h-5 rotate-180 md:hidden">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
class="w-5 h-5">
<path fill-rule="evenodd"
d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
clip-rule="evenodd"/>
</svg>
</div>
<li class="breadcrumb-item items-end{% if breadcrumbCategories|length !== 1 %} hidden{% else %} flex font-bold text-grey-900{% endif %} md:flex md:font-normal md:text-grey-600">
<a href="{{ path('frontend.home.page') }}"
class="hover:underline"
title="{{ "general.homeLink"|trans }}"
itemprop="item">
<link itemprop="url"
href="{{ path('frontend.home.page') }}"/>
<span class="breadcrumb-title"
itemprop="name">{{ "general.homeLink"|trans }}</span>
</a>
<meta itemprop="position" content="0">
</li>
<div class="breadcrumb-placeholder hidden justify-center items-center w-5 h-5 rotate-180 md:rotate-0 md:flex">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
class="w-5 h-5">
<path fill-rule="evenodd"
d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
clip-rule="evenodd"/>
</svg>
</div>
{% for breadcrumbCategory in breadcrumbCategories %}
{% set key = breadcrumbCategory.id %}
{% set name = breadcrumbCategory.translated.name %}
{% set productDirectParent = controllerName === 'Product' and key is not same as (categoryId) %}
{% set categoryDirectParent = controllerName !== 'Product' and loop.revindex === 1 %}
{% if loop.first and loop.last %}
{% endif %}
{% block layout_breadcrumb_list_item %}
<li class="breadcrumb-item {% if isProduct and key is not same as(categoryId) %}hidden md:block{% endif %} {% if not isProduct and loop.revindex === 1 %}hidden md:block{% endif %}"
{% if key is same as(categoryId) %}aria-current="page"{% endif %}
itemprop="itemListElement"
itemscope
itemtype="https://schema.org/ListItem">
{% if breadcrumbCategory.type == 'folder' %}
<div itemprop="item">
<div itemprop="name">{{ name }}</div>
</div>
{% else %}
<a href="{{ category_url(breadcrumbCategory) }}"
class="breadcrumb-link hover:underline {% if isProduct and key is same as(categoryId) %} is-active text-grey-900 font-bold{% endif %} {% if not isProduct and loop.revindex === 2 %} is-active text-grey-900 font-bold md:font-normal md:text-grey-600{% endif %} {% if not isProduct and loop.revindex === 1 %} md:font-bold md:text-grey-900{% endif %}"
title="{{ name }}"
{% if category_linknewtab(breadcrumbCategory) %}target="_blank"{% endif %}
itemprop="item">
<link itemprop="url"
href="{{ category_url(breadcrumbCategory) }}"/>
<span class="breadcrumb-title" itemprop="name">{{ name }}</span>
</a>
{% endif %}
<meta itemprop="position" content="{{ loop.index }}"/>
</li>
{% endblock %}
{% block layout_breadcrumb_placeholder %}
{% if key != breadcrumbKeys|last %}
<div class="breadcrumb-placeholder w-5 h-5 items-center justify-center hidden md:flex">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
class="w-5 h-5">
<path fill-rule="evenodd"
d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
clip-rule="evenodd"/>
</svg>
</div>
{% endif %}
{% endblock %}
{% endfor %}
</ol>
{% endblock %}
</nav>
{% endif %}
{% endif %}
{% endblock %}