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

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

{% block content %}
    <div class="content-card section-inner" style="max-width: 500px; margin: 0 auto; text-align: center;">
        {% include 'main/_subheader.html' with title=_("Withdrawal") back="/personal/" %}
        <div style="width: 72px; height: 72px; border-radius: 50%; margin: 1.5rem 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>
        <h2 style="margin: 0 0 0.5rem; color: var(--text-main); font-size: 1.3rem;">{% trans "Withdrawal Submitted" %}</h2>
        <p style="margin: 0 0 0.5rem; color: var(--text-muted);">{% trans "Your withdrawal request has been sent to an administrator for approval." %}</p>
        <p style="margin: 0 0 1rem; color: #fbbf24; font-size: 1.8rem; font-weight: 800;">€{{ amount }}</p>
        <p style="margin: 0 0 0.5rem; color: var(--text-muted); font-size: 0.9rem;">{% trans "Method" %}: {{ method_label }}</p>
        {% if address %}
        <p style="margin: 0 0 0.75rem; color: var(--text-muted); font-size: 0.85rem; word-break: break-all;">{% trans "Withdrawal address" %}: {{ address }}</p>
        {% endif %}
        {% if pending %}
        <p style="margin: 0 0 2rem; display: inline-block; padding: 0.35rem 0.9rem; border-radius: 999px; background: rgba(251,191,36,0.12); border: 1px solid rgba(251,191,36,0.3); color: #fbbf24; font-size: 0.8rem; font-weight: 700;">{% trans "Pending approval" %}</p>
        {% else %}
        <div style="margin: 0 0 2rem;"></div>
        {% endif %}

        <a href="/personal/" class="button primary" style="display: inline-flex;">{% trans "Back to Personal Center" %}</a>
    </div>
{% endblock %}