{% extends "base.html" %}
{% block title %}{{ sura.name_english }} — Audio — IslamInLife Quran App{% endblock %}
{% block body %}
<header>
  <h1>🔊 {{ sura.name_english }}</h1>
  <div><a href="{{ url_for('audio_home') }}">Change Sura</a> &nbsp;·&nbsp; <a href="{{ url_for('home') }}">Home</a></div>
</header>
<main>
  <div class="card">
    <form method="get">
      <label>Verses</label>
      <input type="text" name="verses" value="{{ verse_detail }}" placeholder="e.g. All | 1-15">
      <button type="submit" class="btn-save">Load</button>
    </form>
  </div>

  {% if not playlist %}
    <div class="card"><p>No verses matched.</p></div>
  {% endif %}

  {% for t in playlist %}
  <div class="card" style="{% if t.missing %}background:#fdedec;{% endif %}">
    <div style="font-weight:bold; margin-bottom:6px;">{{ t.label }}</div>
    {% if t.missing %}
      <p style="font-size:13px; color:#a93226; margin:0;">Audio file not found for this verse.</p>
    {% else %}
      <audio controls style="width:100%;" src="/audio/file/{{ t.sura_no }}/{{ t.verse_no }}.mp3"></audio>
    {% endif %}
  </div>
  {% endfor %}
</main>
{% endblock %}