{namespace ep=EP\EpTheme\ViewHelpers}
<f:variable name="hotelTitle">{hotel.name -> f:format.raw()}{f:if(condition: hotel.categoryLabel, then: ' ({hotel.categoryLabel -> f:format.raw()})')}</f:variable>
<div class="space-y-2">
    <div class="odd:bg-zinc-50 p-4" data-rte-content>
        <f:if condition="{bars}">
            <f:then>
                <div class="headline--3 headline--underlined">
                    {hotelTitle}
                </div>
            </f:then>
            <f:else>
                <h2>
                    {hotelTitle}
                </h2>
            </f:else>
        </f:if>
        <f:if condition="{hotel.icons}">
            <ul class="grid grid-cols-2 sm:grid-cols-3 gap-x-4 gap-y-2 !list-none !pl-0 mb-4">
                <f:for each="{hotel.icons}" as="item">
                    <li class="flex items-center space-x-2">
                        {ep:icon(icon: item.icon, class: 'w-5 h-5 md:w-6 md:h-6 shrink-0 text-ep-primary')}
                        <span class="text-sm md:text-base">{item.label}</span>
                    </li>
                </f:for>
            </ul>
        </f:if>
        {hotel.description -> f:format.html()}
    </div>
    <f:if condition="{teasers}">
        <f:then>
            <a id="teasers" class="anchor"></a>
            <div class="bg-zinc-50 p-4 mb-4"
                 data-controller="teasergrid"
                 data-teasergrid-grid-class="grid-cols-2"
                 data-teasergrid-disabled-value="false">
                <f:if condition="{teasers -> f:count() <= 2}">
                    <f:then>
                        <div class="grid gap-4 md:gap-8">
                            <f:for each="{teasers}" as="teaser" iteration="iteration">
                                <f:render partial="Product/Teaser" section="Teaser" arguments="{
                                    landscape: 1,
                                    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>
                    </f:then>
                    <f:else>
                        <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">
                                {ep:icon(icon: 'teaser-grid', class: 'w-5 h-5 text-ep-primary')}
                            </button>
                            <button type="button"
                                    aria-label="vergrößerte Ansicht"
                                    data-action="teasergrid#block"
                                    data-teasergrid-target="button">
                                {ep:icon(icon: 'teaser-single', class: 'w-5 h-5 text-ep-primary')}
                            </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>
                    </f:else>
                </f:if>
                <f:if condition="{teasers -> f:count()} > 3">
                    <f:if condition="{settings.hideMoreLink}">
                        <f:else>
                            <div class="text-right mt-4">
                                <f:link.typolink class="button bg-button"
                                                 parameter="{settings.defaultSearchPageUid}"
                                                 additionalParams="f={filterSettings -> ep:filterSettingsEncoder()}">
                                    Alle anzeigen
                                </f:link.typolink>
                            </div>
                        </f:else>
                    </f:if>
                </f:if>
            </div>
        </f:then>
        <f:else>
            <f:if condition="{showNonBookableHint}">
                <div class="alert alert-info">
                    <p>Gerade noch kein Angebot buchbar? Dann frag doch schon mal an: <f:link.typolink parameter="{settings.defaultContactFormPageUid}">hier geht es zum Kontaktformular</f:link.typolink>.</p>
                </div>
            </f:if>
        </f:else>
    </f:if>
    <f:if condition="{hotel.images -> f:count()} > 0">
        <f:render partial="ImageGallery" arguments="{images: hotel.images, id: 'hotel-{hotel.uid}', thumbnails: 1}"/>
    </f:if>
    <div class="odd:bg-zinc-50 p-4" data-rte-content>
        <f:if condition="{bars}">
            <f:then>
                <div class="headline--3 headline--underlined">
                    Ausstattung
                </div>
            </f:then>
            <f:else>
                <h2>
                    Ausstattung
                </h2>
            </f:else>
        </f:if>
        {hotel.features -> f:format.html()}
    </div>
    <f:if condition="{hotel.isApartment} || hotel.isHolidayFlat || hotel.isOther">
        <div class="odd:bg-zinc-50 p-4" data-rte-content>
            <f:if condition="{hotel.isApartment}">
                <f:if condition="{bars}">
                    <f:then>
                        <div class="headline--3 headline--underlined">
                            Apartments
                        </div>
                    </f:then>
                    <f:else>
                        <h2>Apartments</h2>
                    </f:else>
                </f:if>
            </f:if>
            <f:if condition="{hotel.isHolidayFlat}">
                <f:if condition="{bars}">
                    <f:then>
                        <div class="headline--3 headline--underlined">
                            Ferienwohnungen
                        </div>
                    </f:then>
                    <f:else>
                        <h2>
                            Ferienwohnungen
                        </h2>
                    </f:else>
                </f:if>
            </f:if>
            <f:if condition="{hotel.isOther}">
                <f:if condition="{bars}">
                    <f:then>
                        <div class="headline--3 headline--underlined">
                            Zimmerarten
                        </div>
                    </f:then>
                    <f:else>
                        <h2>
                            Zimmerarten
                        </h2>
                    </f:else>
                </f:if>
            </f:if>
            {hotel.roomTypes -> f:format.html()}
        </div>
    </f:if>
    <f:if condition="{hotel.additionalInformation}">
        <div class="odd:bg-zinc-50 p-4" data-rte-content>
            <f:if condition="{bars}">
                <f:then>
                    <div class="headline--3 headline--underlined">
                        Zusatzinformationen
                    </div>
                </f:then>
                <f:else>
                    <h2>
                        Zusatzinformationen
                    </h2>
                </f:else>
            </f:if>
            {hotel.additionalInformation -> f:format.html()}
        </div>
    </f:if>
</div>