<div class="position-relative">
  <div class="row d-flex justify-content-center" id="row-imag_{{dataNode.id}}">
    {{#dataNode.images}}
    <div class="{{colClass}} p-0 d-flex align-items-center">
      <div class="m-1 img-thumbnail">
        <div class="card imgThumb">
          <img
            id="thumb_{{dataNode.id}}_{{index}}"
            onclick="thumbsShowImg(document, '{{dataNode.id}}', {{index}})"
            data-toggle="modal"
            data-target="#modalImgGal{{dataNode.id}}"
            class="card-img-top"
            src="{{imgSrc}}"
            alt="{{treeNode.name}}"
            data-thumbs-imgBackground="{{imgBackground}}"
            data-thumbs-modalTitle="{{modalTitle}}"
          />
          <img src="{{thumbSrc}}" style="display: none" />
        </div>
      </div>
    </div>
    {{/dataNode.images}}
  </div>
</div>
<div
  id="modalImgGal{{dataNode.id}}"
  class="modal fade"
  tabindex="-1"
  role="dialog"
  aria-labelledby="myLargeModalLabel"
  aria-hidden="true"
  data-thumbs-modalIndex="0"
>
  <div class="modal-dialog modal-dialog-centered modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        {{^singleImage}}
        <div
          class="btn-group btn-group-sm mr-2"
          role="group"
          aria-label="Navigation"
        >
          <button
            type="button"
            class="btn btn-secondary"
            onclick="thumbsShowImg(document, '{{dataNode.id}}', Number.parseInt(document.getElementById('modalImgGal{{dataNode.id}}').getAttribute('data-thumbs-modalIndex'))-1)"
          >
            &lt;
          </button>
          <button
            type="button"
            class="btn btn-secondary"
            onclick="thumbsShowImg(document, '{{dataNode.id}}', Number.parseInt(document.getElementById('modalImgGal{{dataNode.id}}').getAttribute('data-thumbs-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="thumbsShowMap(document, '{{dataNode.id}}')"
          >
            <i class="fas fa-map-marked-alt"></i>
          </button>
          <button
            type="button"
            class="btn btn-secondary show-image"
            onclick="thumbsShowImage(document, '{{dataNode.id}}')"
          >
            <i class="far fa-image"></i>
          </button>
        </div>
        <h5 class="modal-title mx-4"></h5>
        <button
          type="button"
          class="close"
          data-dismiss="modal"
          aria-label="Close"
        >
          <span aria-hidden="true">&times;</span>
        </button>
      </div>

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

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