{% extends "base.html" %}
{% block title %}Manage Tafseer Books — IslamInLife Quran App{% endblock %}
{% block body %}
<header>
  <h1>⚙️ Manage Tafseer Books</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">
    <a class="btn btn-save" style="display:inline-block; text-decoration:none;" href="{{ url_for('tafseer_books_new') }}">
      + Add New Book
    </a>
  </div>

  {% for b in books %}
  <div class="card">
    <div style="display:flex; justify-content:space-between; align-items:flex-start;">
      <div>
        <div style="font-weight:bold; color:#1a3a5c;">{{ b.book_name }}
          {% if b.is_builtin == "Yes" %}<span style="font-size:11px; color:#7d6608;">(Built-in)</span>{% endif %}
        </div>
        <div style="font-size:13px; color:#566573;">
          {{ b.author or "—" }} &middot; {{ b.publisher or "—" }} &middot; {{ b.copy_type }} &middot; {{ b.language }}
          {% if b.total_volumes %} &middot; {{ b.total_volumes }} volumes{% endif %}
        </div>
      </div>
      {% if b.is_builtin != "Yes" %}
      <div>
        <a href="{{ url_for('tafseer_books_edit', book_id=b.id) }}" style="font-size:13px; margin-right:10px;">Edit</a>
        <a href="#" onclick="deleteBook({{ b.id }}); return false;" style="font-size:13px; color:#a93226;">Delete</a>
      </div>
      {% endif %}
    </div>
  </div>
  {% endfor %}
</main>

<script>
function deleteBook(bookId) {
  if (!confirm('Delete this tafseer book and all its entries? This cannot be undone.')) return;
  fetch(`/api/tafseer/books/${bookId}/delete`, { method: 'POST' })
    .then(r => r.json())
    .then(d => {
      if (d.ok) location.reload();
      else alert(d.error || 'Could not delete this book.');
    });
}
</script>
{% endblock %}