{{#hasMap}}

<div class="position-relative">
  <div class="d-none">
    <div id="span-imag_{{dataNode.id}}">
      {{#dataNode.images}}
      <span
        id="image_{{dataNode.id}}_{{index}}"
        class="span-img-hide"
        data-imagesAndEventsMap-imgBackground="{{imgBackground}}"
        data-imagesAndEventsMap-modalTitle="{{modalTitle}}"
      ></span>
      {{/dataNode.images}}
    </div>
  </div>

  <div class="">
    <div
      class=""
      id="cardImgGal{{dataNode.id}}"
      tabindex="-1"
      data-imagesAndEventsMap-modalIndex="0"
    >
      <div class="card-map">
        <div class="card-map-full mapFullScreen" id="map_{{dataNode.id}}"></div>
        {{#hasImages}}
        <div class="card-map-full imgFullScreen imageDisplay d-none"></div>
        <div class="card-map-ctrl imageDisplay d-none">
          {{^singleImage}}
          <div
            class="btn-group btn-group-sm mr-2"
            role="group"
            aria-label="Navigation"
          >
            <button
              type="button"
              class="btn btn-secondary"
              onclick="imagesAndEventsMapShowImg(document, '{{dataNode.id}}', Number.parseInt(document.getElementById('cardImgGal{{dataNode.id}}').getAttribute('data-imagesAndEventsMap-modalIndex'))-1)"
            >
              &lt;
            </button>
            <button
              type="button"
              class="btn btn-secondary"
              onclick="imagesAndEventsMapShowImg(document, '{{dataNode.id}}', Number.parseInt(document.getElementById('cardImgGal{{dataNode.id}}').getAttribute('data-imagesAndEventsMap-modalIndex'))+1)"
            >
              &gt;
            </button>
          </div>
          {{/singleImage}}
          <div
            class="btn-group btn-group-sm switch-map-image"
            role="group"
            aria-label="Map"
          >
            <button
              type="button"
              class="btn btn-secondary show-map"
              onclick="imagesAndEventsMapShowMap(document, '{{dataNode.id}}')"
            >
              <i class="fas fa-map-marked-alt"></i>
            </button>
          </div>
          <button
            type="button"
            class="close"
            onclick="imagesAndEventsMapShowMap(document, '{{dataNode.id}}')"
            aria-label="Close"
          >
            <span aria-hidden="true">&times;</span>
          </button>
          <span class="card-title-text"></span>
        </div>
        <div
          class="card-map-nav card-map-nav-left text-dark bg-white"
          onclick="imagesAndEventsMapShowImg(document, '{{dataNode.id}}', Number.parseInt(document.getElementById('cardImgGal{{dataNode.id}}').getAttribute('data-imagesAndEventsMap-modalIndex'))-1)"
        >
          <i class="fas fa-chevron-left"></i>
        </div>
        <div
          class="card-map-nav card-map-nav-right text-dark bg-white"
          onclick="imagesAndEventsMapShowImg(document, '{{dataNode.id}}', Number.parseInt(document.getElementById('cardImgGal{{dataNode.id}}').getAttribute('data-imagesAndEventsMap-modalIndex'))+1)"
        >
          <i class="fas fa-chevron-right"></i>
        </div>
        {{/hasImages}}
      </div>
    </div>
  </div>
</div>

<script type="text/javascript">
  (async ()=>{
    document.querySelector(
      '#cardImgGal{{dataNode.id}}'
    )._map = await displayImagesAndEventsMap('{{dataNode.id}}',{
    positions: {{&jsonPositions}}
  });
  })()
</script>
{{/hasMap}} {{^hasMap}}

<div class="alert alert-danger" role="alert">Missing map positions.</div>
{{/hasMap}}
