{namespace ms=Mediatesystems\UmjSitepackage\ViewHelpers}


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


    <div class="d02images {f:if(condition: '!{data.tx_mask_use_primary_color}', then: 'standard-color')}" id="c{data.uid}">
        <div class="d02images-inner ">
            <div class="d02images-inner-wrap">
                <div class="{f:if(condition: '{data.tx_mask_d01_images_image_border} == 1', then: 'd02images-background-wrap', else: '')}">
                    <div id="imagemap-{image.properties.uid}" class="openseadragon-viewer" 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>

                    <div class="d02images-textoverlay" id="textoverlay-imagemap-{image.properties.uid}" style="display:none;">
                        <div class="d02images-textoverlay-inner">
                            <!-- Placeholder for JS Logic -->
                        </div>
                    </div>
                    <div class="{f:if(condition: '{data.tx_mask_d01_images_image_border} == 0', then: 'd02images-text-wrapper', else: '')}">
                        <ms:imageCredit uid="{image.properties.uid}" value="{f:translate(key: 'tx_umjsitepackage.imagecredits', extensionName: 'umj_sitepackage')}"/>
                    </div>
                </div>
            </div>



            <div class="d02images-controlls" id="d02images-controlls-imagemap-{image.properties.uid}" style="display:none;">
                <div role="button" aria-label="Vorheriger Zoom Punkt" class="btn btn-primary" id="prevPoint-imagemap-{image.properties.uid}">
                    {ms:button(type: 'rounded',direction:"left",border:1)}
                </div>
                <div role="button" aria-label="Schließen" class="btn btn-primary" id="goHome-imagemap-{image.properties.uid}">
                    {ms:button(type: 'close')}
                </div>
                <div role="button" aria-label="Nächster Zoom Punkt" class="btn btn-primary" id="nextPoint-imagemap-{image.properties.uid}">
                    {ms:button(type: 'rounded',direction:"right",border:1)}
                </div>
            </div>



        </div>
    </div>

</f:if>