{% if purchases.is_empty() %}
<div class="content-section">
    <p class="muted">No purchases yet.</p>
    <p class="mt-4">
        <a href="/discover" class="btn-primary library-tab-cta">Discover Content</a>
    </p>
</div>
{% else %}
<div class="content-section scroll-x">
    <div class="library-filter-wrap">
        <input type="search" id="library-search" placeholder="Filter by title or creator..."
               autocomplete="off"
               class="library-filter-input input--sm w-full maxw-320"
               oninput="(function(q){var rows=document.querySelectorAll('#library-table tbody tr');q=q.toLowerCase();rows.forEach(function(r){r.classList.toggle('hidden', r.textContent.toLowerCase().indexOf(q)===-1);});})(this.value)">
    </div>
    <table class="data-table minw-500" id="library-table">
        <thead>
            <tr>
                <th>Title</th>
                <th>Creator</th>
                <th>Type</th>
                <th>Added</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            {% for item in purchases %}
            <tr id="library-row-{{ item.item_id }}">
                <td>
                    <a href="/l/{{ item.item_id }}" class="library-title-link">{{ item.title }}</a>
                    {% if item.has_new_version %}<span class="badge badge-new" title="New version available">New</span>{% endif %}
                </td>
                <td><a href="/u/{{ item.creator }}">{{ item.creator }}</a></td>
                <td><span class="badge">{{ item.item_type }}</span></td>
                <td>
                    {{ item.purchased_at.format("%b %d, %Y") }}
                    {% if let Some(key_code) = item.license_key_code %}
                    <div class="license-key-inline">
                        <code class="key-code-small" title="Click to copy" onclick="navigator.clipboard.writeText('{{ key_code }}'); this.textContent='Copied!'; setTimeout(() => this.textContent='{{ key_code }}', 1500)">{{ key_code }}</code>
                    </div>
                    {% endif %}
                </td>
                <td>
                    <div class="library-row-actions">
                        <a href="/l/{{ item.item_id }}" class="btn-secondary library-row-open">Open</a>
                        <div class="context-menu-wrapper">
                            <button class="context-menu-btn" onclick="toggleContextMenu(event, '{{ item.item_id }}')" title="More actions">...</button>
                            <div class="context-menu" id="menu-{{ item.item_id }}">
                                <a href="/receipt/{{ item.transaction_id }}" class="context-menu-item">View receipt</a>
                                <button class="context-menu-item collection-picker-anchor"
                                        data-collection-trigger data-item-id="{{ item.item_id }}"
                                        onclick="openCollectionPicker('{{ item.item_id }}', this)">Add to collection</button>
                                {% if item.is_free %}
                                <button class="context-menu-item btn-danger"
                                        hx-delete="/api/library/remove/{{ item.item_id }}"
                                        hx-target="#library-row-{{ item.item_id }}"
                                        hx-swap="outerHTML"
                                        hx-confirm="Remove this item from your library?">
                                    Remove from library
                                </button>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% endif %}

<script>
    function toggleContextMenu(event, itemId) {
        event.stopPropagation();
        var menu = document.getElementById('menu-' + itemId);
        var wasOpen = menu.classList.contains('open');
        document.querySelectorAll('.context-menu').forEach(function(m) { m.classList.remove('open'); });
        if (!wasOpen) { menu.classList.add('open'); }
    }
    document.addEventListener('click', function(e) {
        document.querySelectorAll('.context-menu').forEach(function(m) { m.classList.remove('open'); });
    });
</script>

<h2 class="library-tab-subheading">Memberships</h2>
{% if subscriptions.is_empty() %}
<div class="content-section">
    <p class="muted">No active memberships. Some creators offer monthly memberships from their project page.</p>
</div>
{% else %}
<div class="content-section scroll-x">
    <table class="data-table minw-500">
        <thead>
            <tr>
                <th>Project</th>
                <th>Tier</th>
                <th>Price</th>
                <th>Status</th>
                <th>Renews</th>
            </tr>
        </thead>
        <tbody>
            {% for sub in subscriptions %}
            <tr>
                <td><a href="/p/{{ sub.project_slug }}">{{ sub.project_title }}</a></td>
                <td>{{ sub.tier_name }}</td>
                <td>{{ sub.price }}</td>
                <td><span class="badge {{ sub.status }}">{{ sub.status }}</span></td>
                <td>{{ sub.current_period_end.as_deref().unwrap_or("-") }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% endif %}