{% sw_extends '@Storefront/storefront/page/content/index.html.twig' %}
{% block cms_breadcrumb %}
{% if page.header.navigation.active.level > 1 %}
<div class="cms-section-default boxed">
<div class="cms-block-container">
<div class="col-12">
<div class="breadcrumb cms-breadcrumb container">
{% sw_include '@Storefront/storefront/layout/breadcrumb.html.twig' with {
context: context,
category: page.header.navigation.active
} only %}
</div>
</div>
</div>
</div>
{% endif %}
{% endblock %}
{% block cms_category_headline %}
{% if page.header.navigation.active.level > 1 %}
<div class="cms-section-default boxed">
<div class="cms-block-container">
<div class="col-12">
<h1 class="category-headline
">{{ page.header.navigation.active.translated.name }}</h1>
</div>
</div>
</div>
{% endif %}
{% endblock %}
{% block cms_category_description %}
{% if page.header.navigation.active.level > 1 %}
{% set imgMediaId = page.header.navigation.active.customFields.custom_category_info_image %}
{% set iconMediaId = page.header.navigation.active.customFields.custom_category_info_icon %}
{% set description = page.header.navigation.active.customFields.custom_category_info_description %}
{% set attribute_1 = page.header.navigation.active.customFields.custom_category_info_attribute_1 %}
{% set attribute_2 = page.header.navigation.active.customFields.custom_category_info_attribute_2 %}
{% set categoryColor = page.header.navigation.active.customFields.custom_category_info_color %}
{% set isBoxHidden = page.header.navigation.active.customFields.custom_category_info_box_hide %}
{% if imgMediaId %}
{% set media = searchMedia([imgMediaId], context.context) %}
{% set img = media.get(imgMediaId) %}
{% if iconMediaId %}
{% set mediaIcon = searchMedia([iconMediaId], context.context) %}
{% set icon = mediaIcon.elements|first %}
{% endif %}
<div class="category-description-container cms-block-text-on-image col-12">
<div class="cms-block bg-image">
<div class="d-flex">
<div class="category-square-name-wrapper {% if isBoxHidden %} d-none {% endif %}"
style="background-color: {{ categoryColor ? categoryColor : '#000000' }}">
<span class="category-name">{{ page.header.navigation.active.translated.name }}</span>
</div>
<img src="{{ img.url }}" class="cms-block-background media-mode--cover">
</div>
<div class="cms-block-container d-none">
<div class="category-description-wrapper d-flex flex-sm-column-reverse col-12 p-0">
<div class="d-flex flex-column flex-sm-row justify-content-between">
<span class="d-flex flex-column-reverse category-description">{{ description|striptags|raw }}</span>
<div class="d-flex">
{% if iconMediaId %} <img class="category-icon"
src="{{ icon.url }}">{% endif %}
<div class="category-description-attributes d-flex flex-column justify-content-end">
<span class="attr attr-1">{{ attribute_1 }}</span>
<span class="attr attr-2">{{ attribute_2 }}</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endif %}
{% endif %}
{% endblock %}