<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-dark transition-after transition-type-2">
        <div class="hero hero-products hero-products--show is-expanded">
            <div class="container-fluid hero-text">
                <div class="hero-subheader">{product.teaser}</div>
                <h1 class="hero-header">
                    <f:if condition="{product.alternativeTitle}" then="{product.alternativeTitle}" else="{product.name}"/>
                </h1>
                <div class="hero-labels"></div>
            </div>
            <div class="hero-bg hero-bg--image">

                <sms:image width="1920"
                           src="3:images/product-detail-hero-primary.jpg"

                           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>
            <div class="hero-product--image">

                <f:if condition="{product.mainImage}">
                    <f:alias map="{sizes: settings.images.singleView}">
                        <sms:image image="{product.mainImage}" srcset="{sizes.mainMaxWidth/2},{sizes.mainMaxWidth}, {sizes.mainMaxWidth*1.5}, {sizes.mainMaxWidth*2}" width="{sizes.mainMaxWidth}" picturefill="false"/>
                    </f:alias>
                </f:if>
            </div>

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

<f:section name="main">

    <div class="section section-products-show bg-light transition-after transition-type-1">
        <div class="container ">

            <f:if condition="{product.disableSingleView}">
                <f:then>
                    <div class="alert alert-danger">
                        <f:translate key="fe.single_view_disabled"/>
                    </div>
                </f:then>
                <f:else>
                    <ppm:setPageTitle>
                        <f:if condition="{product.alternativeTitle}" then="{product.alternativeTitle}" else="{product.name}"/>
                    </ppm:setPageTitle>

                    <div class="row">
                        <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="singleView" arguments="{_all}"/>
                                </div>
                            </f:then>
                            <f:else>
                                <div class="col-md-8 offset-md-2">
                                    <f:render section="singleView" arguments="{_all}"/>
                                </div>
                            </f:else>
                        </f:if>
                    </div>
                </f:else>
            </f:if>
        </div>
    </div>
</f:section>


