You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
kmftools/bookscraper/templates/components/bookcard.html

83 lines
2.5 KiB

{# ============================================================
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-idx="{{ b.book_idx }}">
<!-- ======================================================
HIDE BUTTON (icon-only)
====================================================== -->
<form
action="/hide/{{ b.book_idx }}"
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_idx" value="{{ b.book_idx }}" />
<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_idx }}" method="POST">
<input type="hidden" name="book_idx" value="{{ b.book_idx }}" />
<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 -->