{# Ajout fichier base.html.twig #}
{% extends 'base.html.twig' %}

{# Titre de la page #}
{% block title %}Attribuer un format à une clinique{% endblock %}

{# Corps de la page #}
{% block body %}
    {# Verification de si une erreur est détecté #}
    {% if error is defined %}
        {# Si erreur est detecté #}
        {% if error == true %}
            {# Afficher le message d'erreur #}
            <div id="errorAlert" class="alert alert-danger alert-dismissible fade show position-absolute" role="alert" style="position:relative; top: 10px; right: 10px; z-index: 100;">
                <strong>Erreur : </strong>
                {{ errormsg }}
                <button type="button" class="close" data-dismiss="alert" aria-label="Fechar">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            {# Script Javascript #}
            <script>
                // afficher une alerte d'erreur dès que la page est chargée.
                document.addEventListener('DOMContentLoaded', function () {
                    document.getElementById('errorAlert').style.display = 'block';
                });

                //Fonction pour fermer automatiquement l'alerte après quelques secondes (5 secondes).
                setTimeout(function () {
                    document.getElementById('errorAlert').style.display = 'none';
                }, 5000); // 5000 millisecondes = 5 secondes
            </script>
        {% endif %}
    {% endif %}
        {# Si le format à été associé avec succés #}
        {% if success is defined %}
        {# Afficher le message de succés #}
        {% if success == true %}
            <div id="success" class="alert alert-success alert-dismissible fade show position-absolute" role="alert" style="position:relative; top: 10px; right: 10px; z-index: 100;">
                <strong>Success : </strong>
                {{ successmsg }}
                <button type="button" class="close" data-dismiss="alert" aria-label="Fechar">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            {# Script JavaScript #}
            <script>
                // afficher une alerte de succés dès que la page est chargée
                document.addEventListener('DOMContentLoaded', function () {
                    document.getElementById('success').style.display = 'block';
                });

                //Fonction pour fermer automatiquement l'alerte après quelques secondes (5 secondes).
                setTimeout(function () {
                    document.getElementById('success').style.display = 'none';
                }, 5000); // 5000 millisecondes = 5 secondes
            </script>

        {% endif %}
    {% endif %}
    <br>
    <center>
        <div class="container"> {# Conteneur d'affichage  #}
            <div class="row justify-content-center">
                <div class="col-md-8"> {# Taille de la carte #}

                    <div class="card shadow mb-4">
                        <div class="card-header py-3">
                            {# Titre de la carte #}
                            <h6 class="m-0 font-weight-bold text-primary">Associer un format à {{ clinique.nomClinique }}</h6>
                        </div>
                        <div class="card-body">
                            {# Affichage données Formulaires#}
                            {{ form_start(form) }}
                            {% form_theme form 'bootstrap_4_layout.html.twig' %}
                            <div class="col-md-6">
                            {# Champ de selection du format #}
                                <div class="form-group">
                                    {{ form_label(form.format) }}<br>
                                    {{ form_widget(form.format) }}
                                    {# Petit texte en dessous de la selection du format #}
                                    <small class="form-text text-muted">Selectionnez le format.</small>
                                </div>
                            </div>
                            {# Bouton de validation du format #}
                            <button type="submit" class="btn btn-primary">Associer</button>
                            {# Fermeture du formulaire #}
                            {{ form_end(form) }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </center>
{% endblock %}