{% extends 'base/layout.html' %}

{% block content %}
<div class="container mx-auto" style="padding: 2rem 1rem;">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem;">
        <div>
            <h1 style="margin: 0;">Manage Pack Inventory</h1>
            <p style="color: #94a3b8; font-size: 0.875rem; margin-top: 0.5rem;">Listing: <strong>{{ listing.name }}</strong></p>
        </div>
        <div style="display: flex; gap: 1rem;">
             <a href="{% url 'store:add_virtual_pack_content' listing.uuid %}" class="btn" style="background-color: #10b981;">+ Add Pack Instance</a>
             <a href="{% url 'store:manage_listings' %}" class="btn" style="background-color: var(--card-bg); border: 1px solid var(--border-color);">Back to Listings</a>
        </div>
    </div>

    <section>
        <h2 style="margin-bottom: 1rem;">Existing Packs ({{ packs|length }})</h2>
        {% if packs %}
        <div class="card-grid">
            {% for pack in packs %}
            <div class="tcg-card" style="padding: 1rem;">
                <h3 style="font-size: 1rem; margin-bottom: 0.5rem;">Pack #{{ pack.id }}</h3>
                <p style="font-size: 0.875rem; color: #94a3b8; margin-bottom: 1rem;">{{ pack.get_status_display }}</p>
                
                <h4 style="font-size: 0.75rem; text-transform: uppercase; color: #64748b; margin-bottom: 0.5rem;">Cards Inside:</h4>
                <ul style="list-style: none; padding: 0; margin: 0; font-size: 0.875rem;">
                    {% for card in pack.cards.all %}
                        <li style="margin-bottom: 0.25rem;">• {{ card.name }} <span style="color: #94a3b8;">({{ card.set.code }})</span></li>
                    {% empty %}
                        <li style="color: #ef4444;">No cards assigned!</li>
                    {% endfor %}
                </ul>
            </div>
            {% endfor %}
        </div>
        {% else %}
        <div style="background: var(--card-bg); padding: 3rem; border-radius: 0.5rem; border: 1px dashed var(--border-color); text-align: center;">
            <p style="color: #94a3b8;">No pack instances found for this listing.</p>
        </div>
        {% endif %}
    </section>
</div>
{% endblock %}