{% extends 'layout/backEndLayout.html.twig' %}

{% block title %}Nouveau paiement - {{ parent() }}{% endblock %}

{% block content %}
    {% form_theme form 'bootstrap_4_layout.html.twig' %}

    <div class="row mt-4">
        <div class="col-2">
            <div class="btn-group record_actions m-2">
                <a class="btn btn-info" href="{{ path('app_payment_index') }}" title="Retour à la liste">
                    <i class="fa fa-list"></i>
                </a>
            </div>
        </div>

        <div class="col-10">
            <div class="jumbotron mx-auto">
                <div class="col-md-8 mx-auto">
                    <article class="text-center">
                        <div class="card-header mb-3">
                            <h4 class="my-0 font-weight-normal text-uppercase">
                                Enregistrement de paiement
                            </h4>
                        </div>

                        {# On rend directement le formulaire avec target="_blank" #}
                        {{ form_start(form, {
                            'attr': {
                                'target': '_blank'   # Ouvre le reçu dans un nouvel onglet après validation
                            }
                        }) }}
                            <div class="card p-4 shadow-sm">
                                {{ form_widget(form) }}

                                <div class="mt-3">
                                    <button class="btn btn-success">
                                        <i class="fa fa-check"></i> Valider et ouvrir le reçu
                                    </button>
                                    <a href="{{ path('app_payment_index') }}" class="btn btn-secondary ms-2">
                                        <i class="fa fa-arrow-left"></i> Annuler
                                    </a>
                                </div>
                            </div>
                        {{ form_end(form) }}
                    </article>
                </div>
            </div>
        </div>
    </div>
{% endblock %}