{% extends 'layout/default.html.twig' %}
{% block contentBlock %}
<main class="stereotaxicCategoryPage" style="background-attachment: fixed;background-image: url({{ document.getProperty('template_background_image') ? document.getProperty('template_background_image').getThumbnail('Stoelting_division_bg') }}) ;">
<div class="container mt-5 mt-lg-5 mt-md-5">
<div class="row">
<div class="col-xl-10 offset-xl-1 offset-lg-0 col-lg-12 pb-3 pb-lg-3 pb-md-3">
<div class="d-flex align-items-center">
{% set anyMaze = 'any-maze' in document.getProperty('navigation_title') | lower %}
<div class="category-breadcrumb-image {{ pimcore_image('categoryBreadcrumbImage').isEmpty() and not editmode ? 'd-none' : 'mr-3 mr-lg-3 mr-md-3' }}">
{% if editmode %}
{{ pimcore_image('categoryBreadcrumbImage') }}
{% else %}
<img style="width:80px;" src="{{ pimcore_image('categoryBreadcrumbImage').getThumbnail('Stoelting_category_breadcrumb') }}" alt="{{ pimcore_image('categoryBreadcrumbImage').getAlt() }}">
{% endif %}
</div>
<!-- * Desktop version-->
<div class="sub-category-nav--desktop align-items-center border-2 border-bottom border-indigo w-100 pb-3 pb-lg-3 pb-md-3" style="margin-bottom: 8px;">
<h2 class="font-weight-bold mb-0">
{% if editmode %}
{{ pimcore_input('categoryBreadcrumbHeading', {
placeholder: document.getProperty('navigation_title')
}) }}
{% elseif not pimcore_input('categoryBreadcrumbHeading').isEmpty() %}
{{ pimcore_input('categoryBreadcrumbHeading') }}
{% else %}
{{ document.getProperty('navigation_title') }}
{% endif %}
</h2>
<div class="d-flex ml-auto">
<h4 class="font-weight-bold text-uppercase mb-0">
<a href="{{ document.parent.href }}" class="text-navyBlue hover-mediumBlue">
<span class="text-indigo">< </span> {{ document.parent.property('navigation_title') }}
</a>
</h4>
</div>
</div>
<!-- * Mobile version-->
<div class="sub-category-nav--mobile">
<div class="border-2 border-bottom border-indigo w-100 pb-2 pb-lg-2 pb-md-2">
<h3 class="font-weight-bold">
{% if editmode %}
{{ pimcore_input('categoryBreadcrumbHeading--mobile', {
placeholder: document.getProperty('navigation_title')
}) }}
{% elseif not pimcore_input('categoryBreadcrumbHeading--mobile').isEmpty() %}
{{ pimcore_input('categoryBreadcrumbHeading--mobile') }}
{% else %}
{{ document.getProperty('navigation_title') }}
{% endif %}
</h3>
</div>
<div class="d-flex pt-2 pt-lg-2 pt-md-2">
<h4 class="font-weight-bold text-uppercase">
<a href="{{ document.parent.href }}" class="d-flex align-items-center text-navyBlue hover-mediumBlue">
<span class="text-indigo">< </span><small class="ml-1 ml-lg-1 ml-md-1">{{ document.parent.property('navigation_title') }}</small>
</a>
</h4>
</div>
</div>
</div>
</div>
</div>
<div class="row mt-5 mt-lg-5 mt-md-5 stereotaxicCategoryPage-products align-items-start">
<div class="col-xl-8 offset-xl-2">
<div class="row align-items-start">
{% set fallbackImage = asset('static/images/admin/empty_image.png') %}
{% for index, product in paginator %}
{% set image = product.image is defined ? product.image : null %}
<!-- include subtemplate 'category-item.html.twig' -->
{% include "Components/product-item.html.twig" with {'product': product} %}
{% endfor %}
</div>
<div class="row {{ paginator.paginationData.pageCount == 1 ? 'd-none' }}">
<div class="col-lg-6 offset-lg-3">
{% include 'Components/pagination.html.twig' with paginator %}
</div>
</div>
</div>
</div>
</div>
</main>
{% endblock %}