<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" xmlns:sms="http://typo3.org/ns/SMS/SmsResponsiveImages/ViewHelpers" xmlns:ppm="http://typo3.org/ns/Pixelant/PxaProductManager/ViewHelpers" data-namespace-typo3-fluid="true">

<f:layout name="Default"/>

<f:section name="hero">
    <div class="section section-hero bg-primary transition-after transition-type-4">
        <div class="hero hero-products hero-products--list is-expanded">
            <div class="container-fluid hero-text">
                <div class="hero-subheader">
                    <f:if condition="{category.alternativeTitle}" then="{category.alternativeTitle}" else="{category.title}"/>
                </div>
                <h1 class="hero-header">{category.description -> f:format.stripTags()}</h1>
            </div>

            <f:if condition="{category.bannerImage}">
                <div class="hero-bg hero-bg--image">
                    <sms:image width="1920" image="{category.bannerImage}" treatIdAsReference="true" alt=""
                               breakpoints="{
                                  0: {'cropVariant': 'desktop', 'media': '(min-width: 1024px) and (orientation:landscape)', 'srcset': '1024,1280,1440,1920,2048,2560,3840,5120', 'sizes': '100vw'},
                                  1: {'cropVariant': 'mobile', 'media': '(orientation:portrait)','srcset': '375,750,1125', 'sizes': '100vw'}
                                }"
                               picturefill="false"/>
                </div>
            </f:if>
        </div>
    </div>
</f:section>


<f:section name="main">
    <f:flashMessages/>

    <ppm:setPageTitle>
        <f:if condition="{category.alternativeTitle}" then="{category.alternativeTitle}" else="{category.title}"/>
    </ppm:setPageTitle>

    <f:if condition="{treeData}">
        <f:then>
            <div class="col-md-3">
                <f:if condition="{treeData.subItems}">
                    <div class="products-navigation">
                        <div class="list-group">
                            <f:render partial="Navigation/Menu" arguments="{items: treeData.subItems, level: '{treeData.level}'}"/>
                        </div>
                    </div>
                </f:if>
            </div>
            <div class="col-md-9">
                <f:render section="productWrapper" arguments="{_all}"/>
            </div>
        </f:then>
        <f:else>
            <f:render section="productWrapper" arguments="{_all}"/>
        </f:else>
    </f:if>
</f:section>


<f:section name="productWrapper">
    <div class="section section--products-list bg-light transition-after transition-type-2">


        <div class="container space-after-none">
            <f:if condition="{category.metaDescription}">
                <div class="product-list-header text-center">
                    <h2>{category.metaDescription -> f:format.html()}</h2>
                    <f:if condition="{category.parent}">
                        <p class="text-center">{f:translate(key: 'fe.go_back') -> ppm:link.link(category: category.parent, class: 'btn btn-outline-primary back-button')}</p>
                    </f:if>
                </div>
            </f:if>
        </div>
        <div class="container-fluid space-before-none">
            <!--Show categories-->
            <f:if condition="{subCategories}">
                <div class="product-list product-list--categories">
                    <f:for each="{subCategories}" as="subCategory">
                        <f:render section="item" arguments="{image: subCategory.image, title: subCategory.title, category: subCategory}"/>
                    </f:for>
                </div>
            </f:if>

            <!-- Show products -->
            <f:if condition="{subCategories->f:count()} == 0 || {settings.showCategoriesWithProducts}">
                <div class="product-list product-list--products">
                    <f:if condition="{products}">
                        <f:then>
                            <f:for each="{products}" as="product">
                                <f:render section="item" arguments="{product:product, image: product.thumbnail, category: category}"/>
                            </f:for>
                        </f:then>
                        <f:else>
                            <f:if condition="{subCategories->f:count()} == 0">
                                <div class="no-products-found">
                                    <f:translate key="fe.no_products_found"/>
                                </div>
                            </f:if>
                        </f:else>
                    </f:if>
                </div>
            </f:if>

        </div>
    </div>
</f:section>


<f:section name="item">
    <f:render partial="Product/Card" arguments="{_all}"/>
</f:section>
</html>
