{% extends "base.html" %}
{% block title %}Quran Text Viewer — IslamInLife Quran App{% endblock %}
{% block body %}
<header>
  <h1>📜 Quran Text Viewer</h1>
  <div>{{ display_name }} &nbsp;·&nbsp; <a href="{{ url_for('home') }}">Home</a></div>
</header>
<main>
  {% if error %}<div class="msg msg-error">{{ error }}</div>{% endif %}

  <div class="card">
    <p style="font-size:13px; color:#566573; margin-top:0;">
      No Quran text is bundled with this app — you provide your own Arabic text file
      (.txt or .docx), same as the desktop app. Uploaded once, remembered for you here.
    </p>
    {% if has_file %}
      <p style="font-size:13px;">Current file: <strong>{{ filename }}</strong></p>
      <a href="#" onclick="removeFile(); return false;" style="font-size:13px; color:#a93226;">Remove &amp; upload a different file</a>
    {% endif %}
    <form method="post" enctype="multipart/form-data" style="margin-top:10px;">
      <label>{{ "Replace" if has_file else "Upload" }} Quran Text File (.txt or .docx)</label>
      <input type="file" name="file" accept=".txt,.docx">
      <button type="submit" class="btn-save">{{ "Replace File" if has_file else "Upload" }}</button>
    </form>
  </div>

  {% if has_file %}
  <div class="card">
    <label>Sura</label>
    <select onchange="window.location.href='/quran-viewer/' + this.value">
      <option value="">— Select a Sura —</option>
      {% for s in suras %}<option value="{{ s.sura_no }}">{{ s.label }}</option>{% endfor %}
    </select>
    {% if not suras %}<p style="font-size:13px; color:#a93226;">No suras were recognized in this file.</p>{% endif %}
  </div>
  {% endif %}
</main>

<script>
function removeFile() {
  if (!confirm('Remove the uploaded file?')) return;
  fetch('/api/quran-viewer/remove-file', { method: 'POST' }).then(() => location.reload());
}
</script>
{% endblock %}