{namespace neos=Neos\Neos\ViewHelpers}
{namespace vh=Newland\NeosViewHelpers\ViewHelpers}
{namespace poi=Newland\Toubiz\Poi\Neos\ViewHelpers}
{namespace common=Newland\Toubiz\Common\Neos\ViewHelpers}

<f:comment>
    <!--
        This partial is responsible for rendering an article as list item,
        e.g. in a search result list.
    -->
</f:comment>


<f:if condition="{article.isAttraction}">
    <li class="tb-results-list__item">
        <vh:render section="ListItem" arguments="{_all}" />
    </li>
</f:if>

<f:if condition="{article.isGastronomy}">
    <li class="tb-results-list__item">
        <vh:render section="ListItem" arguments="{_all}" />
    </li>
</f:if>

<f:if condition="{article.isTour}">
    <li class="tb-results-list__item">
        <vh:render section="ListItem" arguments="{_all}" />
    </li>
</f:if>

<f:if condition="{article.isLodging}">
    <li class="tb-results-list__item">
        <vh:render section="ListItem" arguments="{_all}" />
    </li>
</f:if>

<f:if condition="{article.isDirectMarketer}">
    <li class="tb-results-list__item">
        <vh:render section="ListItem" arguments="{_all}" />
    </li>
</f:if>

<f:if condition="{article.isCongressLocation}">
    <li class="tb-results-list__item">
        <vh:render section="ListItem" arguments="{_all}" />
    </li>
</f:if>

<f:if condition="{article.isCity}">
    <li class="tb-results-list__item">
        <vh:render section="ListItem" arguments="{_all}" />
    </li>
</f:if>

<f:section name="ListItem">
    <poi:link.article article="{article}" class="tb-teaser tb-teaser--layout-horizontal">
        <vh:render section="ListItemContent" arguments="{_all}" />
    </poi:link.article>
    <vh:render section="SplitscreenInformation" arguments="{_all}" />
</f:section>

<f:section name="ListItemContent">
    <common:slot.render slot="aboveSplitScreenItem" context="{ article: article }" />
    <div class="tb-teaser__image-wrapper">
        <f:if condition="{article.mainMedium}">
            <f:then>
                <img
                    data-src="{article.mainMedium.previewUri}"
                    alt="{article.mainMedium.title}"
                    class="tb-teaser__image lazyload"
                    {f:if(condition: article.mainMedium.focusPoint, then: 'style="object-position: {article.mainMedium.focusPoint}"')}
                />
            </f:then>
            <f:else>
                <img
                    data-src="https://mein.toubiz.de/api/v1/file/placeholder/preview?fm=image/jpeg&w=400"
                    alt=""
                    class="tb-teaser__image lazyload"
                />
            </f:else>
        </f:if>
    </div>

    <f:if condition="{article.isAttraction}">
        <vh:render partial="PointOfInterests/List/Article/Attraction" arguments="{article: article}" />
    </f:if>

    <f:if condition="{article.isGastronomy}">
        <vh:render partial="PointOfInterests/List/Article/Gastronomy" arguments="{article: article}" />
    </f:if>

    <f:if condition="{article.isTour}">
        <vh:render partial="PointOfInterests/List/Article/Tour" arguments="{article: article}" />
    </f:if>

    <f:if condition="{article.isLodging}">
        <vh:render partial="PointOfInterests/List/Article/Lodging" arguments="{article: article}" />
    </f:if>

    <f:if condition="{article.isDirectMarketer}">
        <vh:render partial="PointOfInterests/List/Article/DirectMarketer" arguments="{article: article}" />
    </f:if>

    <f:if condition="{article.isCongressLocation}">
        <vh:render partial="PointOfInterests/List/Article/CongressLocation" arguments="{article: article}" />
    </f:if>

    <f:if condition="{article.isCity}">
        <vh:render partial="PointOfInterests/List/Article/City" arguments="{article: article}" />
    </f:if>

    <common:slot.render slot="belowSplitScreenItem" context="{ article: article }" />
</f:section>

<f:section name="SplitscreenInformation">
    <poi:splitscreen.configuration mainType="{article.mainType}" configurationAs="split">
        <f:if condition="{split.enabled} && {article.hasGeocoordinates}">
            <template
                style="display: none"
                data-toubiz-results.splitscreen.marker
                data-toubiz-results.splitscreen.marker.latitude="{article.latitude}"
                data-toubiz-results.splitscreen.marker.longitude="{article.longitude}"
                data-toubiz-results.splitscreen.marker.icon-url="{split.marker.iconUrl}"
                data-toubiz-results.splitscreen.marker.tour="(json) {article.flatAttributes.geometry.0 -> f:format.json()}"
            >
                <div class="tb-map-info-window-wrapper">
                    <div class="tb-map-info-window">
                        <button
                            class="tb-map-info-window__close-button"
                            data-toubiz-map-info-window-close-button>

                            <svg class="c-icon" aria-hidden="true">
                                <use xlink:href="#tb-map-close" />
                            </svg>
                        </button>

                        <f:if condition="{article.mainMedium}">
                            <div class="tb-map-info-window__image-wrapper">
                                <img
                                    src="{article.mainMedium.previewUri}"
                                    alt="{article.mainMedium.title}"
                                />
                            </div>
                        </f:if>

                        <div class="tb-map-info-window__text">
                            <h2 class="tb-map-info-window__title">{article.name}</h2>
                            <div class="tb-map-info-window__attribute">
                                {article.categoriesSorted.0.title}
                            </div>
                        </div>

                        <div class="tb-map-info-window__button-wrapper">
                            <poi:link.article article="{article}" class="tb-map-info-window__button">
                                <f:translate
                                    id="marker.infoWindow.moreLinkLabel"
                                    package="Newland.Toubiz.Map.Neos"
                                    source="Views/Map/Show" />

                            </poi:link.article>
                        </div>
                    </div>
                </div>
            </template>
        </f:if>
    </poi:splitscreen.configuration>
</f:section>
