<div class="resource-media-wrapper" id="resource_media_wrapper_{{ resource.pk }}" data-src="{{ src|escape }}">
  <noscript>
    <div><a href="{{ src }}" target="_blank" rel="noopener">Open media</a></div>
  </noscript>
</div>

<script>
  (function(){
    var wrapperId = 'resource_media_wrapper_{{ resource.pk }}';
    if (document.getElementById(wrapperId).dataset._inited) return;
    var wrap = document.getElementById(wrapperId);
    if (!wrap) return;
    wrap.dataset._inited = '1';
    var src = wrap.getAttribute('data-src');
    if (!src) return;
    var lower = src.toLowerCase();

    function createImg(src) {
      var img = document.createElement('img');
      img.src = src;
      img.className = 'img-fluid resource-media-element rounded';
      img.style.maxHeight = '60vh';
      img.style.objectFit = 'contain';
      img.style.cursor = 'zoom-in';
      return img;
    }
    function createVideo(src) {
      var video = document.createElement('video');
      video.className = 'resource-media-element rounded';
      video.controls = true;
      video.preload = 'metadata';
      video.style.maxWidth = '100%';
      video.style.maxHeight = '60vh';
      video.style.objectFit = 'contain';
      var srcEl = document.createElement('source');
      srcEl.src = src;
      video.appendChild(srcEl);
      return video;
    }
    function createIframe(src, embedUrl) {
      var iframe = document.createElement('iframe');
      iframe.src = embedUrl || src;
      iframe.setAttribute('frameborder','0');
      iframe.setAttribute('allowfullscreen','');
      iframe.className = 'resource-media-element rounded';
      iframe.style.width = '100%';
      iframe.style.height = '60vh';
      return iframe;
    }

    var el = null;
  // YouTube
    if (lower.indexOf('youtube.com') !== -1 || lower.indexOf('youtu.be') !== -1) {
    // build embed url
      var videoId = null;
      try {
        var m = src.match(/(?:v=|v\/|embed\/|youtu\.be\/)([A-Za-z0-9_-]{6,})/);
        if (m && m[1]) videoId = m[1];
      } catch(e){}
      var embed = videoId ? ('https://www.youtube.com/embed/' + videoId) : src;
      el = createIframe(src, embed);
    } else if (lower.indexOf('vimeo.com') !== -1) {
      var m2 = src.match(/vimeo\.com\/(\d+)/);
      var embed2 = m2 && m2[1] ? ('https://player.vimeo.com/video/' + m2[1]) : src;
      el = createIframe(src, embed2);
    } else if (lower.match(/\.(mp4|webm|ogg)(?:$|\?|#)/)) {
      el = createVideo(src);
    } else if (lower.match(/\.(jpe?g|png|gif|webp|svg)(?:$|\?|#)/)) {
      el = createImg(src);
    } else {
    // unknown: try image first, fallback to link
      el = createImg(src);
    // if image fails to load, replace with link
      el.addEventListener('error', function(){
        var a = document.createElement('a');
        a.href = src; a.target = '_blank'; a.rel = 'noopener'; a.textContent = 'Open resource';
        wrap.innerHTML = ''; wrap.appendChild(a);
      });
    }

  // append preview element
    if (el) {
      wrap.appendChild(el);

    // click -> open modal/full-size
      el.addEventListener('click', function(e) {
        e.preventDefault();
      // create modal container if not present
        var modalId = 'resource_media_modal_{{ resource.pk }}';
        var existing = document.getElementById(modalId);
        if (!existing) {
          var modalDiv = document.createElement('div');
          modalDiv.className = 'modal fade resource-media-modal';
          modalDiv.id = modalId;
          modalDiv.tabIndex = -1;
          modalDiv.innerHTML = '<div class="modal-dialog modal-xl modal-dialog-centered"><div class="modal-content bg-dark"><div class="modal-body p-0 text-center"></div></div></div>';
          document.body.appendChild(modalDiv);
        }
        var modalEl = document.getElementById(modalId);
        var body = modalEl.querySelector('.modal-body');
        body.innerHTML = '';

      // create full-size node depending on type
        if (el.tagName.toLowerCase() === 'img') {
          var big = document.createElement('img');
          big.src = src;
          big.style.maxWidth = '95vw';
          big.style.maxHeight = '95vh';
          big.style.objectFit = 'contain';
          big.className = 'img-fluid';
          body.appendChild(big);
        } else if (el.tagName.toLowerCase() === 'video') {
          var bigv = document.createElement('video');
          bigv.controls = true; bigv.autoplay = false; bigv.style.maxWidth = '95vw'; bigv.style.maxHeight = '95vh'; bigv.style.objectFit = 'contain'; bigv.className = 'w-100';
          var s = document.createElement('source'); s.src = src; bigv.appendChild(s);
          body.appendChild(bigv);
        } else if (el.tagName.toLowerCase() === 'iframe') {
          var frame = document.createElement('iframe');
          frame.src = el.src;
          frame.setAttribute('frameborder','0');
          frame.setAttribute('allowfullscreen','');
          frame.style.width = '95vw'; frame.style.height = '80vh';
          body.appendChild(frame);
        } else {
          var a = document.createElement('a'); a.href = src; a.target = '_blank'; a.rel = 'noopener'; a.textContent = 'Open resource'; body.appendChild(a);
        }

      // show modal using Bootstrap if available
        try {
          var bsModal = new bootstrap.Modal(modalEl);
          bsModal.show();
        } catch (e) {
        // fallback: open in new tab
          window.open(src, '_blank', 'noopener');
        }
      });
    }
  })();
</script>

<style>
  .resource-media-wrapper .resource-media-element { display: inline-block; }
  .resource-media-wrapper img.resource-media-element { max-width: 100%; height: auto; }
  .resource-media-wrapper video.resource-media-element { max-width: 100%; height: auto; }
  .resource-media-modal .modal-content { background: rgba(0,0,0,0.95); }
</style>
