{namespace ep=EP\EpTheme\ViewHelpers}
<div class="space-y-2">
    <div class="odd:bg-zinc-50 p-4">
        <f:if condition="{bars}">
            <f:then>
                <div class="headline--3 headline--underlined">
                    {city.name}
                </div>
            </f:then>
            <f:else>
                <h2>
                    Ort
                </h2>
            </f:else>
        </f:if>
        <div data-rte-content>
            {city.description -> f:format.html()}
        </div>
    </div>
    <f:if condition="{teasers}">
        <div class="bg-zinc-50 p-4 mb-4">
            <a id="teasers" class="anchor"></a>
            <div data-controller="teasergrid"
                 data-teasergrid-grid-class="grid-cols-2"
                 data-teasergrid-disabled-value="false">
                <div class="flex items-center space-x-1 mb-2 sm:hidden">
                    <button type="button"
                            class="opacity-50"
                            aria-label="kompakte Ansicht"
                            data-action="teasergrid#grid"
                            data-teasergrid-target="button">
                        <svg class="w-5 h-5 text-ep-primary">
                            <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-teaser-grid"></use>
                        </svg>
                    </button>
                    <button type="button"
                            aria-label="vergrößerte Ansicht"
                            data-action="teasergrid#block"
                            data-teasergrid-target="button">
                        <svg class="w-5 h-5 text-ep-primary">
                            <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-teaser-single"></use>
                        </svg>
                    </button>
                </div>
                <div class="grid grid-cols-2 xl:grid-cols-3 gap-4 md:gap-8"
                     data-teasergrid-target="container">
                    <f:for each="{teasers}" as="teaser" iteration="iteration">
                        <f:render partial="Product/Teaser" section="Teaser" arguments="{
                                                concept: teaser.concept,
                                                hotel: teaser.hotel,
                                                product: teaser.product,
                                                country: teaser.country,
                                                region: teaser.region,
                                                productImage: teaser.product.images.original.0,
                                                nights: teaser.nights,
                                                board: teaser.board,
                                                minPrice: teaser.minPrice,
                                                daytrip: teaser.daytrip,
                                                season: teaser.season,
                                                forceHotelUid: teaser.forceHotelUid,
                                                dateFrom: teaser.minDateStart,
                                                dateTo: teaser.maxDateEnd,
                                                index: iteration.index
                                            }"/>
                    </f:for>
                </div>
            </div>
            <f:if condition="{settings.hideMoreLink}">
                <f:else>
                    <f:link.typolink class="button bg-button ml-4"
                                     parameter="{settings.defaultSearchPageUid}"
                                     additionalParams="f={filterSettings -> ep:filterSettingsEncoder()}"
                                     additionalAttributes="{rel: 'nofollow'}">
                        Alle anzeigen
                    </f:link.typolink>
                </f:else>
            </f:if>
        </div>
    </f:if>
    <f:if condition="{city.descriptionExtended}">
        <div class="odd:bg-zinc-50 p-4" data-rte-content>
            {city.descriptionExtended -> f:format.html()}
        </div>
    </f:if>
    <f:if condition="{city.images -> f:count()} > 0">
        <f:render partial="ImageGallery" arguments="{images: city.images, id: 'city-{city.uid}', thumbnails: 1}"/>
    </f:if>
    <f:if condition="{city.party}">
        <div class="odd:bg-zinc-50 p-4" data-rte-content>
            <f:if condition="{bars}">
                <f:then>
                    <div class="headline--3 headline--underlined">
                        Party
                    </div>
                </f:then>
                <f:else>
                    <h2>
                        Party
                    </h2>
                </f:else>
            </f:if>
            {city.party -> f:format.html()}
        </div>
    </f:if>
    <f:if condition="{city.leisure}">
        <div class="odd:bg-zinc-50 p-4" data-rte-content>
            <f:if condition="{bars}">
                <f:then>
                    <div class="headline--3 headline--underlined">
                        Freizeitangebot
                    </div>
                </f:then>
                <f:else>
                    <h2>
                        Freizeitangebot
                    </h2>
                </f:else>
            </f:if>
            {city.leisure -> f:format.html()}
        </div>
    </f:if>
</div>