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

{% block content %}
<div style="max-width: 1200px; margin: 0 auto;">
    <h1 style="margin-bottom: 2rem;">Booster Packs</h1>
    <div class="card-grid">
        {% for pack in packs %}
        <div class="tcg-card">
            <div style="aspect-ratio: 2.5/3.5; background: #334155; position: relative; display: flex; align-items: center; justify-content: center;">
                {% if pack.image_url %}
                <img src="{{ pack.image_url }}" alt="{{ pack.name }}" style="width: 100%; height: 100%; object-fit: cover;">
                {% else %}
                <div style="text-align: center; padding: 1rem;">
                    <div style="font-size: 3rem;">📦</div>
                    <div>{{ pack.game.name }}</div>
                </div>
                {% endif %}
            </div>
            <div class="tcg-card-body">
                <h4 style="margin: 0 0 0.5rem; font-size: 1rem;">{{ pack.name }}</h4>
                <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 1rem;">
                    <span style="font-weight: 700;">${{ pack.price }}</span>
                    <a href="{% url 'store:add_pack_to_cart' pack.id %}" class="btn" style="padding: 0.25rem 0.75rem; font-size: 0.875rem;">Add to Cart</a>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
</div>
{% endblock %}