{% extends "base.html" %}
{% load i18n %}

{% block title %}{% trans "Verify payment" %}{% endblock %}

{% block content %}
<div style="background:linear-gradient(180deg,#FFF 0%,#95B9FF 100%);">
  <div class="container px-1 py-4" style="min-height:70vh;">

    <h2 class="display-6 my-4 lh-1 fw-bold text-center text-lg-start">
      {% trans "Payment verification" %}
    </h2>

    <div class="row justify-content-center">
      <div class="col-12 col-md-8 col-lg-6">
        <div class="card shadow-sm">
          <div class="card-body">

            <p class="mb-3">
              {% if request.user.email %}
              {% blocktrans with email=request.user.email %}
              We have sent a verification code to {{ email }}. Enter the code below to confirm the payment.
              {% endblocktrans %}
              {% else %}
              {% trans "Enter the verification code that was sent to your email." %}
              {% endif %}
            </p>

            <ul class="list-unstyled small mb-4">
              <li>
                <strong>{% trans "From account" %}:</strong>
                {{ verification.payer_account.name }} ({{ verification.payer_account.iban }})
              </li>
              <li>
                <strong>{% trans "To account" %}:</strong>
                {{ verification.beneficiary_account.name }} ({{ verification.beneficiary_account.iban }})
              </li>
              <li>
                <strong>{% trans "Amount" %}:</strong>
                {{ verification.amount }} EUR
              </li>
              {% if verification.information %}
              <li>
                <strong>{% trans "Information" %}:</strong>
                {{ verification.information }}
              </li>
              {% endif %}
            </ul>

            <form method="post">
              {% csrf_token %}

              <div class="mb-3">
                {{ form.code.label_tag }}
                {{ form.code }}
                {% if form.code.errors %}
                <div class="text-danger small">
                  {{ form.code.errors|join:", " }}
                </div>
                {% endif %}
              </div>

              {% if form.non_field_errors %}
              <div class="alert alert-danger py-2">
                {{ form.non_field_errors|join:", " }}
              </div>
              {% endif %}

              <div class="d-flex justify-content-between">
                <a href="javascript:history.back()" class="btn btn-outline-secondary">
                  {% trans "Cancel" %}
                </a>
                <button type="submit" class="btn btn-primary">
                  {% trans "Confirm payment" %}
                </button>
              </div>
            </form>

          </div>
        </div>
      </div>
    </div>

  </div>
</div>
{% endblock %}