{namespace ms=Mediatesystems\UmjSitepackage\ViewHelpers}


<f:if condition="{tileResponse.status} == 'ok'" >
    <f:then>
        <div style="display:none;">
            <!-- For ImageCredit Logic needed -->
            <ms:image class="d03images-img" image="{image}" cropVariant="mask_d01_images" width="40"/>
        </div>


        <div class="d03images {f:if(condition: '!{data.tx_mask_use_primary_color}', then: 'standard-color')}" id="c{data.uid}" data-uid="{data.uid}">
            <div class="d03images-inner ">
                <div class="d03images-inner-wrap">
                    <div class="{f:if(condition: '{data.tx_mask_d01_images_image_border} == 1', then: 'd03images-background-wrap', else: '')}">
                        <div id="imagemap-{image.properties.uid}" class="openseadragon-viewer-3d" style="height: 70vh;"
                             data-width="{image.properties.width}"
                             data-height="{image.properties.height}"
                             data-tilesurl="/{tileResponse.data.output._files}"
                             data-dzi="/{tileResponse.data.output.DZI}"
                             data-focuspoints="{points -> f:format.json()}"
                        >
                            <div class="d03-scroll-overlay"><p>{data.tx_d03_overlay_text}</p></div>
                        </div>

                        <div class="{f:if(condition: '{data.tx_mask_d01_images_image_border} == 0', then: 'd03images-text-wrapper', else: '')}">
                            <ms:imageCredit uid="{image.properties.uid}" value="{f:translate(key: 'tx_umjsitepackage.imagecredits', extensionName: 'umj_sitepackage')}"/>
                        </div>
                    </div>
                </div>

                <aside class="d03map-textpopup black-white" id="textoverlay-imagemap-{image.properties.uid}">
                    <div class="d03images-textoverlay-inner">
                        <f:for each="{points}" as="point" key="index">
                            <f:variable name="pointNumber">{index + 1}</f:variable>
                            <f:if condition="{d03_points_data_grouped.{pointNumber}}">
                                <f:then>
                                    <div class="{point.name}_{pointNumber}">
                                        <div class="d03-data-header">
                                            <div class="d03-data-header-row">
                                                <div class="d03-data-overlay-title">
                                                    <p>{point.displayName}</p>
                                                </div>
                                                <div class="d03-close-overlay" role="button" aria-label="Schließen" onclick="closeImageMapOverlay(this)">
                                                    <div class=" closeButton">
                                                        {ms:button(type: 'close')}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="line"></div>
                                        <div class="d03-overlay-content">
                                            <f:for each="{d03_points_data_grouped.{pointNumber}}" as="pointContentData">
                                                <f:if condition="{pointContentData.d03_text}">
                                                    <div class="d03-overlay-text">
                                                        {pointContentData.d03_text -> f:format.raw()}
                                                    </div>
                                                </f:if>
                                                <f:if condition="{pointContentData.image.0}">
                                                    <div class="d03-overlay-image">
                                                        <f:for each="{pointContentData.image}" as="image">
                                                            <ms:image image="{image}" width="420"/>
                                                        </f:for>
                                                    </div>
                                                </f:if>
                                                <f:if condition="{pointContentData.d03_button_text} && {pointContentData.d03_button_link}">
                                                    <div class="d03-overlay-button">
                                                        <f:link.typolink class="btn btn-primary border-gray" parameter="{pointContentData.d03_button_link}">
                                                            {ms:button(type: 'text',text: pointContentData.d03_button_text,direction:"right",border:0)}
                                                        </f:link.typolink>
                                                    </div>
                                                </f:if>
                                            </f:for>
                                        </div>

                                    </div>
                                </f:then>
                            </f:if>
                        </f:for>
                        <!-- Placeholder for JS Logic -->
                    </div>
                </aside>

            </div>
        </div>
    </f:then>
</f:if>