<f:section name="singleView">
    <div class="single-product-wrapper {product.additionalClasses}">
        <div class="product-header">


            <h1 class="product-name">{product.name}</h1>
            <f:if condition="{product.attributes}">
                <div class="product-labels">

                    <f:for each="{product.attributes}" as="attributesGroupedBySet">
                        <f:if condition="{attributesGroupedBySet.identifier} == 'labels'">
                            <f:for each="{attributesGroupedBySet.value}" as="label">
                                <f:image src="3:images/label_{v:format.sanitizeString(string: label.value)}.svg" width="48"  class="product-attributeLabel"/>
                            </f:for>
                        </f:if>
                    </f:for>
                </div>
            </f:if>

            <f:if condition="{product.usp}">
                <div class="product-usp">
                    <ul class="list-unstyled">
                        <f:for each="{product.uspAsList}" as="usp">
                            <li>{usp}</li>
                        </f:for>
                    </ul>

                </div>
            </f:if>

            <f:if condition="{ppm:isPricingEnabled()} && {product.price}">
                <div class="product-price">
                    <f:translate key="fe.price_currency_format" arguments="{0: product.formatPrice}"/>
                    <f:if condition="{settings.wishList.showTaxInfo}"><span class="tax-price">(<f:translate key="fe.tax"/>:<f:translate key="fe.price_currency_format" arguments="{0: product.formatTax}"/>)</span></f:if>
                </div>
            </f:if>

        </div>
        <f:comment>
        <div class="header-buttons">

            <f:for each="{additionalButtons}" as="button">
                <a href="{button.link}" class="btn btn-primary product-header-btn {button.classes}">
                    {button.name}
                </a>
            </f:for>
        </div>
        </f:comment>
        <f:if condition="{settings.showInSingleView}">
            <f:if condition="{settings.wishList.enable} || {settings.compareList.enable}">
                <div class="item-options-bar">
                    <f:if condition="{settings.wishList.enable}">
                        <f:render partial="Product/OptionsBar/WishListButtonSingleView" arguments="{uid: product.uid}"/>
                    </f:if>
                    <f:if condition="{settings.compareList.enable}">
                        <f:render partial="Product/OptionsBar/CompareListButtonSingleView" arguments="{uid: product.uid}"/>
                    </f:if>
                </div>
            </f:if>
        </f:if>


        <f:if condition="{product.teaser}">
            <div class="product-teaser">
                <f:format.html>{product.teaser}</f:format.html>
            </div>
        </f:if>

        <f:if condition="{product.description}">
            <div class="product-description">
                <f:format.html>{product.description}</f:format.html>
            </div>
        </f:if>

        <f:if condition="{product.additionalInformation}">
            <div class="product-additionalInformation">
                <f:format.html>{product.additionalInformation}</f:format.html>
            </div>
        </f:if>

        <f:comment>
            /* Dont need this right now */
            <div class="col-md-4">
                <div class="single-product-gallery">
                    <div class="single-product-gallery__items">
                        <f:alias map="{sizes: settings.images.singleView}">
                            <f:for each="{product.imagesSorted}" as="image" iteration="i">
                                <f:if condition="{image.mainImage} == false && {image.useInListing} == false">

                                    <a href="{f:uri.image(image: image, maxWidth:'1920', maxHeight:'1080')}">
                                        <f:image
                                                maxWidth="{sizes.mainMaxWidth}"
                                                maxHeight="{sizes.mainMaxHeight}"
                                                image="{image}"
                                                alt="{image.title}"
                                                data="{description: image.description, fly-image: '{f:if(condition: i.isFirst, then: product.uid, else: 0)}'}"/>
                                    </a>
                                </f:if>
                            </f:for>
                        </f:alias>
                        <f:variable name="videos" value="0"/>
                        <f:if condition="{product.assets}">
                            <f:alias map="{sizes: settings.images.singleView}">
                                <f:for each="{product.assets}" as="file">
                                    <f:if condition="{file.originalResource.type} == 4">
                                        <f:then>
                                            <f:variable name="videos" value="1"/>
                                        </f:then>
                                        <f:else>
                                            <a href="{f:uri.image(image: file, maxWidth:'1920', maxHeight:'1080')}">
                                                <f:media
                                                        width="{sizes.mainMaxWidth}m"
                                                        height="{sizes.mainMaxHeight}m"
                                                        file="{file}"
                                                        alt="{file.alternative}"
                                                        title="{file.title}"
                                                        data="{description: file.description}"/>
                                            </a>
                                        </f:else>
                                    </f:if>
                                </f:for>
                            </f:alias>
                        </f:if>
                    </div>
                    <f:if condition="{settings.showGalleryPagination}">
                        <div class="single-product-gallery__pagination"></div>
                    </f:if>

                    <f:if condition="{videos}">
                        <div class="single-product-gallery__assets">
                            <f:alias map="{sizes: settings.images.singleView}">
                                <f:for each="{product.assets}" as="file">
                                    <f:if condition="{file.originalResource.type} == 4">
                                        <div align="center" class="embed-responsive embed-responsive-16by9">
                                            <f:media
                                                    width="{sizes.mainMaxWidth}"
                                                    height="{sizes.mainMaxHeight}"
                                                    file="{file}"
                                                    alt="{file.alternative}"
                                                    data="{description: file.description}"
                                                    title="{file.title}"/>
                                        </div>
                                    </f:if>
                                </f:for>
                            </f:alias>
                        </div>
                        <f:if condition="{settings.showGalleryPagination}">
                            <div align="center" class="single-product-gallery-assets__pagination"></div>
                        </f:if>
                    </f:if>

                </div>
            </div>
        </f:comment>

        <div class="product-attributes">
            <f:render partial="Product/AttributeListing" arguments="{product: product}"/>


        </div>
            <f:if condition="{product.links -> f:count()} || {product.falLinks -> f:count()}">
                <div class="product-related_links">
                    <h3>
                        <f:translate key="fe.related_links"/>
                    </h3>
                    <div class="table table-product-links">
                        <f:if condition="{product.links}">
                            <f:render partial="Product/Links" arguments="{links: product.links}"/>
                        </f:if>

                        <f:if condition="{product.falLinks}">
                            <f:render partial="Product/FileLinks"
                                      arguments="{files: product.falLinks}"/>
                        </f:if>
                    </div>
                </div>
            </f:if>
    </div>
    <f:comment><!-- Related products --></f:comment>
    <f:if condition="{product.relatedProducts}">
        <f:render partial="Product/Related"
                  arguments="{relatedProducts: product.relatedProducts, headerTranslationIndex: 'fe.related_products'}"/>
    </f:if>

    <f:comment><!-- Sub products --></f:comment>
    <f:if condition="{product.subProducts}">
        <f:render partial="Product/Related"
                  arguments="{relatedProducts: product.subProducts, headerTranslationIndex: 'fe.sub_products'}"/>
    </f:if>

    <f:comment><!-- Accessories --></f:comment>
    <f:if condition="{product.accessories}">
        <f:render partial="Product/Accessories"
                  arguments="{accessories: product.accessories, headerTranslationIndex: 'fe.accessories'}"/>
    </f:if>

    <f:comment><!-- Lates products --></f:comment>
    <f:if condition="{settings.showLatestVisitedProducts}">
        <div class="row">
            <div class="single-product-related">
                <div class="col-md-12">
                    <h3>
                        <f:translate key="fe.latest_visited_products"/>
                    </h3>
                </div>
                <div class="pm-latest-visited">
                    <div class="text-center">
                        <f:render partial="Product/Loader" arguments="{class: 'big'}"/>
                    </div>
                    <!--Place holder for latest visit product-->
                </div>
            </div>
        </div>
    </f:if>
    <f:if condition="{settings.showGoBackButton}">
    <p>
        <a href="#" class="btn btn-outline-primary back-button" onclick="window.history.back();return false;"><f:translate key="fe.go_back"/></a>
    </p>
    </f:if>
    </div>
</f:section>
</html>
