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

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

{% block content %}
    <div class="content-card section-inner" style="position: relative;">
        {% include 'main/_subheader.html' with title=_("Deposit") back="/wallet/" %}

        <!-- Account balance -->
        <p style="margin: 0 0 0.4rem; color: var(--text-main); font-size: 1rem; font-weight: 600;">{% trans "Account balance" %}</p>
        <p style="margin: 0 0 1.5rem; color: var(--text-main); font-size: 1.6rem; font-weight: 800;">{{ balance }}</p>

        <!-- Bound wallet -->
        {% if wallet %}
        <div style="padding: 1rem; border-radius: 12px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); margin-bottom: 1.75rem;">
            <p style="margin: 0 0 0.35rem; color: var(--text-muted); font-size: 0.82rem;">{% trans "Wallet Address" %} · {{ wallet.network_label }}</p>
            <p style="margin: 0; color: var(--text-main); font-size: 0.9rem; word-break: break-all;">{{ wallet.address }}</p>
        </div>
        {% else %}
        <a href="/bind-wallet/" style="display: block; text-decoration: none; padding: 1rem; border-radius: 12px; background: rgba(37, 99, 235, 0.1); border: 1px solid rgba(37, 99, 235, 0.3); color: #93c5fd; font-size: 0.9rem; margin-bottom: 1.75rem;">{% trans "Bind a wallet address to your account" %} ›</a>
        {% endif %}

        {% 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 %}

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

            <!-- Deposit method -->
            <p style="margin: 0 0 1rem; color: var(--text-main); font-weight: 700;">{% trans "Please Select A Deposit Method:" %}</p>
            <div style="display: grid; gap: 0.85rem; margin-bottom: 1.75rem;">
                {% for method in payment_methods %}
                <label style="display: flex; align-items: center; gap: 0.9rem; padding: 1rem; border-radius: 10px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); cursor: pointer;">
                    <span style="width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none; background: {{ method.color }}; color: #fff; font-size: 1.1rem; font-weight: 700;">{{ method.icon }}</span>
                    <span style="color: var(--text-main); font-weight: 600; flex: 1;">{{ method.label }}</span>
                    <input type="radio" name="method" value="{{ method.id }}" {% if forloop.first %}checked{% endif %} style="width: 20px; height: 20px; accent-color: #2563eb;" />
                </label>
                {% endfor %}
            </div>

            <!-- Deposit amount -->
            <p style="margin: 0 0 0.6rem; color: var(--text-main); font-weight: 700; font-size: 0.95rem;">{% trans "Deposit Amount" %}</p>
            <input type="number" id="amount" name="amount" min="1" step="0.01" required
                   placeholder="{% trans 'Enter Deposit Amount' %}" value="{{ amount|default:'' }}"
                   style="width: 100%; padding: 1rem; border-radius: 10px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); color: var(--text-main); font-size: 1rem; margin-bottom: 1rem;" />

            <!-- Quick amounts -->
            <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; margin-bottom: 1.75rem;">
                {% for q in quick_amounts %}
                <button type="button" onclick="document.getElementById('amount').value = '{{ q }}';"
                        style="padding: 0.85rem; border-radius: 8px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); color: var(--text-main); font-weight: 600; cursor: pointer;">{{ q }}</button>
                {% endfor %}
            </div>

            <!-- Deposit now -->
            <button type="submit"
                    style="width: 100%; padding: 1rem; border-radius: 10px; background: transparent; border: 1px solid #f97316; color: #f97316; font-weight: 700; font-size: 1rem; cursor: pointer; margin-bottom: 1.75rem;">{% trans "Deposit now" %}</button>
        </form>

        <!-- Deposit description -->
        <h3 style="margin: 0 0 0.75rem; color: var(--text-main); font-size: 1rem;">{% trans "Deposit description" %}</h3>
        <p style="margin: 0; color: var(--text-muted); font-size: 0.85rem; line-height: 1.6;">{% trans "Select a deposit method and enter the amount you wish to top up. Once submitted, your deposit will be processed and reflected in your account balance." %}</p>
    </div>
{% endblock %}