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

{% block title %}{{ 'Settings.title'|trans }} - J'agis{% endblock %}

{% block body %}
  <div class="flex flex-col h-screen overflow-hidden" data-controller="settings"
       data-settings-home-url="{{ path('home') }}">
    {{ include('Settings/_header.html.twig') }}

    <div class="flex flex-1 overflow-hidden">
      {# ===== Sidenav ===== #}
      <aside
        class="w-64 flex-shrink-0 bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700 overflow-y-auto">
        <div class="p-4" id="settings_menu">
          <p
            class="text-xs font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-500 mb-3 px-3">{{ 'Settings.title'|trans }}</p>
          <ul class="space-y-1">
            <li>
              <button data-section="profile"
                      class="settings-menu-item active flex items-center gap-3 w-full px-3 py-2.5 text-sm font-medium rounded-lg text-white bg-blue-700 dark:bg-blue-600">
                <span class="material-symbols-outlined text-xl">person</span>
                {{ 'Settings.profile'|trans }}
              </button>
            </li>
            <li>
              <button data-section="notifications"
                      class="settings-menu-item flex items-center gap-3 w-full px-3 py-2.5 text-sm font-medium rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
                <span class="material-symbols-outlined text-xl">notifications</span>
                {{ 'Settings.notifications'|trans }}
              </button>
            </li>
            {% if app.user.proOptionChat %}
              <li>
                <button data-section="messages"
                        class="settings-menu-item flex items-center gap-3 w-full px-3 py-2.5 text-sm font-medium rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
                  <span class="material-symbols-outlined text-xl">chat</span>
                  {{ 'Settings.message'|trans }}
                </button>
              </li>
            {% endif %}
            <li>
              <button data-section="contacts"
                      class="settings-menu-item flex items-center gap-3 w-full px-3 py-2.5 text-sm font-medium rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
                <span class="material-symbols-outlined text-xl">support_agent</span>
                {{ 'Settings.contact'|trans }}
              </button>
            </li>
          </ul>

          {# ===== Intégrations ===== #}
          {% if app.user.proEmail in ['francois.morival@umay.fr', 'leo.marcel.pro@gmail.com'] %}
            <p
              class="text-xs font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-500 mb-3 mt-6 px-3">{{ 'Header.btn_integrations'|trans }}</p>
            <ul class="space-y-1">
              <li>
                <button data-section="integration_content"
                        data-integration-url="{{ path('integration_add') }}"
                        class="settings-menu-item flex items-center gap-3 w-full px-3 py-2.5 text-sm font-medium rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
                  <span class="material-symbols-outlined text-xl">add_circle</span>
                  {{ 'Integration.add_integration'|trans }}
                </button>
              </li>
              {% for integration in integrations %}
                <li>
                  <button data-section="integration_content"
                          data-integration-url="{{ path('integration_show', {'id': integration.id}) }}"
                          class="settings-menu-item flex items-center gap-3 w-full px-3 py-2.5 text-sm font-medium rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
                    {% if integration.metaLogo and integration.metaLogo is not same as('') %}
                      <img src="{{ asset('uploads/integration/' ~ integration.metaLogo) }}" alt="{{ integration.name }}"
                           class="w-5 h-5 rounded object-contain">
                    {% else %}
                      <span class="material-symbols-outlined text-xl">link</span>
                    {% endif %}
                    {{ integration.name }}
                  </button>
                </li>
              {% endfor %}
            </ul>
          {% endif %}

          {# ===== Administration ===== #}
          {% if app.user.proEmail == 'leo.marcel.pro@gmail.com' %}
            <p class="text-xs font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-500 mb-3 mt-6 px-3">
              Administration</p>
            <ul class="space-y-1">
              <li>
                <button data-section="test"
                        class="settings-menu-item flex items-center gap-3 w-full px-3 py-2.5 text-sm font-medium rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
                  <span class="material-symbols-outlined text-xl">labs</span>
                  {{ 'Header.btn_test'|trans }}
                </button>
              </li>
              <li>
                <button data-section="switch_user"
                        class="settings-menu-item flex items-center gap-3 w-full px-3 py-2.5 text-sm font-medium rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
                  <span class="material-symbols-outlined text-xl">swap_horiz</span>
                  Changer d'utilisateur
                </button>
              </li>
            </ul>
          {% endif %}
        </div>
      </aside>

      {# ===== Contenu principal ===== #}
      <main class="flex-1 overflow-y-auto bg-gray-100 dark:bg-gray-900 p-6" id="settings_content">
        <div>

          {# --- Profil --- #}
          <div class="settings-section" data-section-id="profile">
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
              <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-6 flex items-center">
                <div class="p-2 rounded-full bg-blue-100 dark:bg-blue-900 mr-3 flex items-center justify-center">
                  <span class="material-symbols-outlined text-blue-600 dark:text-blue-400">person</span>
                </div>
                {{ 'Settings.info_user'|trans }}
              </h2>

              <div class="flex flex-col sm:flex-row items-start sm:items-center gap-4">
                <div class="flex items-center gap-4">
                  {#                  {% 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="/assets/img/default_pro.png" alt="image_profil"
                       class="w-16 h-16 rounded-full shadow-lg">
                  {#                  {% else %} #}
                  {#                    <img src="{{ app.user.photoProfil|linkImage('photos_profil') }}" alt="image_profil" #}
                  {#                         class="w-16 h-16 rounded-full shadow-lg"> #}
                  {#                  {% endif %} #}
                  <div>
                    <h3
                      class="text-xl font-semibold text-gray-900 dark:text-white capitalize">{{ app.user.proNom }}</h3>
                    <p class="text-sm text-gray-500 dark:text-gray-400">{{ app.user.proEmail }}</p>
                  </div>
                </div>
                <div class="sm:ml-auto">
                  <twig:SelectLanguage/>
                </div>
              </div>
            </div>
          </div>

          {# --- Notifications --- #}
          <div class="settings-section hidden" data-section-id="notifications">
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
              <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-6 flex items-center">
                <div class="p-2 rounded-full bg-orange-100 dark:bg-orange-900 mr-3 flex items-center justify-center">
                  <span class="material-symbols-outlined text-orange-600 dark:text-orange-400">notifications</span>
                </div>
                {{ 'Settings.notifications'|trans }}
              </h2>

              {# Alertes statut #}
              <div data-settings-target="pushAlertDisabled"
                   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>
                <div>{{ 'Settings.notifications_not_enabled'|trans }}</div>
              </div>

              <div id="notification_permission_toggle" data-settings-target="pushAlertEnabled"
                   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>
                <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>
                <div>{{ 'Settings.notifications_not_configure_browser'|trans }}</div>
              </div>

              {# Toggles #}
              <div class="space-y-3 mb-6">
                <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-4">
                  <label class="relative inline-flex items-center cursor-pointer w-full">
                    <span id="notification_permission_push" class="hidden">{{ notification_push ? "1" : "0" }}</span>
                    <input type="checkbox" class="sr-only peer"
                           data-action="change->settings#togglePush"
                      {{ notification_push ? 'checked' : '' }}>
                    <div
                      class="relative flex-shrink-0 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-600 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>
                    <div class="ml-3">
                      <span class="text-sm font-medium text-gray-900 dark:text-white">Notifications Push</span>
                      <p class="text-xs text-gray-500 dark:text-gray-400">Recevoir des notifications dans le
                        navigateur</p>
                    </div>
                  </label>
                </div>

                <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-4">
                  <label class="relative inline-flex items-center cursor-pointer w-full">
                    <span id="notification_permission_audio" class="hidden">{{ notification_audio ? "1" : "0" }}</span>
                    <input type="checkbox" class="sr-only peer"
                           data-action="change->settings#toggleAudio"
                      {{ notification_audio ? 'checked' : '' }}>
                    <div
                      class="relative flex-shrink-0 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-600 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>
                    <div class="ml-3">
                      <span class="text-sm font-medium text-gray-900 dark:text-white">Alerte audio</span>
                      <p class="text-xs text-gray-500 dark:text-gray-400">Jouer un son lors d'un nouveau signalement</p>
                    </div>
                  </label>
                </div>

                <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-4">
                  <label class="relative inline-flex items-center cursor-pointer w-full mb-4">
                    <input type="checkbox" class="sr-only peer"
                           data-action="change->settings#toggleMailCheck"
                      {{ notification_mail_check ? 'checked' : '' }}>
                    <div
                      class="relative flex-shrink-0 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-600 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>
                    <div class="ml-3">
                      <span class="text-sm font-medium text-gray-900 dark:text-white">Notifications par email</span>
                      <p class="text-xs text-gray-500 dark:text-gray-400">Recevoir un email lors d'un nouveau
                        signalement</p>
                    </div>
                  </label>

                  <div>
                    <label
                      class="text-xs text-gray-500 dark:text-gray-400 mb-1 block">{{ 'Settings.alert_email_send_to'|trans }}</label>
                    <div class="relative">
                      <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 type="text"
                             data-settings-target="notificationMail"
                             data-action="input->settings#saveNotificationMail"
                             value="{{ notification_mail }}"
                             class="bg-white 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-800 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
                    </div>
                  </div>
                </div>
              </div>

              {# Boutons test #}
              <div class="flex flex-wrap gap-3">
                <button type="button"
                        data-action="click->settings#sendTestEmail"
                        class="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 inline-flex items-center">
                  <span class="material-symbols-outlined mr-2 text-base">mail</span>
                  {{ 'Settings.btn_send_email_test'|trans }}
                </button>
                <button type="button"
                        data-action="click->settings#sendTestNotification"
                        class="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 inline-flex items-center">
                  <span class="material-symbols-outlined mr-2 text-base">notifications_active</span>
                  {{ 'Settings.btn_send_notification_test'|trans }}
                </button>
              </div>
            </div>
          </div>

          {# --- Messages prédéfinis --- #}
          {% if app.user.proOptionChat %}
            <div class="settings-section hidden" data-section-id="messages">
              <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
                <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-2 flex items-center">
                  <div class="p-2 rounded-full bg-purple-100 dark:bg-purple-900 mr-3 flex items-center justify-center">
                    <span class="material-symbols-outlined text-purple-600 dark:text-purple-400">chat</span>
                  </div>
                  {{ 'Settings.message_predefined'|trans }}
                </h2>
                <p
                  class="mb-4 text-sm text-gray-500 dark:text-gray-400">{{ 'Settings.message_predefined_info'|trans }}</p>

                <div class="flex items-center gap-3 mb-4">
                <textarea rows="1"
                          data-settings-target="messageInput"
                          class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 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"
                          placeholder="{{ 'Settings.message_predefined_new'|trans }}"></textarea>
                  <button data-action="click->settings#addMessagePreset"
                          class="flex-shrink-0 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 inline-flex items-center">
                    <span class="material-symbols-outlined mr-1 text-base">add</span>
                    {{ 'Settings.btn_add'|trans }}
                  </button>
                </div>

                <div data-settings-target="messageList">
                  {% if message_presets is not empty %}
                    <div class="relative shadow-md rounded-lg overflow-auto max-h-96">
                      <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 sticky top-0">
                        <tr>
                          <th scope="col" class="px-6 py-3">{{ 'Settings.message_predefined'|trans }}</th>
                          <th scope="col" class="px-8 py-3 text-right">Actions</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for message in message_presets %}
                          <tr
                            class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
                            <td class="px-6 py-4 font-medium text-gray-900 dark:text-white">{{ message }}</td>
                            <td class="px-6 py-4 text-right">
                              <button data-action="click->settings#deleteMessagePreset"
                                      data-message-id="{{ loop.index0 }}"
                                      class="font-medium text-red-600 dark:text-red-500 hover:underline inline-flex items-center">
                                <span class="material-symbols-outlined mr-1 text-base">delete</span>
                                Supprimer
                              </button>
                            </td>
                          </tr>
                        {% endfor %}
                        </tbody>
                      </table>
                    </div>
                  {% else %}
                    <div class="text-center py-8 text-gray-400 dark:text-gray-500">
                      <span class="material-symbols-outlined text-4xl mb-2 block">chat_bubble_outline</span>
                      <p class="text-sm">Aucun message prédéfini</p>
                    </div>
                  {% endif %}
                </div>
              </div>
            </div>
          {% endif %}

          {# --- Contact --- #}
          <div class="settings-section hidden" data-section-id="contacts">
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
              <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-2 flex items-center">
                <div class="p-2 rounded-full bg-green-100 dark:bg-green-900 mr-3 flex items-center justify-center">
                  <span class="material-symbols-outlined text-green-600 dark:text-green-400">support_agent</span>
                </div>
                {{ 'Settings.contact'|trans }}
              </h2>
              <p class="mb-4 text-sm text-gray-500 dark:text-gray-400">{{ 'Settings.contact_info'|trans }}</p>

              <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <a href="mailto:contact@umay.app"
                   class="flex items-center gap-4 p-4 bg-gray-50 dark:bg-gray-700 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors">
                  <div class="p-3 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center">
                    <span class="material-symbols-outlined text-blue-600 dark:text-blue-400">mail</span>
                  </div>
                  <div>
                    <p class="text-sm font-medium text-gray-900 dark:text-white">Email</p>
                    <p class="text-sm text-gray-500 dark:text-gray-400">contact@umay.app</p>
                  </div>
                </a>
                <a href="tel:+33686542973"
                   class="flex items-center gap-4 p-4 bg-gray-50 dark:bg-gray-700 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors">
                  <div class="p-3 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center">
                    <span class="material-symbols-outlined text-green-600 dark:text-green-400">phone</span>
                  </div>
                  <div>
                    <p class="text-sm font-medium text-gray-900 dark:text-white">Téléphone</p>
                    <p class="text-sm text-gray-500 dark:text-gray-400">06.86.54.29.73</p>
                  </div>
                </a>
              </div>
            </div>
          </div>

          {# --- Test --- #}
          {% if app.user.proEmail == 'leo.marcel.pro@gmail.com' %}
            <div class="settings-section hidden" data-section-id="test">
              <twig:Debug/>
            </div>
          {% endif %}

          {# --- Intégrations (chargé via AJAX) --- #}
          {% if app.user.proEmail in ['francois.morival@umay.fr', 'leo.marcel.pro@gmail.com'] %}
            <div class="settings-section hidden" data-section-id="integration_content">
              <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
                <div data-settings-target="integrationContent">
                  <div class="text-center py-8 text-gray-400 dark:text-gray-500">
                    <span class="material-symbols-outlined text-4xl mb-2 block">link</span>
                    <p class="text-sm">Sélectionnez une intégration dans le menu</p>
                  </div>
                </div>
              </div>
            </div>
          {% endif %}

          {# --- Switch User --- #}
          {% if app.user.proEmail == 'leo.marcel.pro@gmail.com' %}
            <div class="settings-section hidden" data-section-id="switch_user">
              <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
                <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-6 flex items-center">
                  <div class="p-2 rounded-full bg-amber-100 dark:bg-amber-900 mr-3 flex items-center justify-center">
                    <span class="material-symbols-outlined text-amber-600 dark:text-amber-400">swap_horiz</span>
                  </div>
                  Changer d'utilisateur
                  <span data-settings-target="userCount"
                        class="ml-2 text-sm font-normal text-gray-400 dark:text-gray-500"></span>
                </h2>

                <div class="mb-4">
                  <label class="text-xs text-gray-500 dark:text-gray-400 mb-1 block">Rechercher un utilisateur
                    pro</label>
                  <input type="text"
                         data-action="input->settings#searchUsers"
                         placeholder="Nom ou email..."
                         class="bg-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 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">
                </div>

                <div data-settings-target="userList">
                  <div class="text-center py-8 text-gray-400 dark:text-gray-500">
                    <span class="material-symbols-outlined text-4xl mb-2 block">person_search</span>
                    <p class="text-sm">Chargement...</p>
                  </div>
                </div>
              </div>
            </div>
          {% endif %}

        </div>
      </main>
    </div>
  </div>
{% endblock %}