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

{% block title %}{% trans "Bind wallet address" %} - ODEON{% endblock %}

{% block top_icon %}
    <a href="/personal/" id="menu-button" style="width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: transparent; border: 2px solid rgba(255,255,255,0.2); color: var(--text-muted); font-size: 1.4rem; text-decoration: none;">👤</a>
{% endblock %}

{% block content %}
    <div style="max-width: 520px; margin: 0 auto; position: relative;">
        {% if form_method %}
            {% include 'main/_subheader.html' with title=_("Bind wallet address") back="/bind-wallet/" %}
        {% else %}
            {% include 'main/_subheader.html' with title=_("Bind wallet address") back="/personal/" %}
        {% endif %}

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

        {% if is_bank %}
        {# --- Detailed bank / Revolut binding form --- #}
        <style>
            .bind-row { display: flex; align-items: center; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
            .bind-row label { flex: none; width: 130px; color: var(--text-main); font-weight: 700; font-size: 0.9rem; display: flex; align-items: center; gap: 0.5rem; }
            .bind-row input { flex: 1; min-width: 0; padding: 0.5rem 0; border: none; background: transparent; color: var(--text-main); font-size: 0.95rem; outline: none; text-align: right; }
            .bind-row input::placeholder { color: var(--text-muted); }
        </style>
        <form method="post" action="{% url 'bind_wallet' %}">
            {% csrf_token %}
            <input type="hidden" name="network" value="{{ form_method.id }}" />

            <div class="bind-row">
                <label>👤 {% trans "Account Name" %}</label>
                <input type="text" name="account_name" autocomplete="off" required
                       placeholder="{% trans 'Please Enter Your Name' %}" value="{{ binding.account_name|default:'' }}" />
            </div>
            <div class="bind-row">
                <label>💳 {% if form_method.id == 'iban' %}{% trans "IBAN" %}{% else %}{% trans "Account number" %}{% endif %}</label>
                <input type="text" name="account_number" autocomplete="off" {% if form_method.id == 'iban' %}required{% endif %}
                       placeholder="{% trans 'Please Enter Bank Number' %}" value="{{ binding.account_number|default:'' }}" />
            </div>
            <div class="bind-row">
                <label>📞 {% trans "Contact Number" %}</label>
                <input type="text" name="contact_number" autocomplete="off"
                       placeholder="{% trans 'Please Enter Contact Number' %}" value="{{ binding.contact_number|default:'' }}" />
            </div>
            <div class="bind-row">
                <label>✉️ {% trans "Email" %}</label>
                <input type="email" name="email" autocomplete="off"
                       placeholder="{% trans 'Please Enter Email' %}" value="{{ binding.email|default:'' }}" />
            </div>
            <div class="bind-row">
                <label>🎂 {% trans "Date of birth" %}</label>
                <input type="text" name="date_of_birth" autocomplete="off"
                       placeholder="{% trans 'Please enter Date of birth' %}" value="{{ binding.date_of_birth|default:'' }}" />
            </div>
            {% if form_method.id == 'revolut' %}
            <div class="bind-row">
                <label>🏷️ {% trans "Revtag" %}</label>
                <input type="text" name="revtag" autocomplete="off" required
                       placeholder="{% trans 'Please enter Revtag' %}" value="{{ binding.revtag|default:'' }}" />
            </div>
            {% endif %}

            <ul style="margin: 1.5rem 0; padding-left: 1.1rem; color: var(--text-muted); font-size: 0.82rem; line-height: 1.7;">
                <li>{% trans "Please confirm the binding information. If the binding has been confirmed, no modifications can be made afterwards." %}</li>
                <li>{% trans "If you need to modify your bank account information under special circumstances, please contact our customer service for modification." %}</li>
                <li>{% trans "When modifying bank account information, our customer service will verify your mobile phone number, bank card number and identification with you." %}</li>
            </ul>

            <button type="submit"
                    style="width: 100%; padding: 1rem; border-radius: 999px; background: #2f86d6; border: none; color: #fff; font-weight: 700; font-size: 1rem; cursor: pointer;">{% trans "Confirm" %}</button>
        </form>

        {% else %}
        {# --- Address-entry form for one selected crypto method --- #}
        <form method="post" action="{% url 'bind_wallet' %}">
            {% csrf_token %}
            <input type="hidden" name="network" value="{{ form_method.id }}" />

            <p style="margin: 0 0 1rem; color: var(--text-main); font-weight: 700; font-size: 1rem;">{{ form_method.label }}</p>

            <label for="address" style="display: block; margin: 0 0 0.5rem; color: var(--text-muted); font-size: 0.9rem;">{% trans "Wallet Address" %}</label>
            <input type="text" id="address" name="address" required autocomplete="off"
                   placeholder="{% trans 'Enter your wallet address' %}" value="{{ address|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;" />

            <p style="margin: 0 0 1.75rem; color: var(--text-muted); font-size: 0.82rem; line-height: 1.6;">{% trans "Make sure the address matches the selected network. Funds sent to a wrong address or network cannot be recovered." %}</p>

            <button type="submit"
                    style="width: 100%; padding: 1rem; border-radius: 10px; background: #2563eb; border: none; color: #fff; font-weight: 700; font-size: 1rem; cursor: pointer;">{% trans "Bind Address" %}</button>
        </form>
        {% endif %}

        {% else %}
        {# --- Account selection list --- #}
        <p style="margin: 0 0 1rem; color: var(--text-muted); font-size: 0.95rem;">{% trans "Please select a bank account" %}</p>

        <div style="display: grid; gap: 0.85rem;">
            {% for m in methods %}
            <a href="/bind-wallet/?network={{ m.id }}" style="text-decoration: none; color: inherit;">
                <div style="display: flex; align-items: center; gap: 1rem; padding: 1rem; border-radius: 14px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07);">
                    <div style="width: 42px; height: 42px; border-radius: 50%; flex: none; display: grid; place-items: center; background: {{ m.color }}; color: #fff; font-size: 1.2rem; font-weight: 800;">
                        {% if m.id == 'iban' %}🏦{% else %}{{ m.icon }}{% endif %}
                    </div>
                    <span style="flex: 1; color: var(--text-main); font-weight: 700; font-size: 0.95rem; text-align: center;">{{ m.label }}</span>
                    {% if m.bound %}
                    <span style="color: var(--text-muted); font-size: 0.9rem; letter-spacing: 0.05em;">{{ m.masked }}</span>
                    {% else %}
                    <span style="color: #60a5fa; font-size: 1.3rem;">›</span>
                    {% endif %}
                </div>
            </a>
            {% endfor %}

            {# IBAN highlighted card #}
            <a href="/bind-wallet/?network=iban" style="text-decoration: none; color: inherit;">
                <div style="padding: 1.1rem 1.25rem; border-radius: 14px; background: linear-gradient(135deg, #38bdf8, #2563eb);">
                    <p style="margin: 0 0 0.4rem; color: #fff; font-weight: 800; font-size: 1rem;">{% trans "IBAN" %}</p>
                    {% if iban %}
                    <p style="margin: 0; color: #eef6ff; font-size: 0.9rem; word-break: break-all;">{{ iban.address }}</p>
                    {% else %}
                    <p style="margin: 0; color: #eef6ff; font-size: 0.9rem;">{% trans "Tap to add your IBAN" %} ›</p>
                    {% endif %}
                </div>
            </a>
        </div>
        {% endif %}
    </div>
{% endblock %}