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

{% block content %}
<div class="container py-4">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card shadow-sm">
                <div class="card-header bg-white">
                    <h4 class="mb-0">Import Deck</h4>
                </div>
                <div class="card-body">
                    <form method="post">
                        {% csrf_token %}
                        
                        <div class="mb-3">
                            <label for="name" class="form-label">Deck Name</label>
                            <input type="text" class="form-control" id="name" name="name" required>
                        </div>

                        <div class="mb-3">
                            <label for="game" class="form-label">Game</label>
                            <select class="form-select" id="game" name="game" required>
                                {% for game in games %}
                                <option value="{{ game.id }}">{{ game.name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        
                        <div class="mb-3">
                            <label for="deckList" class="form-label">Deck List</label>
                            <div class="form-text mb-2">
                                Supported formats: Arena, MTGO, Moxfield, Plain Text. 
                                <br>Example: <code>4 Lightning Bolt</code> or <code>1 Sheoldred, the Apocalypse (DMU) 107</code>
                            </div>
                            <textarea class="form-control" id="deckList" name="deck_list" rows="15" required 
                                placeholder="1 Card Name&#10;1 Another Card&#10;...&#10;SIDEBOARD:&#10;1 Sideboard Card"></textarea>
                        </div>

                        <div class="d-grid gap-2">
                            <button type="submit" class="btn btn-primary">Import Deck</button>
                            <a href="{% url 'decks:deck_list' %}" class="btn btn-outline-secondary">Cancel</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}