{% extends "base.html" %}
{% block title %}Revision Mode Setup — IslamInLife Quran App{% endblock %}
{% block body %}
<header>
  <h1>⚙️ Revision Mode Setup</h1>
  <div><a href="{{ url_for('revision_log') }}">Revision Log</a> &nbsp;·&nbsp; <a href="{{ url_for('home') }}">Home</a></div>
</header>
<main>
  {% include "_revision_log_banner.html" %}
  {% if error %}<div class="msg msg-error">{{ error }}</div>{% endif %}

  <div class="card">
    <p style="font-size:13px; color:#566573;">
      Current mode: <strong>{{ current_mode | capitalize }}-based</strong>
    </p>
    <form method="post">
      {% if pending_mode %}
        <input type="hidden" name="mode" value="{{ pending_mode }}">
        <div class="done-check">
          <input type="checkbox" name="confirm_delete" value="1" id="confirmDel">
          <label for="confirmDel">I understand this permanently deletes my {{ pending_count }} existing {{ current_mode }}-mode entries.</label>
        </div>
        <button type="submit" class="btn-delete">Confirm Switch to {{ pending_mode | capitalize }}-based</button>
      {% else %}
        <label>Choose a mode</label>
        <select name="mode">
          <option value="sura" {% if current_mode == "sura" %}selected{% endif %}>📖 Sura-based (Default)</option>
          <option value="page" {% if current_mode == "page" %}selected{% endif %}>📄 Page-based</option>
          <option value="verse" {% if current_mode == "verse" %}selected{% endif %}>🔢 Verse-based</option>
        </select>
        <button type="submit" class="btn-save">Save Mode</button>
      {% endif %}
    </form>
  </div>
</main>
{% endblock %}