{% load bootstrap5 %}
{% load i18n %}

{% block content %}
<div class="container my-5">
    <div class="row justify-content-center">
        <div class="col-md-8 col-lg-6">
            <div class="text-center mb-5 mt-3">
                <h1 class="display-6 my-4 lh-1 fw-bold">{% trans "New payment" %}</h1>
            </div>
            <form method="POST" class="row g-3" id="payment-form">
                {% csrf_token %}
                <div class="col-12">{% bootstrap_field form.payer_iban %}</div>
                <div class="col-12">{% bootstrap_field form.amount %}</div>
                <div class="col-12">{% bootstrap_field form.beneficiary_iban %}</div>
                <div class="col-12">{% bootstrap_field form.variable_symbol %}</div>
                <div class="col-12">
                    {% bootstrap_field form.specific_symbol %}
                    {% if form.specific_symbol.errors %}
                    <div class="text-danger">{{ form.specific_symbol.errors|join:", " }}</div>
                    {% endif %}
                </div>
                <div class="col-12">
                    {% bootstrap_field form.constant_symbol %}
                    {% if form.constant_symbol.errors %}
                    <div class="text-danger">{{ form.constant_symbol.errors|join:", " }}</div>
                    {% endif %}
                </div>
                <div class="col-12">
                    {% bootstrap_field form.information %}
                    {% if form.information.errors %}
                    <div class="text-danger">{{ form.information.errors|join:", " }}</div>
                    {% endif %}
                </div>
                <div class="col-12 mt-4">
                    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#confirmationModal">{% trans "Send payment" %}</button>
                    <a href="{% url 'account_list' %}" class="btn btn-outline-primary">{% trans "Back" %}</a>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="confirmationModal" tabindex="-1" aria-labelledby="confirmationModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="confirmationModalLabel">{% trans "Confirm Payment" %}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% trans 'Close' %}"></button>
            </div>
            <div class="modal-body">
                <p>{% trans "Are you sure you want to send the payment?" %}</p>
            </div>
            <div class="modal-footer">
                <button type="submit" form="payment-form" class="btn btn-primary">{% trans "Confirm" %}</button>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans "Cancel" %}</button>
            </div>
        </div>
    </div>
</div>

<script>
        document.addEventListener("keydown", function (event) {
            if (event.key === "Enter" && !event.shiftKey) {
                const el = document.activeElement;
                if (["INPUT", "SELECT", "TEXTAREA"].includes(el.tagName)) event.preventDefault();
            }
        });
    </script>
{% endblock %}