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

{% block content %}
<div style="max-width: 800px; margin: 0 auto;">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem;">
        <h1>My Decks</h1>

        {% if user.profile.is_pro %}
        <div class="col-md-6 text-end">
            <a href="{% url 'decks:deck_import' %}" class="btn btn-outline-primary me-2">
                <i class="bi bi-upload"></i> Import Deck
            </a>
            <a href="{% url 'decks:deck_create' %}" class="btn btn-primary">
                <i class="bi bi-plus-lg"></i> Create New Deck
            </a>
        </div>
        {% else %}
        <a href="{% url 'users:profile' %}" class="btn" style="background: #475569;">Upgrade to Pro to Create Decks</a>
        {% endif %}
    </div>

    {% if decks %}
    <div class="card-grid">
        {% for deck in decks %}
        <div class="tcg-card">
            <a href="{% url 'decks:deck_builder' deck.id %}"
                style="text-decoration: none; color: inherit; display: block; height: 100%;">
                <div
                    style="background: #334155; height: 120px; display: flex; align-items: center; justify-content: center; font-size: 3rem;">
                    🎴
                </div>
                <div class="tcg-card-body">
                    <h3 style="margin: 0;">{{ deck.name }}</h3>
                    <p style="margin: 0.25rem 0 0; color: #94a3b8; font-size: 0.875rem;">{{ deck.game.name }}</p>
                    <p style="margin: 0.5rem 0 0; font-size: 0.875rem;">{{ deck.cards.count }} cards</p>
                </div>
            </a>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <div style="text-align: center; padding: 4rem; background: var(--card-bg); border-radius: 0.5rem; color: #94a3b8;">
        <p style="font-size: 1.25rem;">You haven't created any decks yet.</p>
    </div>
    {% endif %}
</div>
{% endblock %}