inital checkin

templates/decks/deck_list.html

@@ -0,0 +1,47 @@
+{% 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 %}