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

<div class="section section-hero {f:if(condition: address.image, then: 'bg-dark', else: 'bg-light')} transition-after transition-type-2">
    <div class="hero hero-address {f:if(condition: address.image, then: 'has-image', else:'has-background')} is-expanded">
        <div class="container-fluid hero-text" itemtype="http://schema.org/Bakery" itemid="uid{address.uid}" itemscope>
            <div class="hero-subheader">Ihr Backhaus Nahrstedt</div>
            <h1 class="hero-header" itemprop="name">{address.name}</h1>
            <h2 class="hero-lead">{address.city}</h2>
        </div>
        <f:if condition="{address.image}">
            <div class="hero-bg hero-bg--image">
                <sms:image width="1920" src="{address.firstImage.uid}" 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"
                           additionalAttributes="{itemprop:'image'}"/>
            </div>
        </f:if>

        <f:cache.disable>
        <f:if condition="{address.sales} > 0">
            <f:then>
                <v:render.uncache partial="Sales/Sales" arguments="{_all}"></v:render.uncache>
            </f:then>
            <f:else>
                <v:render.uncache partial="Sales/Openings" arguments="{_all}"></v:render.uncache>
            </f:else>
        </f:if>
        </f:cache.disable>
    </div>
</div>
