{% extends "base.html" %}
{% block title %}QCP Recitation Mode Setup — IslamInLife Quran App{% endblock %}
{% block body %}
<header>
  <h1>⚙️ Recitation Revision Mode Setup</h1>
  <div><a href="{{ url_for('qcp_recitation') }}">Recitation Revision</a> &nbsp;·&nbsp; <a href="{{ url_for('home') }}">Home</a></div>
</header>
<main>
  {% include "_qcp_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>

    {% if pending_mode %}
      <div class="done-check" style="margin:12px 0;">
        <input type="checkbox" name="confirm_delete" value="1" id="confirmDel" form="confirmSwitch">
        <label for="confirmDel">
          I understand this permanently deletes my {{ pending_count }} existing Recitation Revision entries.
        </label>
      </div>
      <form method="post" id="confirmSwitch">
        <input type="hidden" name="mode" value="{{ pending_mode }}">
        <input type="hidden" name="confirm_delete" value="1">
        <button type="submit" class="btn-delete" onclick="return document.getElementById('confirmDel').checked;">
          Confirm Switch to {{ pending_mode | capitalize }}-based
        </button>
        <a href="{{ url_for('qcp_recitation_mode_setup') }}" style="margin-left:10px;">Cancel</a>
      </form>
    {% else %}
      <form method="post">
        <label>Choose a mode</label>
        <select name="mode">
          <option value="sura" {% if current_mode == "sura" %}selected{% endif %}>📖 Sura-based</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>
      </form>
    {% endif %}
  </div>


  <div class="card" style="background:#fdf2f2; border:1px solid #e6b0aa;">
    <div class="section-title">Delete Recitation Revision Entries</div>
    {% if pending_mode %}
      <p style="font-size:13px;">The mode-switch confirmation above is the place to delete the existing entries as part of changing modes.</p>
    {% elif pending_count == 0 %}
      <p style="font-size:13px; color:#566573; margin-bottom:8px;">There are currently no Recitation Revision entries to delete.</p>
    {% else %}
      <p style="font-size:13px;">This permanently deletes all <strong>{{ pending_count }}</strong> Recitation Revision entries while keeping your current mode.</p>
      <form method="post" onsubmit="return confirm('Permanently delete all Recitation Revision entries? This cannot be undone.');">
        <input type="hidden" name="action" value="delete_all">
        <input type="hidden" name="confirm_delete_all" value="1">
        <button type="submit" class="btn-delete">Delete All Entries</button>
      </form>
    {% endif %}
  </div>

  <div class="card" style="background:#fff8e7; border:1px solid #f0c36d;">
    <strong>Important:</strong> changing the mode starts a new Recitation Revision tracking set.
    To keep the data consistent, all existing QCP Recitation Revision entries are permanently deleted when you confirm a mode switch.
    This does <strong>not</strong> affect the QCP plan, QCP Check-In/Tracker data, or the main Revision Log.
  </div>
</main>
{% endblock %}