{% extends 'base.html.twig' %}

{% block body %}
<div class="container">
    {% if qrCodeImage %}
        <div class="d-flex p-3 justify-content-center qr-code-image">
            <img src="data:image/png;base64,{{ qrCodeImage }}" alt="QR code" />
        </div>
        <h2 class="header-another-code">{{  "You can generate another QR code here" | trans }}:</h2>
    {% endif %}
    {{ form_start(form) }}
    <div class="mb-3 col-auto">
        {{ form_label(form.iban) }}
        {{ form_widget(form.iban) }}

        <small>{{ form_help(form.iban) }}</small>

        <div class="form-error">
            {{ form_errors(form.iban) }}
        </div>
    </div>
    <div class="mb-3 col-auto">
        {{ form_label(form.dueDate) }}
        {{ form_widget(form.dueDate) }}

        <small>{{ form_help(form.dueDate) }}</small>

        <div class="form-error">
            {{ form_errors(form.dueDate) }}
        </div>
    </div>
    <div class="mb-3 col-auto">
        {{ form_label(form.message) }}
        {{ form_widget(form.message) }}

        <small>{{ form_help(form.message) }}</small>

        <div class="form-error">
            {{ form_errors(form.message) }}
        </div>
    </div>
    {# money #}
    <div class="mb-3 col-auto">
        <div class="d-flex">
            <div class="p-2">
                {{ form_label(form.money.amount) }}
                {{ form_widget(form.money.amount) }}

                <small>{{ form_help(form.money.amount) }}</small>

                <div class="form-error">
                    {{ form_errors(form.money.amount) }}
                </div>
            </div>
            <div class="p-2">
                {{ form_label(form.money.currency) }}
                {{ form_widget(form.money.currency) }}

                <small>{{ form_help(form.money.currency) }}</small>

                <div class="form-error">
                    {{ form_errors(form.money.currency) }}
                </div>
            </div>
        </div>
    </div>
    {# payment identification #}
    <div class="mb-3 col-auto">
        <div class="d-flex">
            <div class="p-2">
                {{ form_label(form.paymentIdentification.variableSymbol) }}
                {{ form_widget(form.paymentIdentification.variableSymbol) }}

                <small>{{ form_help(form.paymentIdentification.variableSymbol) }}</small>

                <div class="form-error">
                    {{ form_errors(form.paymentIdentification.variableSymbol) }}
                </div>
            </div>
            <div class="p-2">
                {{ form_label(form.paymentIdentification.constantSymbol) }}
                {{ form_widget(form.paymentIdentification.constantSymbol) }}

                <small>{{ form_help(form.paymentIdentification.constantSymbol) }}</small>

                <div class="form-error">
                    {{ form_errors(form.paymentIdentification.constantSymbol) }}
                </div>
            </div>
            <div class="p-2">
                {{ form_label(form.paymentIdentification.specificSymbol) }}
                {{ form_widget(form.paymentIdentification.specificSymbol) }}

                <small>{{ form_help(form.paymentIdentification.specificSymbol) }}</small>

                <div class="form-error">
                    {{ form_errors(form.paymentIdentification.specificSymbol) }}
                </div>
            </div>
        </div>
    </div>
    {{ form_end(form) }}
</div>
{% endblock %}