templates/components/modal/sessions_modal.html.twig line 1

Open in your IDE?
  1. <div id="catalogModalSession{{ this.session.id }}"
         class="fixed inset-0 hidden overflow-y-auto transition-opacity ease-in duration-300 z-[9999]"
         role="dialog" aria-modal="true" aria-labelledby="modalLabel{{ this.session.id }}">
        <!--
      Background backdrop, show/hide based on dialog state.
    
      Entering: "ease-out duration-300"
        From: "opacity-0"
        To: "opacity-100"
      Leaving: "ease-in duration-200"
        From: "opacity-100"
        To: "opacity-0"
    -->
        {# overlay #}
        <div class="fixed inset-0 bg-blue-500 bg-opacity-50" aria-hidden="true"></div>
        {# wrapper content #}
        <div id="modalSession{{ this.session.id }}" class="relative flex min-h-screen items-center justify-center p-4" style="z-index: 9999;">
            <div class="modal__backdrop flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0 ">
                <div class="relative transform overflow-hidden rounded-lg bg-blue-500 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg text-white">
                    <div class="header">
                        {# close btn #}
                        <button
                                type="button"
                                data-close-modal
                                class="btn-dismiss-catalog-modal absolute top-2 right-2 p-2 rounded-full hover:bg-pink-500 focus:outline-none focus:ring-2 focus:ring-white"
                                aria-label="Fermer le modal"
                        >
                            <svg xmlns="http://www.w3.org/2000/svg"
                                 class="h-6 w-6 text-white"
                                 fill="none"
                                 viewBox="0 0 24 24"
                                 stroke="#FFFFFF"
                                 stroke-width="2"
                            >
                                <path stroke-linecap="round"
                                      stroke-linejoin="round"
                                      d="M6 18L18 6M6 6l12 12" />
                            </svg>
                        </button>
                        {# end close btn #}
                    </div>
                    <form class="catalog-form" data-type="session" data-session-id="{{ this.session.id }}">
                    <div class="px-4 pb-4 pt-5 sm:p-10 sm:pb-0">
                        <div class="sm:flex sm:items-start">
                            <div class="mt-3 text-center sm:mt-0 sm:text-left">
                                <h3 class="uppercase font-semibold leading-6 text-white font-allerBold text-center text-xl"
                                    id="modal-title">Télécharger le programme</h3>
                                <div class="mt-2 hidden sm:block">
                                    <p class="text-sm text-white">Remplissez le formulaire ci-dessous afin d'obtenir le programme de formation :</p>
                                </div>
                                    <input type="text" id="lead_catalog_lastName_{{ this.session.id }}" name="lead_catalog_session[lastName]"
                                           required="required" placeholder="Nom*"
                                           class="rounded my-3 p-3 outline-none font-allerLight text-grey-300 w-full">
    
                                    <input type="text" id="lead_catalog_firstName_{{ this.session.id }}" name="lead_catalog_session[firstName]"
                                           required="required" placeholder="Prénom*"
                                           class="rounded my-3 p-3 outline-none font-allerLight text-grey-300 w-full">
    
                                    <input type="text" id="lead_catalog_compan_{{ this.session.id }}" name="lead_catalog_session[company]"
                                           required="required" placeholder="Entreprise / Structure*"
                                           class="rounded my-3 p-3 outline-none font-allerLight text-grey-300 w-full">
    
                                    <input type="email" id="lead_catalog_email_{{ this.session.id }}" name="lead_catalog_session[email]"
                                           required="required" placeholder="Email*"
                                           class="rounded my-3 p-3 outline-none font-allerLight text-grey-300 w-full">
    
                                    <input type="email" id="lead_catalog_email_pro_{{ this.session.id }}" name="lead_catalog_session[email_pro]"
                                           placeholder="Email Professionnel"
                                           class="hidden rounded my-3 p-3 outline-none font-allerLight text-grey-300 w-full">
    
                                    <input type="tel" id="lead_catalog_phone_{{ this.session.id }}" name="lead_catalog_session[phone]"
                                           placeholder="Téléphone"
                                           class="rounded my-3 p-3 outline-none font-allerLight text-grey-300 w-full cleave-phone">
    
                                    <input id="lead_catalog_session_{{ this.session.id }}" name="lead_catalog_session[session]"
                                           class="rounded my-3 p-3 outline-none font-allerLight text-grey-300 w-full hidden"
                                           value="{{ this.session.id }}">
    
                                    <div class="mb-3">
                                        <input type="checkbox" id="lead_catalog_isOptin_{{ this.session.id }}" name="lead_catalog_session[isOptin]"
                                               required="required" value="1">
                                        <label for="lead_catalog_isOptin" class="required">J'accepte la <a
                                                    href="https://qwantic.co/politique-de-confidentialite" target="_blank">politique
                                                de confidentialité</a> *</label>
                                    </div>
                                <input
                                        type="hidden"
                                        name="lead_catalog_session[_token]"
                                        value="{{ csrf_token('lead_catalog_session') }}"
                                />
                            </div>
                        </div>
                    </div>
                    <div class="bg-gray-50 px-4 py-5 sm:flex sm:flex-row-reverse sm:px-6 sm:pb-5">
                        <button type="submit" name="lead_catalog_session[save]"
                                class="inline-flex w-full justify-center rounded-md cta big-cta bg-pink-500 hover:bg-blue-500 px-3 py-2 text-sm font-semibold text-white shadow-sm sm:ml-3">
                            Télécharger le programme
                        </button>
    {#                    <button type="button"#}
    {#                            class="btn-dismiss-catalog-modal mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-grey-300 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto">#}
    {#                        Fermer#}
    {#                    </button>#}
                    </div>
                    </form>
                </div>
            </div>
        </div>
    </div>