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

{% block title %}{% trans "Deposit" %} - 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=_("Deposit") back="/wallet/" %}
        <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 "Deposit Successful" %}</h2>
        <p style="margin: 0 0 0.5rem; color: var(--text-muted);">{% trans "Your deposit has been credited to your account." %}</p>
        <p style="margin: 0 0 2rem; 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>
        <p style="margin: 0 0 2rem; color: var(--text-muted); font-size: 0.9rem;">{% trans "New balance" %}: {{ balance }}</p>

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