{namespace v=FluidTYPO3\Vhs\ViewHelpers}
{namespace ep=EP\EpTheme\ViewHelpers}
<div class="container ep-product-detail product-header">
    <div class="ep-product-detail-bg season-{product.region.season}"></div>
    <div class="col-sm-6 col-sm-offset-1 pull-right">
        <div class="slider slider--product">
            <div class="slider__items">
                <f:for each="{product.images}" as="image" iteration="iteration">
                    <div class="slider__item slider__item--product responsive-bg"
                         style="background-image: url({f:uri.image(image: image, width: '400')})"
                         data-mobile="{f:uri.image(image: image, width: '400')}"
                         data-desktop="{f:uri.image(image: image, width: '585')}">
                    </div>
                </f:for>
            </div>
        </div>
    </div>
    <div class="col-sm-4 pull-left product-header__title">
        <div class="head">
            {product.concept.name}
        </div>
        <div class="content{f:if(condition: '{settings.showSkipassBadge} && {product.skipassIncluded}', then: ' has-badge')}">
            <span class="headline headline--3">{product.name}{f:if(condition: product.subline, then: ' {product.subline}')}</span>
            <span>{product.region.name}</span>
        </div>
        <f:image class="flag" src="{ep:flagiconSource(countryCode: product.country.code)}" alt="{product.country.name}"/>
	    <f:if condition="{hotel}">
		    <f:then>
			    <a href="{ep:gmapsUrl(hotel: hotel)}" target="_blank" class="ep-property ep-marker">
                    <i class="fa fa-map-marker" aria-hidden="true"></i>
                </a>
		    </f:then>
		    <f:else>
			    <a href="{ep:gmapsUrl(region: product.region)}" target="_blank" class="ep-property ep-marker">
                    <i class="fa fa-map-marker" aria-hidden="true"></i>
                </a>
		    </f:else>
	    </f:if>
        <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"
                         alt="Skipass inklusive" class="product-header__badge product-header__badge--skipass" />
            </f:link.typolink>
        </f:if>
        <f:if condition="{product.badge}">
            <f:link.typolink parameter="{product.badge.link}" title="{product.badge.title}">
                <div class="product-header__badge product-header__badge--custom 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>
    <back-link></back-link>
    {v:render.template(file: 'EXT:ep_theme/Resources/Private/Partials/Breadcrumb.html')}
</div>