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

{% block content %}
<div style="max-width: 1200px; margin: 0 auto;">
    <h1 style="margin-bottom: 2rem;">My Packs</h1>
    {% if packs %}
    <div class="card-grid">
        {% for pack in packs %}
        <div class="tcg-card">
            <div style="aspect-ratio: 2.5/3.5; background: linear-gradient(135deg, #4f46e5, #0ea5e9); position: relative; display: flex; align-items: center; justify-content: center;">
                 <div style="text-align: center; color: white;">
                    <div style="font-size: 3rem;">🎁</div>
                    <div>{{ pack.listing.name }}</div>
                </div>
            </div>
            <div class="tcg-card-body" style="text-align: center;">
                <h4 style="margin: 0 0 0.5rem; font-size: 1rem;">{{ pack.listing.name }}</h4>
                <a href="{% url 'store:open_pack' pack.uuid %}" class="btn" style="width: 100%; display: block; margin-top: 1rem;">Open Pack</a>
            </div>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <div style="text-align: center; padding: 4rem; background: var(--card-bg); border-radius: 0.5rem;">
        <p>You don't have any sealed packs.</p>
        <a href="{% url 'store:pack_list' %}" class="btn">Buy Packs</a>
    </div>
    {% endif %}
</div>
{% endblock %}