{% extends 'main/base.html' %}
{% load i18n %}

{% block title %}{% trans "Withdrawal PIN" %} - ODEON{% endblock %}

{% block top_icon %}
    <a href="/personal/" class="top-icon-btn">👤</a>
{% endblock %}

{% block content %}
    <div class="content-card section-inner" style="max-width: 520px; margin: 0 auto; position: relative;">
        {% include 'main/_subheader.html' with title=_("Withdrawal PIN") back="/personal/" %}

        {% if success %}
        <div style="text-align: center;">
            <div style="width: 72px; height: 72px; border-radius: 50%; margin: 0 auto 1.5rem; display: grid; place-items: center; background: rgba(34, 197, 94, 0.12); border: 2px solid rgba(34, 197, 94, 0.3); color: #34d399; font-size: 2rem;">✓</div>
            <h3 style="margin: 0 0 0.5rem; color: var(--text-main);">{% trans "Withdrawal PIN Saved" %}</h3>
            <p style="margin: 0 0 2rem; color: var(--text-muted);">{% trans "Your 4-digit withdrawal PIN has been set. You will be asked for it when withdrawing." %}</p>
            <a href="/personal/" class="button primary" style="display: inline-flex;">{% trans "Back to Personal Center" %}</a>
        </div>
        {% else %}
        {% if error %}
        <div style="padding: 0.85rem 1rem; border-radius: 12px; background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3); color: #f87171; font-size: 0.9rem; margin-bottom: 1.25rem;">{{ error }}</div>
        {% endif %}

        <p style="margin: 0 0 1.25rem; color: var(--text-muted); font-size: 0.9rem; line-height: 1.5;">
            {% if has_pin %}{% trans "Enter your current PIN, then choose a new 4-digit withdrawal PIN." %}{% else %}{% trans "Set a 4-digit withdrawal PIN. It will be required to confirm every withdrawal." %}{% endif %}
        </p>

        <form method="post" action="{% url 'withdrawal_pin' %}">
            {% csrf_token %}

            {% if has_pin %}
            <!-- Current PIN -->
            <div style="display: flex; align-items: center; gap: 1rem; padding: 1rem 0.25rem; border-bottom: 1px solid rgba(255,255,255,0.08);">
                <label for="current_pin" style="min-width: 120px; color: var(--text-main); font-weight: 700; font-size: 0.95rem;">{% trans "Current PIN" %}</label>
                <input type="password" id="current_pin" name="current_pin" inputmode="numeric" maxlength="4" pattern="[0-9]{4}" required
                       placeholder="••••" autocomplete="off"
                       style="flex: 1; min-width: 0; padding: 0.5rem 0; border: none; background: transparent; color: var(--text-main); font-size: 1.2rem; letter-spacing: 0.5em; outline: none;" />
            </div>
            {% endif %}

            <!-- New PIN -->
            <div style="display: flex; align-items: center; gap: 1rem; padding: 1rem 0.25rem; border-bottom: 1px solid rgba(255,255,255,0.08);">
                <label for="new_pin" style="min-width: 120px; color: var(--text-main); font-weight: 700; font-size: 0.95rem;">{% trans "New PIN" %}</label>
                <input type="password" id="new_pin" name="new_pin" inputmode="numeric" maxlength="4" pattern="[0-9]{4}" required
                       placeholder="{% trans 'Enter 4 digits' %}" autocomplete="off"
                       style="flex: 1; min-width: 0; padding: 0.5rem 0; border: none; background: transparent; color: var(--text-main); font-size: 1.2rem; letter-spacing: 0.4em; outline: none;" />
            </div>

            <!-- Confirm PIN -->
            <div style="display: flex; align-items: center; gap: 1rem; padding: 1rem 0.25rem; border-bottom: 1px solid rgba(255,255,255,0.08);">
                <label for="confirm_pin" style="min-width: 120px; color: var(--text-main); font-weight: 700; font-size: 0.95rem;">{% trans "Confirm PIN" %}</label>
                <input type="password" id="confirm_pin" name="confirm_pin" inputmode="numeric" maxlength="4" pattern="[0-9]{4}" required
                       placeholder="{% trans 'Re-enter 4 digits' %}" autocomplete="off"
                       style="flex: 1; min-width: 0; padding: 0.5rem 0; border: none; background: transparent; color: var(--text-main); font-size: 1.2rem; letter-spacing: 0.4em; outline: none;" />
            </div>

            <button type="submit"
                    style="width: 100%; padding: 1rem; margin-top: 2rem; border-radius: 999px; background: #38bdf8; border: none; color: #fff; font-weight: 700; font-size: 1rem; cursor: pointer;">{% trans "Save Withdrawal PIN" %}</button>
        </form>
        {% endif %}
    </div>
{% endblock %}