{namespace vh=Newland\NeosViewHelpers\ViewHelpers}

<div
    class="c-hot-spot-item"
    style="top: {topPosition}; left: {leftPosition};"
    data-hot-spot-item
    data-is-open="false"
>
    <button
        class="c-hot-spot-item__icon-button"
        data-hot-spot-item-trigger
    >
        <f:if condition="{iconOverride}">
            <f:then>
                <span
                    class="c-hot-spot-item__icon c-hot-spot-item__icon--open"
                    data-hot-spot-item-open-icon
                >
                    {vh:media.inline(image: iconOverride, class: 'c-hot-spot-item__icon') -> f:format.raw()}
                </span>
            </f:then>
            <f:else>
                <f:if condition="{icon}">
                    <span
                        class="c-hot-spot-item__icon c-hot-spot-item__icon--open"
                        data-hot-spot-item-open-icon
                    >
                        {vh:media.inline(image: icon, class: 'c-hot-spot-item__icon') -> f:format.raw()}
                    </span>
                </f:if>
            </f:else>

            <span
                class="c-hot-spot-item__icon c-hot-spot-item__icon--close"
                data-hot-spot-item-close-icon
            >
                <svg aria-hidden="true" focusable="false">
                    <use xlink:href="#icon-cross-solid-spaced" />
                </svg>
            </span>
        </f:if>
    </button>
    <div
        class="c-hot-spot-item-popover"
        data-hot-spot-item-popover
    >
        <f:if condition="{article}">
            <f:then>
                <f:render section="articleTeaser" arguments="{_all}" />
            </f:then>
            <f:else>
                <f:render section="customTeaser" arguments="{_all}" />
            </f:else>
        </f:if>
    </div>
</div>


<f:section name="articleTeaser">
    <div class="c-hot-spot-item-popover__image">
        <img
            src="{article.media.0.sourceUri}"
            alt="{article.media.0.title}"
            loading="lazy"
        />
    </div>
    <div class="c-neos-text">
        <h4 class="c-hot-spot-item-popover__headline">
            {article.name -> f:format.raw()}
        </h4>
        <p class="c-hot-spot-item-popover__text">
            {article.abstract -> f:format.raw()}
        </p>
        <f:if condition="{articleUrl}">
            <a
                href="{articleUrl}"
                class="c-hot-spot-item-popover__link"
                {f:if(condition: openLinkInNewWindow, then: 'target="_blank" rel="noopener noreferrer"')}
            >
                mehr erfahren
            </a>
        </f:if>
    </div>
    <div
        class="c-hot-spot-item__arrow"
        data-hot-spot-item-arrow
    ></div>
</f:section>

<f:section name="customTeaser">
    <div class="c-hot-spot-item-popover__image">
        <img src="{neos.media:uri.image(image: image, maximumWidth: 120)}"
            alt="{image.title}"
            loading="lazy"
        />
    </div>
    <div class="c-neos-text">
        <h4 class="c-hot-spot-item-popover__headline">
            {title}
        </h4>
        <p class="c-hot-spot-item-popover__text">
            {text}
        </p>
        <f:if condition="{link}">
            <a
                href="{link}"
                class="c-hot-spot-item-popover__link"
                {f:if(condition: openLinkInNewWindow, then: 'target="_blank" rel="noopener noreferrer"')}
            >
                mehr erfahren
            </a>
        </f:if>
    </div>
    <div
        class="c-hot-spot-item__arrow"
        data-hot-spot-item-arrow
    ></div>
</f:section>