{% extends "partials/dashboard-base.html" %}
{% load static %}
{% block content %}
<section class="dashboard-section body-collapse">
    <div class="overlay pt-120">
        <div class="container-fruid">
            <div class="main-content">
                <div class="head-area d-flex align-items-center justify-content-between">
                    <h4>Create a New Card</h4>
                </div>

                <form method="POST">
                    {% csrf_token %}
                    <div class="mb-3">
                        <label class="form-label">Card Holder Name</label>
                        <input type="text" name="name" class="form-control" required>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Card Type</label>
                        <select name="card_type" class="form-select" required>
                            <option value="master">MasterCard</option>
                            <option value="visa">Visa</option>
                            <option value="verve">Verve</option>
                        </select>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Expiry Month</label>
                        <select name="month" class="form-select" required>
                            {% for i in "123456789101112" %}
                                <option value="{{ i }}">{{ i }}</option>
                            {% endfor %}
                        </select>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Expiry Year</label>
                        <select name="year" class="form-select" required>
                            {% for i in "2024,2025,2026,2027,2028,2029,2030" %}
                                <option value="{{ i }}">{{ i }}</option>
                            {% endfor %}
                        </select>
                    </div>

                    <button type="submit" class="btn btn-primary w-100">Create Card</button>
                </form>
            </div>
        </div>
    </div>
</section>
{% endblock %}