| 1 |
{% if purchases.is_empty() %} |
| 2 |
<div class="content-section"> |
| 3 |
<p class="muted">No purchases yet.</p> |
| 4 |
<p class="mt-4"> |
| 5 |
<a href="/discover" class="btn-primary library-tab-cta">Discover Content</a> |
| 6 |
</p> |
| 7 |
</div> |
| 8 |
{% else %} |
| 9 |
<div class="content-section scroll-x"> |
| 10 |
<div class="library-filter-wrap"> |
| 11 |
<input type="search" id="library-search" placeholder="Filter by title or creator..." |
| 12 |
autocomplete="off" |
| 13 |
class="library-filter-input input--sm w-full maxw-320" |
| 14 |
data-input="filterLibraryRows"> |
| 15 |
</div> |
| 16 |
<table class="data-table minw-500" id="library-table"> |
| 17 |
<thead> |
| 18 |
<tr> |
| 19 |
<th>Title</th> |
| 20 |
<th>Creator</th> |
| 21 |
<th>Type</th> |
| 22 |
<th>Added</th> |
| 23 |
<th></th> |
| 24 |
</tr> |
| 25 |
</thead> |
| 26 |
<tbody> |
| 27 |
{% for item in purchases %} |
| 28 |
<tr id="library-row-{{ item.item_id }}"> |
| 29 |
<td> |
| 30 |
<a href="/l/{{ item.item_id }}" class="library-title-link">{{ item.title }}</a> |
| 31 |
{% if item.has_new_version %}<span class="badge badge-new" title="New version available">New</span>{% endif %} |
| 32 |
</td> |
| 33 |
<td><a href="/u/{{ item.creator }}">{{ item.creator }}</a></td> |
| 34 |
<td><span class="badge">{{ item.item_type }}</span></td> |
| 35 |
<td> |
| 36 |
{{ item.purchased_at.format("%b %d, %Y") }} |
| 37 |
{% if let Some(key_code) = item.license_key_code %} |
| 38 |
<div class="license-key-inline"> |
| 39 |
<code class="key-code-small" title="Click to copy" data-action="copyKeyCode" data-arg="{{ key_code }}">{{ key_code }}</code> |
| 40 |
</div> |
| 41 |
{% endif %} |
| 42 |
</td> |
| 43 |
<td> |
| 44 |
<div class="library-row-actions"> |
| 45 |
<a href="/l/{{ item.item_id }}" class="btn-secondary library-row-open">Open</a> |
| 46 |
<div class="context-menu-wrapper"> |
| 47 |
<button class="context-menu-btn" data-action="toggleContextMenuBtn" data-stop data-arg="{{ item.item_id }}" title="More actions">...</button> |
| 48 |
<div class="context-menu" id="menu-{{ item.item_id }}"> |
| 49 |
<a href="/receipt/{{ item.transaction_id }}" class="context-menu-item">View receipt</a> |
| 50 |
<button class="context-menu-item collection-picker-anchor" |
| 51 |
data-collection-trigger data-item-id="{{ item.item_id }}" |
| 52 |
data-action="openCollectionPickerBtn" data-arg="{{ item.item_id }}">Add to collection</button> |
| 53 |
{% if item.is_free %} |
| 54 |
<button class="context-menu-item btn-danger" |
| 55 |
hx-delete="/api/library/remove/{{ item.item_id }}" |
| 56 |
hx-target="#library-row-{{ item.item_id }}" |
| 57 |
hx-swap="outerHTML" |
| 58 |
hx-confirm="Remove this item from your library?"> |
| 59 |
Remove from library |
| 60 |
</button> |
| 61 |
{% endif %} |
| 62 |
</div> |
| 63 |
</div> |
| 64 |
</div> |
| 65 |
</td> |
| 66 |
</tr> |
| 67 |
{% endfor %} |
| 68 |
</tbody> |
| 69 |
</table> |
| 70 |
</div> |
| 71 |
{% endif %} |
| 72 |
|
| 73 |
<script src="/static/tab-library-purchases.js?v=0623"></script> |
| 74 |
|
| 75 |
<h2 class="library-tab-subheading">Memberships</h2> |
| 76 |
{% if subscriptions.is_empty() %} |
| 77 |
<div class="content-section"> |
| 78 |
<p class="muted">No active memberships. Some creators offer monthly memberships from their project page.</p> |
| 79 |
</div> |
| 80 |
{% else %} |
| 81 |
<div class="content-section scroll-x"> |
| 82 |
<table class="data-table minw-500"> |
| 83 |
<thead> |
| 84 |
<tr> |
| 85 |
<th>Project</th> |
| 86 |
<th>Tier</th> |
| 87 |
<th>Price</th> |
| 88 |
<th>Status</th> |
| 89 |
<th>Renews</th> |
| 90 |
</tr> |
| 91 |
</thead> |
| 92 |
<tbody> |
| 93 |
{% for sub in subscriptions %} |
| 94 |
<tr> |
| 95 |
<td><a href="/p/{{ sub.project_slug }}">{{ sub.project_title }}</a></td> |
| 96 |
<td>{{ sub.tier_name }}</td> |
| 97 |
<td>{{ sub.price }}</td> |
| 98 |
<td><span class="badge {{ sub.status }}">{{ sub.status }}</span></td> |
| 99 |
<td>{{ sub.current_period_end.as_deref().unwrap_or("-") }}</td> |
| 100 |
</tr> |
| 101 |
{% endfor %} |
| 102 |
</tbody> |
| 103 |
</table> |
| 104 |
</div> |
| 105 |
{% endif %} |
| 106 |
|