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

{% block content %}
<div class="container" style="max-width: 600px; margin: 0 auto; padding-top: 2rem;">
    <div style="background: var(--card-bg); padding: 2rem; border-radius: 0.5rem; border: 1px solid var(--border-color);">
        <h2 style="margin-top: 0;">Add Payment Method</h2>
        <div style="background: #3b82f620; border: 1px solid #3b82f6; padding: 1rem; border-radius: 0.5rem; margin-bottom: 1.5rem;">
            <p style="margin: 0; color: #60a5fa; font-size: 0.875rem;"><strong>Note:</strong> This is a demo. Do not enter real credit card information.</p>
        </div>
        <form method="post">
            {% csrf_token %}
            <div style="display: grid; gap: 1rem;">
                {% for field in form %}
                <div style="display: flex; flex-direction: column; gap: 0.5rem;">
                    <label for="{{ field.id_for_label }}" style="font-weight: 500;">{{ field.label }}</label>
                    {{ field }}
                    {% if field.errors %}
                    <span style="color: #ef4444; font-size: 0.875rem;">{{ field.errors.0 }}</span>
                    {% endif %}
                </div>
                {% endfor %}
            </div>
            <div style="margin-top: 2rem; display: flex; gap: 1rem;">
                <button type="submit" class="btn">Save Payment Method</button>
                <a href="{% url 'users:profile' %}" class="btn" style="background: transparent; border: 1px solid var(--border-color);">Cancel</a>
            </div>
        </form>
    </div>
</div>
{% endblock %}