{% extends "base.html" %}
{% block title %}Audio Playback — IslamInLife Quran App{% endblock %}
{% block body %}
<header>
  <h1>🔊 Audio Playback</h1>
  <div>{{ display_name }} &nbsp;·&nbsp; <a href="{{ url_for('home') }}">Home</a></div>
</header>
<main>
  {% if not folder %}
    <div class="card">
      <p style="font-size:13px; color:#566573;">
        No audio folder is configured yet. This needs setting up by whoever runs the server —
        the <code>QPA_AUDIO_FOLDER</code> environment variable should point at a folder of MP3s
        named like <code>007026.mp3</code> (Sura 7, Verse 26), same convention as the desktop app.
      </p>
    </div>
  {% elif not ok %}
    <div class="card">
      <p style="font-size:13px; color:#a93226;">
        The configured folder (<code>{{ folder }}</code>) doesn't appear to contain valid MP3
        files in the expected naming format.
      </p>
    </div>
  {% else %}
    <div class="card" style="background:#eafaf1;">
      <p style="font-size:13px; margin:0;">Audio folder connected — {{ found }} files found.</p>
    </div>

    <div class="card">
      <label>Sura</label>
      <select onchange="window.location.href='/audio/' + this.value">
        <option value="">— Select a Sura —</option>
        {% for s in suras %}<option value="{{ s.sura_no }}">{{ s.label }}</option>{% endfor %}
      </select>
    </div>
  {% endif %}
</main>
{% endblock %}