<!DOCTYPE html>
<html lang="nl">
<head>
  <meta charset="UTF-8">
  <title>Quran Speler - Gebedstijden Display</title>
  <link rel="stylesheet" href="/static/style.css">
  <link rel="stylesheet" href="/static/quran.css">
  <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;700&family=Lato:wght@400;700&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
  <div class="app">
    <!-- Dark/Light toggle -->
    <button id="themeToggle" title="Schakel modus"><span id="themeIcon" class="material-icons">brightness_6</span></button>

    <!-- Main Quran Content (twee kolommen) -->
    <div class="quran-full-content">
      <!-- Linker kolom - Player -->
      <div class="quran-left-column">
        <!-- Header -->
        <div class="quran-header">
          <h1>القرآن الكريم - Quran Speler</h1>
        </div>

        <!-- Reciter Selection -->
        <div class="reciter-selection">
          <label for="reciterSelect">Reciteur / القارئ:</label>
          <select id="reciterSelect" class="custom-select">
            <option value="">Selecteer een reciteur...</option>
          </select>
        </div>

        <!-- Player Section -->
        <div class="player-section">
          <div class="current-playing">
            <div class="sura-info">
              <h2 id="currentSuraName">Selecteer een sura om af te spelen</h2>
              <p id="currentReciter">Geen reciteur geselecteerd</p>
            </div>
            <div class="player-controls">
              <button id="prevBtn" class="control-btn" title="Vorige">
                <span class="material-icons">skip_previous</span>
              </button>
              <button id="playBtn" class="control-btn play-btn" title="Afspelen/Pauzeren">
                <span class="material-icons">play_arrow</span>
              </button>
              <button id="nextBtn" class="control-btn" title="Volgende">
                <span class="material-icons">skip_next</span>
              </button>
              <button id="directPlayBtn" class="control-btn" title="Direct afspelen in nieuw tabblad" style="display: none;">
                <span class="material-icons">open_in_new</span>
              </button>
            </div>
            <div class="progress-section">
              <span id="currentTime">0:00</span>
              <input type="range" id="progressBar" min="0" max="100" value="0" class="progress-bar">
              <span id="totalTime">0:00</span>
            </div>
          </div>
        </div>
      </div>

      <!-- Rechter kolom - Zoeken en Sura lijst -->
      <div class="quran-right-column">
        <!-- Search Section -->
        <div class="search-section">
          <label for="suraSearch">Zoek Sura / البحث عن السورة:</label>
          <input type="text" id="suraSearch" placeholder="Zoek naar sura naam..." class="search-input">
        </div>

        <!-- Sura List -->
        <div class="sura-list-section">
          <h3>Sura's / السور</h3>
          <div class="sura-grid" id="suraGrid">
            <!-- Sura's worden hier dynamisch geladen -->
          </div>
        </div>
      </div>
    </div>

    <!-- Zijmenu (exact hetzelfde als hoofdpagina) -->
    <div class="right new-layout">
      <div class="hadith-tijden-row">
        <div class="vertical-tijden">
          <ul class="tijden-en-icoontjes">
            {% for naam, tijd in gebedstijden.items() %}
              <li class="tijden-rij">
                <span class="naam">{{ naam }}</span>
                <span class="tijd">{{ tijd[:5] }}</span>
              </li>
            {% endfor %}
            <li><a href="/instellingen" title="Instellingen" class="icoon-link"><span class="material-icons">settings</span></a></li>
            <li><a href="#" id="muteBtn" title="Mute" class="icoon-link"><span id="muteIcon" class="material-icons">volume_off</span></a></li>
            {% if settings.debug_mode %}
            <li><a href="/debug" title="Debug Mode" class="icoon-link"><span class="material-icons">bug_report</span></a></li>
            {% endif %}
            <li><a href="/" title="Terug naar hoofdpagina" class="icoon-link"><span class="material-icons">home</span></a></li>
          </ul>
        </div>
      </div>
    </div>

    <!-- Audio Element -->
    <audio id="quranAudio" preload="none"></audio>
  </div>

  <script src="/static/quran.js"></script>
  <script src="/static/countdown.js"></script>
  <script>
    // Theme toggle setup (gebruik de standaard functie)
    setupThemeToggle();
    
    // Theme toggle icon dynamisch aanpassen
    function updateThemeIcon() {
      const html = document.documentElement;
      const icon = document.getElementById('themeIcon');
      if (html.className === 'light') {
        icon.textContent = 'dark_mode';
      } else {
        icon.textContent = 'light_mode';
      }
    }
    
    // Update icon bij theme wijziging
    const observer = new MutationObserver(updateThemeIcon);
    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
    updateThemeIcon();

    // Mute functionaliteit
    let muteStatus = false;
    function setMuteIcon() {
      const icon = document.getElementById('muteIcon');
      icon.textContent = muteStatus ? 'volume_off' : 'volume_up';
    }
    function toggleMute(e) {
      e.preventDefault();
      muteStatus = !muteStatus;
      setMuteIcon();
      fetch('/api/mute', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ mute: muteStatus })
      });
    }
    document.getElementById('muteBtn').addEventListener('click', toggleMute);
    setMuteIcon();
  </script>
</body>
</html> 