<!DOCTYPE html>
<html lang="{{ lang }}">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>3a</title>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}" />
</head>
<body>
  <nav class="lang-switcher">
    {% for code in supported_langs %}
      {% if code == lang %}
        <span class="lang-btn lang-btn--active">{{ code.upper() }}</span>
      {% else %}
        <a class="lang-btn" href="/?lang={{ code }}">{{ code.upper() }}</a>
      {% endif %}
    {% endfor %}
  </nav>
  <nav class="external-links">
    <a class="link-btn" href="https://www.green-planet.it/" target="_blank" rel="noopener">Green planet</a>
  </nav>

  <div class="banner">
    <header>
      <h1>3a</h1>
      <h2>{{ t.subtitle }}</h2>
    </header>
  </div>

  <div class="cards-row">
    <div class="action-card" data-action="iframe" data-src="{{ t.card1_src }}">
      <div class="card-icon">
        <img src="/resources/riconoscimento-pheno.png" alt="Quaderno Digitale Icon" width="100%" height="100%"/>
      </div>
      <h3 class="card-title">{{ t.card1_title }}</h3>
      <p class="card-text">{{ t.card1_text }}</p>
    </div>
    <div class="action-card" data-action="video" data-src="/resources/videos/quaderno_voice.mp4">
      <div class="card-icon">
        <img src="/resources/quaderno-digitale.png" alt="Quaderno Digitale Icon" width="100%" height="100%"/>
      </div>
      <h3 class="card-title">{{ t.card2_title }}</h3>
      <p class="card-text">{{ t.card2_text }}</p>
    </div>
    <div class="action-card" data-action="video" data-src="/resources/videos/quaderno_files.mp4">
      <div class="card-icon">
        <img src="/resources/quaderno-digitale.png" alt="Quaderno Digitale Icon" width="100%" height="100%"/>
      </div>
      <h3 class="card-title">{{ t.card3_title }}</h3>
      <p class="card-text">{{ t.card3_text }}</p>
    </div>
    <div class="action-card" data-action="iframe" data-src="https://docs.google.com/presentation/d/1YEIr3WEGZccl-NXYo-V3IWj8-fsljsBsEeBOBx_yESM/embed?start=false&loop=false">
      <div class="card-icon">
        <img src="/resources/assistente-virtuale.png" alt="Assistente Virtuale Icon" width="100%" height="100%"/>
      </div>
      <h3 class="card-title">{{ t.card4_title }}</h3>
      <p class="card-text">{{ t.card4_text }}</p>
    </div>
  </div>

  <!-- Shared modal overlay -->
  <div id="modal" class="modal hidden" role="dialog" aria-modal="true">
    <div class="modal-box">
      <button class="modal-fullscreen" id="modal-fullscreen" aria-label="Toggle fullscreen">⛶</button>
      <button class="modal-close" id="modal-close" aria-label="{{ t.close_label }}">&times;</button>
      <video id="modal-video" controls></video>
      <iframe id="modal-iframe" src="" allowfullscreen></iframe>
      <iframe id="modal-pdf" src=""></iframe>
    </div>
  </div>

  <script>
    const modal = document.getElementById('modal');
    const modalVideo = document.getElementById('modal-video');
    const modalIframe = document.getElementById('modal-iframe');
    const modalPdf = document.getElementById('modal-pdf');
    const closeBtn = document.getElementById('modal-close');
    const fullscreenBtn = document.getElementById('modal-fullscreen');
    const modalBox = document.querySelector('.modal-box');

    function openModal(action, src) {
      if (action === 'video') {
        modalVideo.src = src;
        modalVideo.style.display = 'block';
        modalIframe.style.display = 'none'; modalIframe.src = '';
        modalPdf.style.display = 'none'; modalPdf.src = '';
      } else if (action === 'pdf') {
        modalPdf.src = src;
        modalPdf.style.display = 'block';
        modalVideo.style.display = 'none'; modalVideo.pause(); modalVideo.src = '';
        modalIframe.style.display = 'none'; modalIframe.src = '';
      } else {
        modalIframe.src = src;
        modalIframe.style.display = 'block';
        modalVideo.style.display = 'none'; modalVideo.pause(); modalVideo.src = '';
        modalPdf.style.display = 'none'; modalPdf.src = '';
      }
      modal.classList.remove('hidden');
    }

    function closeModal() {
      if (document.fullscreenElement) document.exitFullscreen();
      modal.classList.add('hidden');
      modalVideo.pause();
      modalVideo.src = '';
      modalIframe.src = '';
      modalPdf.src = '';
    }

    fullscreenBtn.addEventListener('click', () => {
      if (!document.fullscreenElement) {
        modalBox.requestFullscreen();
      } else {
        document.exitFullscreen();
      }
    });

    document.addEventListener('fullscreenchange', () => {
      fullscreenBtn.textContent = document.fullscreenElement ? '⊡' : '⛶';
    });

    document.querySelectorAll('[data-action]').forEach(btn => {
      btn.addEventListener('click', () => openModal(btn.dataset.action, btn.dataset.src));
    });

    closeBtn.addEventListener('click', closeModal);

    modal.addEventListener('click', e => {
      if (e.target === modal) closeModal();
    });

    document.addEventListener('keydown', e => {
      if (e.key === 'Escape') closeModal();
    });
  </script>
</body>
</html>
