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

{% block content %}
<div
    style="max-width: 400px; margin: 4rem auto; background: var(--card-bg); padding: 2rem; border-radius: 0.5rem; border: 1px solid var(--border-color);">
    <h2 style="margin-top: 0;">Create New Deck</h2>
    <form method="post">
        {% csrf_token %}
        <div style="margin-bottom: 1rem;">
            <label style="display: block; margin-bottom: 0.5rem;">Deck Name</label>
            <input type="text" name="name" required
                style="width: 100%; padding: 0.5rem; border-radius: 0.25rem; background: var(--bg-color); color: var(--text-color); border: 1px solid var(--border-color);">
        </div>

        <div style="margin-bottom: 1.5rem;">
            <label style="display: block; margin-bottom: 0.5rem;">Game Format</label>
            <select name="game" required
                style="width: 100%; padding: 0.5rem; border-radius: 0.25rem; background: var(--bg-color); color: var(--text-color); border: 1px solid var(--border-color);">
                {% for game in games %}
                <option value="{{ game.id }}">{{ game.name }}</option>
                {% endfor %}
            </select>
        </div>

        <button type="submit" class="btn" style="width: 100%;">Create Deck</button>
    </form>
</div>
{% endblock %}