| 1 |
<div class="content-section"> |
| 2 |
<p class="form-hint mb-5">Curate lists of items: playlists, reading lists, bundles. Public collections appear on your profile.</p> |
| 3 |
|
| 4 |
{% if collections.is_empty() %} |
| 5 |
<p class="muted">No collections yet. Use the form below to create your first one, then add items from any item page.</p> |
| 6 |
{% else %} |
| 7 |
<div class="scroll-x"> |
| 8 |
<table class="data-table"> |
| 9 |
<thead> |
| 10 |
<tr> |
| 11 |
<th>Title</th> |
| 12 |
<th>Items</th> |
| 13 |
<th>Visibility</th> |
| 14 |
<th>Created</th> |
| 15 |
<th></th> |
| 16 |
</tr> |
| 17 |
</thead> |
| 18 |
<tbody> |
| 19 |
{% for c in collections %} |
| 20 |
<tr> |
| 21 |
<td><a href="/c/{{ username }}/{{ c.slug }}">{{ c.title }}</a></td> |
| 22 |
<td>{{ c.item_count }}</td> |
| 23 |
<td>{% if c.is_public %}<span class="badge">Public</span>{% else %}<span class="badge is-faded">Private</span>{% endif %}</td> |
| 24 |
<td>{{ c.created_at }}</td> |
| 25 |
<td> |
| 26 |
<button class="btn-secondary small btn-compact" |
| 27 |
hx-delete="/api/collections/{{ c.id }}" |
| 28 |
hx-confirm="Delete this collection?" |
| 29 |
hx-target="closest tr" |
| 30 |
hx-swap="outerHTML">Delete</button> |
| 31 |
</td> |
| 32 |
</tr> |
| 33 |
{% endfor %} |
| 34 |
</tbody> |
| 35 |
</table> |
| 36 |
</div> |
| 37 |
{% endif %} |
| 38 |
|
| 39 |
<details class="lib-coll-new"> |
| 40 |
<summary class="lib-coll-new-summary">New Collection</summary> |
| 41 |
<form id="new-collection-form" |
| 42 |
class="lib-coll-new-form" |
| 43 |
hx-post="/api/collections" |
| 44 |
hx-swap="none"> |
| 45 |
<div class="form-group"> |
| 46 |
<label for="new-coll-title">Title</label> |
| 47 |
<input type="text" id="new-coll-title" name="title" maxlength="100" required placeholder="My Reading List" |
| 48 |
data-input="slugifyCollName"> |
| 49 |
</div> |
| 50 |
<div class="form-group"> |
| 51 |
<label for="new-coll-slug">URL name</label> |
| 52 |
<input type="text" id="new-coll-slug" name="slug" maxlength="100" required placeholder="my-reading-list" pattern="[a-zA-Z0-9\-]+"> |
| 53 |
<small class="form-hint">Letters, numbers, and hyphens only. Filled in for you from the title; edit if you want a shorter URL.</small> |
| 54 |
</div> |
| 55 |
<div class="form-group"> |
| 56 |
<label for="new-coll-desc">Description (optional)</label> |
| 57 |
<textarea id="new-coll-desc" name="description" maxlength="500" rows="2"></textarea> |
| 58 |
</div> |
| 59 |
<label class="checkbox-group"> |
| 60 |
<input type="checkbox" id="new-coll-public" name="is_public" value="true"> Public (visible on your profile) |
| 61 |
</label> |
| 62 |
<button type="submit">Create Collection</button> |
| 63 |
</form> |
| 64 |
</details> |
| 65 |
</div> |
| 66 |
|
| 67 |
<script src="/static/tab-library-collections.js?v=0623"></script> |
| 68 |
|
| 69 |
<h2 class="lib-coll-wishlist-heading">Wishlist</h2> |
| 70 |
{% if wishlists.is_empty() %} |
| 71 |
<div class="content-section"> |
| 72 |
<p class="muted">No wishlisted items. Add items from any item page to save them for later.</p> |
| 73 |
</div> |
| 74 |
{% else %} |
| 75 |
<div class="content-section lib-coll-wishlist-wrap"> |
| 76 |
<table class="data-table lib-coll-wishlist-table"> |
| 77 |
<thead> |
| 78 |
<tr> |
| 79 |
<th>Title</th> |
| 80 |
<th>Creator</th> |
| 81 |
<th>Type</th> |
| 82 |
<th>Price</th> |
| 83 |
<th>Added</th> |
| 84 |
<th></th> |
| 85 |
</tr> |
| 86 |
</thead> |
| 87 |
<tbody> |
| 88 |
{% for item in wishlists %} |
| 89 |
<tr id="wishlist-row-{{ item.item_id }}"> |
| 90 |
<td><a href="/i/{{ item.item_id }}">{{ item.title }}</a></td> |
| 91 |
<td><a href="/u/{{ item.creator }}">{{ item.creator }}</a></td> |
| 92 |
<td><span class="badge">{{ item.item_type }}</span></td> |
| 93 |
<td>{{ item.price_display() }}</td> |
| 94 |
<td>{{ item.added_at.format("%b %d, %Y") }}</td> |
| 95 |
<td class="lib-coll-row-actions"> |
| 96 |
<button class="btn-primary small btn-compact lib-coll-cart-btn" |
| 97 |
hx-post="/api/cart/{{ item.item_id }}" |
| 98 |
hx-swap="none" |
| 99 |
data-hx-behavior="mark-added">Add to Cart</button> |
| 100 |
<button class="btn-secondary small btn-compact" |
| 101 |
hx-post="/api/wishlists/{{ item.item_id }}" |
| 102 |
hx-target="#wishlist-row-{{ item.item_id }}" |
| 103 |
hx-swap="outerHTML swap:0.2s" |
| 104 |
hx-confirm="Remove from wishlist?">Remove</button> |
| 105 |
</td> |
| 106 |
</tr> |
| 107 |
{% endfor %} |
| 108 |
</tbody> |
| 109 |
</table> |
| 110 |
</div> |
| 111 |
{% endif %} |
| 112 |
|