{{#> modal-shell modalId="slide-preview-modal" modalLabelId="slide-preview-modal-label" modalDialogClass="modal-xl modal-dialog-centered"}}
  <div class="modal-header">
    <h2 class="modal-title fs-5" id="slide-preview-modal-label">Slide preview</h2>
    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  </div>
  <div class="modal-body p-0">
    <img class="slide-list-preview-frame" alt="Slide preview" data-slide-preview-image hidden />
    <p class="empty m-3" data-slide-preview-empty hidden>Preview unavailable</p>
  </div>
{{/modal-shell}}

<script>
  (function () {
    var modal = document.getElementById('slide-preview-modal');
    if (!modal) {
      return;
    }

    var image = modal.querySelector('[data-slide-preview-image]');
    var empty = modal.querySelector('[data-slide-preview-empty]');
    var title = modal.querySelector('#slide-preview-modal-label');
    var currentAspectRatio = 16 / 9;
    var thumbnailUrl = '';

    image.addEventListener('error', function () {
      if (thumbnailUrl && image.getAttribute('src') !== thumbnailUrl) {
        image.src = thumbnailUrl;
      } else {
        image.hidden = true;
        image.removeAttribute('src');
        empty.hidden = false;
      }
    });

    function updateModalSize() {
      var maxWidth = Math.min(window.innerWidth * 0.9, 1140);
      var maxHeight = window.innerHeight * 0.72;
      var width = Math.min(maxWidth, maxHeight * currentAspectRatio);
      modal.style.setProperty('--slide-preview-aspect-ratio', String(currentAspectRatio));
      modal.style.setProperty('--slide-preview-modal-width', Math.round(width) + 'px');
    }

    modal.addEventListener('show.bs.modal', function (event) {
      var trigger = event.relatedTarget;
      if (!trigger || !image) {
        return;
      }
      var canvasWidth = Number(trigger.getAttribute('data-canvas-width'));
      var canvasHeight = Number(trigger.getAttribute('data-canvas-height'));
      currentAspectRatio = canvasWidth > 0 && canvasHeight > 0 ? canvasWidth / canvasHeight : 16 / 9;
      updateModalSize();
      thumbnailUrl = trigger.getAttribute('data-slide-preview-url') || '';
      image.hidden = !thumbnailUrl;
      empty.hidden = Boolean(thumbnailUrl);
      image.alt = trigger.getAttribute('data-slide-preview-title') || 'Slide preview';
      if (thumbnailUrl) {
        image.src = thumbnailUrl.replace(/\.png$/i, '.full.png');
      }
      if (title) {
        title.textContent = 'Slide preview: ' + (trigger.getAttribute('data-slide-preview-title') || '');
      }
    });
    modal.addEventListener('hidden.bs.modal', function () {
      thumbnailUrl = '';
      image.hidden = true;
      image.removeAttribute('src');
      empty.hidden = true;
    });
    window.addEventListener('resize', function () {
      if (modal.classList.contains('show')) {
        updateModalSize();
      }
    });
  }());
</script>