{namespace v=FluidTYPO3\Vhs\ViewHelpers}
{namespace ep=EP\EpTheme\ViewHelpers}
<div class="bg-cover bg-center bg-header-season-{product.region.season} mb-8">
    <div class="md:container">
        <div class="md:flex md:flex-row-reverse md:items-stretch">
            <div class="md:w-5/12 md:py-4 splide" data-slider="content">
                <div class="splide__track">
                    <ul class="splide__list">
                        <f:for each="{product.images}" as="image" iteration="iteration">
                            <li class="splide__slide h-64 md:h-auto">
                                <picture class="w-full h-full">
                                    <source srcset="{f:uri.image(image: image, width: '585')}" media="(min-width: 768px)">
                                    <source srcset="{f:uri.image(image: image, width: '400')}" media="(max-width: 767px)">
                                    <img class="block w-full h-full object-cover"
                                         src="{f:uri.image(image: image, width: '400')}"
                                         alt="{image.alternative}">
                                </picture>
                            </li>
                        </f:for>
                    </ul>
                </div>
                <div class="splide__arrows absolute z-10 top-1/2 left-0 transform -translate-y-1/2 w-full flex justify-between md:hidden">
                    <button class="splide__arrow splide__arrow--prev">
                        <svg class="w-10 h-10 text-ep-secondary pointer-events-none">
                            <use href="#icon-chevron-left"></use>
                        </svg>
                    </button>
                    <button class="splide__arrow splide__arrow--next">
                        <svg class="w-10 h-10 text-ep-secondary pointer-events-none">
                            <use href="#icon-chevron-right"></use>
                        </svg>
                    </button>
                </div>
            </div>
            <div class="hidden md:block md:w-2/12 relative">
                <f:if condition="{settings.showSkipassBadge} && {product.skipassIncluded}">
                    <f:link.typolink parameter="{settings.skipassPageUid}"
                                     title="Skipass inklusive">
                        <f:image src="EXT:ep_theme/Resources/Public/images/badge_skipass.png"
                                 class="block w-20 xl:w-auto h-auto mx-auto"
                                 alt="Skipass inklusive" />
                    </f:link.typolink>
                </f:if>
                <f:if condition="{product.badge}">
                    <f:link.typolink parameter="{product.badge.link}"
                                     title="{product.badge.title}"
                                     class="absolute top-0 left-0">
                        <div class="custom-badge">
                            <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet"
                                 viewBox="0 0 200 200" class="custom-badge__background">
                                <g>
                                    <circle id="bgouter" cx="100" cy="100" r="100"></circle>
                                    <circle id="bginner" cx="100" cy="100" r="70"></circle>
                                </g>
                            </svg>
                            <div class="custom-badge__content">
                                <span class="custom-badge__title">{product.badge.title -> f:format.raw()}</span>
                                <span class="custom-badge__subtitle">{product.badge.subtitle -> f:format.raw()}</span>
                            </div>
                        </div>
                    </f:link.typolink>
                </f:if>
            </div>
            <div class="px-4 md:px-0 md:w-5/12 md:self-center">
                <div class="relative z-10 max-w-md mx-auto shadow-md -mt-16 md:mt-0 mx-0">
                    <div class="bg-concept-{product.concept.code} text-white text-xl px-4 py-2 leading-none">
                        {product.concept.name}
                    </div>
                    <div class="bg-white p-4">
                        <span class="headline--3">
                            {product.name}{f:if(condition: product.subline, then: ' {product.subline}')}
                        </span>
                        <span class="block">
                            {product.region.name}
                        </span>
                        <div class="flex space-x-4 mt-4">
                            <svg class="w-8 h-6 md:w-10 md:h-8">
                                <use href="#icon-flag-{product.country.code -> f:format.case(mode: 'lower')}"></use>
                            </svg>
                            <f:if condition="{hotel}">
                                <f:then>
                                    <a href="{ep:gmapsUrl(hotel: hotel)}" target="_blank" class="block bg-ep-primary-light px-2 py-1">
                                        <svg class="w-4 h-4 md:w-6 md:h-6 text-white">
                                            <use href="#icon-location-marker"></use>
                                        </svg>
                                    </a>
                                </f:then>
                                <f:else>
                                    <a href="{ep:gmapsUrl(region: product.region)}" target="_blank" class="">
                                        <svg class="w-6 h-6">
                                            <use href="#icon-location-marker"></use>
                                        </svg>
                                    </a>
                                </f:else>
                            </f:if>
                        </div>
                    </div>
                </div>
                <f:if condition="{referringUrl}">
                    <div class="ep-backlink">
                        <a href="{referringUrl}" class="button button--small">{backlinkLabel}</a>
                    </div>
                </f:if>
            </div>
        </div>
    </div>
</div>