{namespace ep=EP\EpTheme\ViewHelpers}
<div class="space-y-2">
    <div class="odd:bg-gray-50 p-4" data-rte-content>
        <f:if condition="{bars}">
            <f:then>
                <div class="headline--3 headline--underlined">
                    {region.name -> f:format.raw()}
                </div>
            </f:then>
            <f:else>
                <h2 class="headline--has-subline">
                    <f:if condition="{region.season} == 's'">
                        <f:then>
                            <span class="subline">Urlaub im</span> Gebiet {region.name -> f:format.raw()}
                        </f:then>
                        <f:else>
                            <span class="subline">Skiurlaub im</span> Skigebiet {region.name -> f:format.raw()}
                        </f:else>
                    </f:if>
                </h2>
            </f:else>
        </f:if>
        <div class="grid grid-cols-3 gap-4 mb-4">
            <div class="flex items-center space-x-2"
                 data-cooltipz-dir="top-left" aria-label="Pisten" role="tooltip">
                <svg class="w-4 h-4 md:w-6 md:h-6">
                    <use href="#icon-ski"></use>
                </svg>
                <span class="text-sm md:text-base whitespace-nowrap">
                    {region.length}
                </span>
            </div>
            <div class="flex items-center space-x-2"
                 data-cooltipz-dir="top-left" aria-label="Höhe" role="tooltip">
                <svg class="w-4 h-4 md:w-6 md:h-6">
                    <use href="#icon-mountain"></use>
                </svg>
                <span class="text-sm md:text-base whitespace-nowrap">
                    {region.height}
                </span>
            </div>
            <f:if condition="{region.lifts}">
                <div class="flex items-center space-x-2"
                     data-cooltipz-dir="top-left" aria-label="Lifte" role="tooltip">
                    <svg class="w-4 h-4 md:w-6 md:h-6">
                        <use href="#icon-lift"></use>
                    </svg>
                    <span class="text-sm md:text-base whitespace-nowrap">
                        {region.lifts}
                    </span>
                </div>
            </f:if>
        </div>
        {region.skiArea -> f:format.html()}
        <f:if condition="{teasers}">
            <f:then>
                <a id="teasers" class="anchor"></a>
                <div class="splide"
                     data-controller="slider"
                     data-slider-preset-value="teasersEmbedded">
                    <div class="splide__track">
                        <ul class="splide__list">
                            <f:for each="{teasers}" as="teaser">
                                <li class="splide__slide">
                                    <f:render partial="Product/Teaser" section="Teaser" arguments="{teaser: teaser}"/>
                                </li>
                            </f:for>
                        </ul>
                    </div>
                </div>
                <f:if condition="{settings.showMoreLink}">
                    <p class="text-right">
                        <f:link.action pageUid="{settings.defaultStaticSearchPageUid}" class="button"
                                       action="staticresult" controller="Search"
                                       arguments="{encodedFilterSettings: '{filterSettings -> ep:filterSettingsEncoder()}'}"
                                       additionalAttributes="{rel: 'nofollow'}">
                            Alle anzeigen
                        </f:link.action>
                    </p>
                </f:if>
            </f:then>
            <f:else>
                <f:if condition="{region.images -> f:count()} > 0">
                    <f:render partial="ImageGallery" arguments="{images: region.images, id: 'region-{region.uid}', thumbnails: 1}"/>
                </f:if>
            </f:else>
        </f:if>
        <f:if condition="{region.skiAreaExtended}">{region.skiAreaExtended -> f:format.html()}</f:if>
    </div>
    <f:if condition="{teasers}">
        <f:if condition="{region.images -> f:count()} > 0">
            <f:render partial="ImageGallery" arguments="{images: region.images, id: 'region-{region.uid}', thumbnails: 1}"/>
        </f:if>
    </f:if>
    <div class="odd:bg-gray-50 p-4" data-rte-content>
        <f:if condition="{bars}">
            <f:then>
                <div class="headline--3 headline--underlined">
                    {f:if(condition: '{region.season} == "w"', then: 'Skipass', else: 'Highlights')} {region.name}
                </div>
            </f:then>
            <f:else>
                <h3>
                    {f:if(condition: '{region.season} == "w"', then: 'Skipass', else: 'Highlights')} {region.name}
                </h3>
            </f:else>
        </f:if>
        <f:if condition="{region.skiPass}">
            {region.skiPass -> f:format.html()}
        </f:if>
        <f:if condition="{region.description}">
            {region.description -> f:format.html()}
        </f:if>
    </div>
    <f:if condition="{region.news}">
        <div class="odd:bg-gray-50 p-4" data-rte-content>
            <f:if condition="{bars}">
                <f:then>
                    <div class="headline--3 headline--underlined">
                        Aktuelles {region.name}
                    </div>
                </f:then>
                <f:else>
                    <h2>
                        Aktuelles {region.name}
                    </h2>
                </f:else>
            </f:if>
            {region.news -> f:format.html()}
        </div>
    </f:if>
</div>