{% set spacingSelect %}
{{ pimcore_checkbox("checkSpacing", {
"reload": true
}) }}
{% endset %}
{% set noSpacingTop = '' %}
{% set brickAnchorId = '' %}
{% if pimcore_checkbox('checkSpacing').isChecked() %}
{% set noSpacingTop = 'no-offset-top' %}
{% endif %}
{% set UID = uniqid() %}
{% if pimcore_input("brickAnchorIdInput") is not empty %}
{% set brickAnchorId = pimcore_input("brickAnchorIdInput")|lowercase %}
{% endif %}
{% if editmode %}
<div class="flex-col offset-bottom-single">
<div class="col xs-12 m-6 l-3">
<span class="hint">{{ 'ID für Anchorlinks vergeben' |trans }}</span>
{{ pimcore_input("brickAnchorIdInput") }}
</div>
<div class="col xs-12 m-6 l-3">
<div class="select-items">
<div class="hint">
{{ 'Kein Abstand nach oben?' |trans }}
</div>
{{ spacingSelect }}
</div>
</div>
</div>
{% endif %}
<div id="{{ brickAnchorId }}" class="section {{ noSpacingTop }}">
<div class="image-map-wrapper">
<div class="main-content flex-col">
<div class="image-map-container col">
{% if pimcore_image("imageMap").isEmpty() and editmode %}
<span class="hint">{{ 'Hintergrundbild festlegen' |trans }}</span>
{% endif %}
{% set iterateHotspot = 0 %}
{% if pimcore_image("imageMap").getHotspots() %}
{% for i in pimcore_image("imageMap").getHotspots() %}
{% set hotspot = pimcore_image("imageMap").getHotspots()[iterateHotspot] %}
<div class="hotspot"
style="top: {{ hotspot.top |number_format(2, '.', ',') }}%; left: {{ hotspot.left |number_format(2, '.', ',') }}%; width: {{ hotspot.width |number_format(2, '.', ',') }}%; height: {{ hotspot.height |number_format(2, '.', ',') }}%;">
{{ pimcore_link("hotspotLink" ~ iterateHotspot, {
"reload": true
}) }}
</div>
{% set iterateHotspot = iterateHotspot + 1 %}
{% endfor %}
{% endif %}
{{ pimcore_image("imageMap", {
"title": "Drag your image here",
"thumbnail": "imageMap" ~ bundleName,
"reload": true
}) }}
</div>
</div>
</div>
</div>