{% sw_extends '@Storefront/storefront/base.html.twig' %}
{% block base_main_inner %}
<div class="container-main">
{% block page_content %}
{% block cms_breadcrumb %}
{% if page.header.navigation.active.level > 2 %}
<div class="breadcrumb cms-breadcrumb container">
{% sw_include '@Storefront/storefront/layout/breadcrumb.html.twig' with {
context: context,
category: page.header.navigation.active
} only %}
</div>
{% endif %}
{% endblock %}
{% block cms_category_headline %}
{% set description = page.header.navigation.active.customFields.custom_category_info_description %}
{% if page.header.navigation.active.level > 2 %}
<div class="container mb-4">
<h1 class="category-headline">{{ page.header.navigation.active.name }}</h1>
{# <span class="category-description">{{ description|striptags|raw }}</span>#}
</div>
{% endif %}
{% endblock %}
{% block cms_category_description %}
{% set description = page.header.navigation.active.customFields.custom_category_info_description %}
{% set imgMediaId = page.header.navigation.active.customFields.custom_category_info_image %}
{% set iconMediaId = page.header.navigation.active.customFields.custom_category_info_icon %}
{% 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 %}
{% 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">
<div class="cms-block bg-image">
<img src="{{ img.url }}" class="cms-block-background media-mode--cover">
<div class="cms-block-container">
<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 %}
{% endblock %}
{% block cms_content %}
<div class="cms-page">
{% block page_content_blocks %}
{% sw_include "@Storefront/storefront/page/content/detail.html.twig" with {'cmsPage': page.cmsPage} %}
{% endblock %}
</div>
{% endblock %}
{% endblock %}
</div>
{% endblock %}