{# ============================================================ File:
templates/components/bookcard.html Purpose: Eén enkele boekkaart (dumb
component) ============================================================ #}

<div class="book-card {{ b.status }}" data-book-idx="{{ b.book_idx }}">
  <!-- HIDE -->
  <form
    action="/hide/{{ b.book_idx }}"
    method="POST"
    class="hide-form"
    onsubmit="return confirm('Dit boek verbergen?')"
  >
    <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 }}"
      class="book-img"
      data-field="cover"
      alt="cover"
    />
    {% else %}
    <div class="book-img placeholder" data-field="cover">?</div>
    {% endif %}
  </div>

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

    <!-- ACTIONS -->
    <div class="book-actions">
      <!-- START -->
      <form action="/start" method="POST">
        <input type="hidden" name="book_idx" value="{{ b.book_idx }}" />
        <button class="icon-btn icon-start" title="Start" data-action="start">
          <i class="fa-solid fa-play"></i>
        </button>
      </form>

      <!-- ABORT -->
      <form action="/abort/{{ b.book_idx }}" method="POST">
        <input type="hidden" name="book_idx" value="{{ b.book_idx }}" />
        <button class="icon-btn icon-abort" title="Abort" data-action="abort">
          <i class="fa-solid fa-stop"></i>
        </button>
      </form>
    </div>
  </div>

  <!-- PROGRESS -->
  <div class="book-progress">{% include "components/progress_box.html" %}</div>
</div>