<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-imagesMap-imgBackground="{{imgBackground}}"
        data-imagesMap-modalTitle="{{modalTitle}}"
      ></span>
      {{/dataNode.images}}
    </div>
  </div>
  <div class="card">
    <div
      class="card-body"
      id="cardImgGal{{dataNode.id}}"
      tabindex="-1"
      data-imagesMap-modalIndex="0"
    >
      <div class="card-title">
        {{^singleImage}}
        <div
          class="btn-group btn-group-sm mr-2"
          role="group"
          aria-label="Navigation"
        >
          <button
            type="button"
            class="btn btn-secondary"
            onclick="imagesMapShowImg(document, '{{dataNode.id}}', Number.parseInt(document.getElementById('cardImgGal{{dataNode.id}}').getAttribute('data-imagesMap-modalIndex'))-1)"
          >
            &lt;
          </button>
          <button
            type="button"
            class="btn btn-secondary"
            onclick="imagesMapShowImg(document, '{{dataNode.id}}', Number.parseInt(document.getElementById('cardImgGal{{dataNode.id}}').getAttribute('data-imagesMap-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="imagesMapShowMap(document, '{{dataNode.id}}')"
          >
            <i class="fas fa-map-marked-alt"></i>
          </button>
          <button
            type="button"
            class="btn btn-secondary show-image"
            onclick="imagesMapShowImage(document, '{{dataNode.id}}')"
          >
            <i class="far fa-image"></i>
          </button>
        </div>
        <span class="card-title-text"></span>
      </div>

      <div class="card-text">
        <div class="card-text-full imgFullScreen"></div>
        <div
          class="card-text-full mapFullScreen"
          id="map_{{dataNode.id}}"
        ></div>
        <div
          class="card-text-nav card-text-nav-left text-dark bg-white"
          onclick="imagesMapShowImg(document, '{{dataNode.id}}', Number.parseInt(document.getElementById('cardImgGal{{dataNode.id}}').getAttribute('data-imagesMap-modalIndex'))-1)"
        >
          <i class="fas fa-chevron-left"></i>
        </div>
        <div
          class="card-text-nav card-text-nav-right text-dark bg-white"
          onclick="imagesMapShowImg(document, '{{dataNode.id}}', Number.parseInt(document.getElementById('cardImgGal{{dataNode.id}}').getAttribute('data-imagesMap-modalIndex'))+1)"
        >
          <i class="fas fa-chevron-right"></i>
        </div>
      </div>
    </div>
  </div>
</div>

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