{# ============================================================
   File: templates/components/bookcard.html
   Purpose:
     Eén enkele boekkaart met:
       - status styles
       - cover
       - metadata
       - hide button
       - start (play)
       - abort (stop)
   Requires:
       variable "b" in context
   ============================================================ #}

<div class="book-card {{ b.status }}" data-book-id="{{ b.book_id }}">

  <!-- ======================================================
       HIDE BUTTON (icon-only)
       ====================================================== -->
  <form
    action="/hide/{{ b.book_id }}"
    method="POST"
    onsubmit="return confirm('Dit boek verbergen?')"
    class="hide-form"
  >
    <button class="icon-btn icon-hide" title="Verbergen">
      <i class="fa-solid fa-xmark"></i>
    </button>
  </form>

  <!-- ======================================================
       COVER
       ====================================================== -->
  <div class="book-cover">
    {% if b.cover_path %}
      <img src="/{{ b.cover_path }}" alt="cover" class="book-img" />
    {% else %}
      <div class="book-img placeholder">?</div>
    {% endif %}
  </div>

  <!-- ======================================================
       META + BUTTONS
       ====================================================== -->
  <div class="book-meta">
    <div class="book-title">{{ b.title }}</div>
    <div class="book-author">{{ b.author }}</div>
    <div class="book-created">Geregistreerd: {{ b.created_at }}</div>

    <div class="book-actions">
      <!-- START -->
      <form action="/start" method="POST">
        <input type="hidden" name="book_id" value="{{ b.book_id }}" />
        <button
          class="icon-btn icon-start"
          title="Start scraping"
          {% if b.status != "registered" %}
            disabled
          {% endif %}
        >
          <i class="fa-solid fa-play"></i>
        </button>
      </form>

      <!-- ABORT -->
      <form action="/abort/{{ b.book_id }}" method="POST">
        <input type="hidden" name="book_id" value="{{ b.book_id }}" />
        <button
          class="icon-btn icon-abort"
          title="Stoppen (abort)"
          {% if b.status not in ["processing","downloading","parsing","audio"] %}
            disabled
          {% endif %}
        >
          <i class="fa-solid fa-stop"></i>
        </button>
      </form>
    </div>

  </div> <!-- einde .book-meta -->

</div> <!-- einde .book-card -->