{% trans_default_domain 'home' %}

<div {{ attributes.defaults(stimulus_controller('settings')) }}>
  <div id="modal_settings" tabindex="-1" aria-hidden="true"
       class="fixed top-0 left-0 right-0 z-50 hidden w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] max-h-full">
    <div class="relative w-full max-w-2xl max-h-full">
      <!-- Modal content -->
      <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
        <!-- Modal header -->
        <div class="flex items-center justify-between p-4 border-b rounded-t dark:border-gray-600">
          <span class="material-symbols-outlined mr-2 dark:text-white">settings</span>
          <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
            {{ 'Settings.title'|trans }}
          </h3>
          <button type="button" data-modal-hide="modal_settings"
                  class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ml-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white">
            <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"></path>
            </svg>
            <span class="sr-only">Close modal</span>
          </button>
        </div>
        <!-- Modal body -->
        <div class="p-6 space-y-6 overflow-auto max-h-[60vh]">

          <div class="flex justify-evenly w-full">
            <img class="w-[200px] mb-6" src="{{ asset('assets/img/umay_banniere_couleur.png') }}" alt="logo_umay">
          </div>

          <div class="flex w-full">
            <ul id="settings_tab" data-tabs-toggle="#settings_tab_content" role="tablist"
                class="flex-column space-y space-y-4 text-sm font-medium text-gray-500 dark:text-gray-400 md:me-4 mb-4 md:mb-0">
              <li class="me-2">
                <button
                  class="inline-flex items-center px-4 py-3 text-white hover:text-gray-200 bg-blue-700 rounded-lg w-full dark:bg-blue-600 dark:text-white"
                  data-tabs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">
                  <svg class="w-4 h-4 me-2 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                       fill="currentColor" viewBox="0 0 20 20">
                    <path
                      d="M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm0 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm0 13a8.949 8.949 0 0 1-4.951-1.488A3.987 3.987 0 0 1 9 13h2a3.987 3.987 0 0 1 3.951 3.512A8.949 8.949 0 0 1 10 18Z"></path>
                  </svg>
                  {{ 'Settings.profile'|trans }}
                </button>
              </li>
              <li class="me-2">
                <button
                  class="inline-flex items-center px-4 py-3 rounded-lg hover:text-gray-900 bg-gray-50 hover:bg-gray-100 w-full dark:bg-gray-800 dark:hover:bg-gray-700 dark:hover:text-white"
                  data-tabs-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">
                  <svg class="w-4 h-4 me-2 text-gray-500 dark:text-gray-400" aria-hidden="true"
                       xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                    <path
                      d="M18 7.5h-.423l-.452-1.09.3-.3a1.5 1.5 0 0 0 0-2.121L16.01 2.575a1.5 1.5 0 0 0-2.121 0l-.3.3-1.089-.452V2A1.5 1.5 0 0 0 11 .5H9A1.5 1.5 0 0 0 7.5 2v.423l-1.09.452-.3-.3a1.5 1.5 0 0 0-2.121 0L2.576 3.99a1.5 1.5 0 0 0 0 2.121l.3.3L2.423 7.5H2A1.5 1.5 0 0 0 .5 9v2A1.5 1.5 0 0 0 2 12.5h.423l.452 1.09-.3.3a1.5 1.5 0 0 0 0 2.121l1.415 1.413a1.5 1.5 0 0 0 2.121 0l.3-.3 1.09.452V18A1.5 1.5 0 0 0 9 19.5h2a1.5 1.5 0 0 0 1.5-1.5v-.423l1.09-.452.3.3a1.5 1.5 0 0 0 2.121 0l1.415-1.414a1.5 1.5 0 0 0 0-2.121l-.3-.3.452-1.09H18a1.5 1.5 0 0 0 1.5-1.5V9A1.5 1.5 0 0 0 18 7.5Zm-8 6a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7Z"></path>
                  </svg>
                  {{ 'Settings.notifications'|trans }}
                </button>
              </li>
              {#              <li class="me-2"> #}
              {#                <button class="inline-flex items-center px-4 py-3 rounded-lg hover:text-gray-900 bg-gray-50 hover:bg-gray-100 w-full dark:bg-gray-800 dark:hover:bg-gray-700 dark:hover:text-white" data-tabs-target="#dashboard" type="button" role="tab" aria-controls="dashboard" aria-selected="false"> #}
              {#                  <svg class="w-4 h-4 me-2 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 18"> #}
              {#                    <path d="M6.143 0H1.857A1.857 1.857 0 0 0 0 1.857v4.286C0 7.169.831 8 1.857 8h4.286A1.857 1.857 0 0 0 8 6.143V1.857A1.857 1.857 0 0 0 6.143 0Zm10 0h-4.286A1.857 1.857 0 0 0 10 1.857v4.286C10 7.169 10.831 8 11.857 8h4.286A1.857 1.857 0 0 0 18 6.143V1.857A1.857 1.857 0 0 0 16.143 0Zm-10 10H1.857A1.857 1.857 0 0 0 0 11.857v4.286C0 17.169.831 18 1.857 18h4.286A1.857 1.857 0 0 0 8 16.143v-4.286A1.857 1.857 0 0 0 6.143 10Zm10 0h-4.286A1.857 1.857 0 0 0 10 11.857v4.286c0 1.026.831 1.857 1.857 1.857h4.286A1.857 1.857 0 0 0 18 16.143v-4.286A1.857 1.857 0 0 0 16.143 10Z"></path></svg> #}
              {#                  {{ 'Settings.dashboard'|trans }} #}
              {#                </button> #}
              {#              </li> #}
              {% if app.user.proOptionChat %}
                <li class="me-2">
                  <button
                    class="inline-flex items-center px-4 py-3 rounded-lg hover:text-gray-900 bg-gray-50 hover:bg-gray-100 w-full dark:bg-gray-800 dark:hover:bg-gray-700 dark:hover:text-white"
                    data-tabs-target="#messages" type="button" role="tab" aria-controls="messages"
                    aria-selected="false">
                    <svg class="w-4 h-4 me-2 text-gray-500 dark:text-gray-400" aria-hidden="true"
                         xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 18">
                      <path
                        d="M18 0H2a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h3.546l3.2 3.659a1 1 0 0 0 1.506 0L13.454 14H18a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Zm-8 10H5a1 1 0 0 1 0-2h5a1 1 0 1 1 0 2Zm5-4H5a1 1 0 0 1 0-2h10a1 1 0 1 1 0 2Z"></path>
                    </svg>
                    {{ 'Settings.message'|trans }}
                  </button>
                </li>
              {% endif %}
              <li class="me-2">
                <button
                  class="inline-flex items-center px-4 py-3 rounded-lg hover:text-gray-900 bg-gray-50 hover:bg-gray-100 w-full dark:bg-gray-800 dark:hover:bg-gray-700 dark:hover:text-white"
                  data-tabs-target="#contacts" type="button" role="tab" aria-controls="contacts" aria-selected="false">
                  <svg class="w-4 h-4 me-2 text-gray-500 dark:text-gray-400" aria-hidden="true"
                       xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                    <path
                      d="M7.824 5.937a1 1 0 0 0 .726-.312 2.042 2.042 0 0 1 2.835-.065 1 1 0 0 0 1.388-1.441 3.994 3.994 0 0 0-5.674.13 1 1 0 0 0 .725 1.688Z"></path>
                    <path
                      d="M17 7A7 7 0 1 0 3 7a3 3 0 0 0-3 3v2a3 3 0 0 0 3 3h1a1 1 0 0 0 1-1V7a5 5 0 1 1 10 0v7.083A2.92 2.92 0 0 1 12.083 17H12a2 2 0 0 0-2-2H9a2 2 0 0 0-2 2v1a2 2 0 0 0 2 2h1a1.993 1.993 0 0 0 1.722-1h.361a4.92 4.92 0 0 0 4.824-4H17a3 3 0 0 0 3-3v-2a3 3 0 0 0-3-3Z"></path>
                  </svg>
                  {{ 'Settings.contact'|trans }}
                </button>
              </li>
            </ul>
            <div id="settings_tab_content" class="w-full">

              <div id="profile" role="tabpanel" aria-labelledby="profile-tab"
                   class="hidden p-6 bg-gray-50 text-medium text-gray-500 dark:text-gray-400 dark:bg-gray-800 rounded-lg w-full">
                <h3
                  class="text-lg font-bold text-gray-900 dark:text-white mb-2 text-center">{{ 'Settings.info_user'|trans }}</h3>

                <div class="p-2 flex justify-center w-full mb-2">
                  <twig:SelectLanguage/>
                </div>

                <div
                  class="flex justify-between w-full bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
                  <div class="flex flex-col p-4 w-full">
                    <div class="flex flex-nowrap items-center mb-3">
                      {% if app.user.photoProfil is same as("") or app.user.photoProfil is same as("default") or app.user.photoProfil is same as("default.png") %}
                        <img src="{{ "defaultPro"|linkImage('photos_profil') }}" alt="image_profil"
                             class="w-6 h-6 rounded-full shadow-lg mr-2">
                      {% else %}
                        <img src="{{ app.user.photoProfil|linkImage('photos_profil') }}" alt="image_profil"
                             class="w-6 h-6 rounded-full shadow-lg mr-2">
                      {% endif %}
                      <h5
                        class="text-xl font-medium text-gray-900 dark:text-white capitalize">{{ app.user.proNom }}</h5>
                    </div>
                    <span
                      class="text-sm text-gray-500 dark:text-gray-400"><b>{{ 'Settings.email'|trans }} : </b> {{ app.user.proEmail }} </span>
                  </div>
                </div>
              </div>

              <div id="settings" role="tabpanel" aria-labelledby="settings-tab"
                   class="hidden p-6 bg-gray-50 text-medium text-gray-500 dark:text-gray-400 dark:bg-gray-800 rounded-lg w-full">
                <h3
                  class="text-lg font-bold text-gray-900 dark:text-white mb-2 text-center">{{ 'Settings.notifications'|trans }}</h3>


                <div
                  class="{% if notification_push %}hidden{% endif %} flex items-center p-4 mb-4 text-sm text-red-800 border border-red-300 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400 dark:border-red-800"
                  role="alert">
                  <svg class="flex-shrink-0 inline w-4 h-4 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                       fill="currentColor" viewBox="0 0 20 20">
                    <path
                      d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"></path>
                  </svg>
                  <span class="sr-only">Info</span>
                  <div>{{ 'Settings.notifications_not_enabled'|trans }}</div>
                </div>

                <div id="notification_permission_toggle"
                     class="{% if not notification_push %}hidden{% endif %} flex items-center p-4 mb-4 text-sm text-green-800 border border-green-300 rounded-lg bg-green-50 dark:bg-gray-800 dark:text-green-400 dark:border-green-800"
                     role="alert">
                  <svg class="flex-shrink-0 inline w-4 h-4 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                       fill="currentColor" viewBox="0 0 20 20">
                    <path
                      d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"></path>
                  </svg>
                  <span class="sr-only">Info</span>
                  <div>
                    {{ 'Settings.notifications_enabled'|trans }}
                  </div>
                </div>

                <div id="notification_permission"
                     class="flex hidden items-center p-4 mb-4 text-sm text-red-800 border border-red-300 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400 dark:border-red-800"
                     role="alert">
                  <svg class="flex-shrink-0 inline w-4 h-4 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                       fill="currentColor" viewBox="0 0 20 20">
                    <path
                      d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"></path>
                  </svg>
                  <span class="sr-only">Info</span>
                  <div>{{ 'Settings.notifications_not_configure_browser'|trans }}</div>
                </div>

                <p class="mb-2"></p>
                <label class="relative inline-flex items-center my-2 cursor-pointer w-full">
                  <span id="notification_permission_push" class="hidden">{{ notification_push ? "1" : "0" }}</span>
                  <input
                    data-model="notification_push"
                    type="checkbox" class="sr-only peer">
                  <div
                    class="absolute w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
                  <span class="ml-[55px] text-sm font-medium text-gray-800 dark:text-gray-300">Notification Push</span>
                </label>

                <label class="relative inline-flex items-center my-2 cursor-pointer w-full">
                  <span id="notification_permission_audio" class="hidden">{{ notification_audio ? "1" : "0" }}</span>
                  <input
                    data-model="notification_audio"
                    type="checkbox" class="sr-only peer">
                  <div
                    class="absolute w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
                  <span class="ml-[55px] text-sm font-medium text-gray-800 dark:text-gray-300">Alert audio</span>
                </label>

                <label class="relative inline-flex items-center my-2 cursor-pointer w-full">
                  <input type="checkbox"
                         data-model="notification_mail_check"
                         class="sr-only peer">
                  <div
                    class="absolute w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
                  <span class="ml-[55px] text-sm font-medium text-gray-800 dark:text-gray-300">Activer les notification par mail des nouveaux signalements</span>
                </label>

                <span class="text-xs">{{ 'Settings.alert_email_send_to'|trans }} :</span>
                <div class="relative mb-6">
                  <div class="absolute inset-y-0 start-0 flex items-center ps-3.5 pointer-events-none">
                    <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true"
                         xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 16">
                      <path
                        d="m10.036 8.278 9.258-7.79A1.979 1.979 0 0 0 18 0H2A1.987 1.987 0 0 0 .641.541l9.395 7.737Z"></path>
                      <path
                        d="M11.241 9.817c-.36.275-.801.425-1.255.427-.428 0-.845-.138-1.187-.395L0 2.6V14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2.5l-8.759 7.317Z"></path>
                    </svg>
                  </div>
                  <input
                    data-model="notification_mail"
                    data-action="live#action:prevent"
                    data-live-action-param="prevent|debounce(500)|saveNotificationMail"
                    placeholder="{{ notification_mail }}"
                    type="text" id="input-group-1"
                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full ps-10 p-2.5  dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
                </div>

                <div class="flex">
                  <button type="button"
                          data-action="live#action"
                          data-live-action-param="sendNotificationMail"
                          class="mr-2 text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-600">
                    {{ 'Settings.btn_send_email_test'|trans }}
                  </button>
                  <button type="button"
                          data-action="live#action"
                          data-live-action-param="sendNotifyTest"
                          class="ml-2 text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-600">
                    {{ 'Settings.btn_send_notification_test'|trans }}
                  </button>
                </div>
              </div>

              {#              <div id="dashboard" role="tabpanel" aria-labelledby="dashboard-tab" class="hidden p-6 bg-gray-50 text-medium text-gray-500 dark:text-gray-400 dark:bg-gray-800 rounded-lg w-full"> #}
              {#                <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-2 text-center">{{ 'Settings.dashboard'|trans }}</h3> #}
              {#                <button id="theme-toggle" type="button" class="flex items-center text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5"> #}
              {#                  <svg id="theme-toggle-dark-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path></svg> #}
              {#                  <svg id="theme-toggle-light-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" fill-rule="evenodd" clip-rule="evenodd"></path></svg> #}
              {#                  <span class="ml-2">{{ 'Settings.toggle_dark_mode'|trans }}</span> #}
              {#                </button> #}
              {#              </div> #}

              {% if app.user.proOptionChat %}
                <div id="messages" role="tabpanel" aria-labelledby="messages-tab"
                     class="hidden p-6 bg-gray-50 text-medium text-gray-500 dark:text-gray-400 dark:bg-gray-800 rounded-lg w-full">
                  <h3
                    class="text-lg font-bold text-gray-900 dark:text-white mb-2 text-center">{{ 'Settings.message_predefined'|trans }}</h3>
                  <p class="mb-2 text-center">{{ 'Settings.message_predefined_info'|trans }}</p>


                  <div class="w-full mb-2">
                    <div class="w-full flex items-center px-3 py-2 rounded-lg bg-gray-100 dark:bg-gray-700">
                      <textarea id="chat" rows="1"
                                data-model="norender|addPresetMessage"
                                class="block p-2.5 w-full text-sm text-gray-900 bg-white rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                                placeholder="{{ 'Settings.message_predefined_new'|trans }}"></textarea>
                      <button data-action="click->live#action click->live#$render"
                              data-live-action-param="addMessagePreset"
                              class="ml-2 focus:outline-none text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-sm px-5 py-2.5 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800">
                        {{ 'Settings.btn_add'|trans }}
                      </button>
                    </div>
                  </div>

                  {% if this.getMessagePreset is not empty %}
                    <div class="relative shadow-md sm:rounded-lg overflow-auto" style="max-height: 20vh">
                      <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
                        <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
                        <tr>
                          <th scope="col" class="px-6 py-3">
                            {{ 'Settings.message_predefined'|trans }}
                          </th>
                          <th scope="col" class="px-6 py-3">
                            <span class="sr-only">Edit</span>
                          </th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for message in this.getMessagePreset %}
                          <tr
                            class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
                            <th scope="row" class="px-6 py-4 font-medium text-gray-900 dark:text-white">
                              <p class="block w-[15vw]">
                                {{ message }}
                              </p>
                            </th>
                            <td class="px-6 py-4 text-right">
                              <button data-action="click->live#action click->live#$render"
                                      data-live-action-param="deleteMessagePreset"
                                      data-live-id-param="{{ loop.index0 }}"
                                      class="font-medium text-red-600 dark:text-red-500 hover:underline">Supprimer
                              </button>
                            </td>
                          </tr>
                        {% endfor %}
                        </tbody>
                      </table>
                    </div>
                  {% else %}
                    <span class="mt-2 text-sm flex justify-center items-center w-full text-gray-400">Aucun message prédéfinis</span>
                  {% endif %}
                </div>
              {% endif %}
              <div id="contacts" role="tabpanel" aria-labelledby="contacts-tab"
                   class="hidden p-6 bg-gray-50 text-medium text-gray-500 dark:text-gray-400 dark:bg-gray-800 rounded-lg w-full">
                <h3
                  class="text-lg font-bold text-gray-900 dark:text-white mb-2 text-center">{{ 'Settings.contact'|trans }}</h3>
                <p class="mb-2 text-center">{{ 'Settings.contact_info'|trans }}</p>
                <div class="w-full flex flex-col">
                  <div class="w-full flex">
                    <div
                      class="w-1/2 cursor-pointer mr-2 flex flex-col p-4 justify-between items-center bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
                      <span class="material-symbols-outlined mb-2">mail</span>
                      <span><a href="mailto://contact@umay.app">contact@umay.app</a></span>
                    </div>
                    <div
                      class="w-1/2 cursor-pointer ml-2 flex flex-col p-4 justify-between items-center bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
                      <span class="material-symbols-outlined mb-2">phone</span>
                      <span><a href="tel://06.86.54.29.73">06.86.54.29.73</a></span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- Modal footer -->
        <div class="flex justify-end p-6 space-x-2 border-t border-gray-200 rounded-b dark:border-gray-600">
        </div>
      </div>
    </div>
  </div>
</div>