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.
63 lines
1.9 KiB
63 lines
1.9 KiB
{# ============================================================ 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>
|