{% trans_default_domain 'home' %}

{% block body %}
  <nav id="header" class="relative bg-white dark:bg-gray-700 px-2 py-2 w-full"
       style="box-shadow: 0 3px 20px #11152124; z-index: 10">
    <div class="block sm:flex flex-nowrap">
      <a href="{{ path('home') }}"
         class="flex items-center justify-center flex-col text-center min-w-[80px] sm:min-w-[100px] mr-2 sm:mr-4 mb:mb-0">
        <img src="{{ asset('assets/img/pin/nouveau_marker_police.png') }}" alt="logo" style="width: 49px">
        <p class="text-[#617598] pt-[3px] dark:text-gray-100"
           style="font-size: 11px; font-family: 'Roboto', sans-serif; line-height: 10px; font-weight: 400;">
          {{ 'Header.Signalements'|trans }}
          <br>{{ 'Header.version'|trans }} {{ app.request.server.get('VERSION_PUBLIC') }}
        </p>
      </a>

      <div class="hidden">
        <span
          class="bg-blue-100 text-blue-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded dark:bg-blue-900 dark:text-blue-300">Default</span>
        <span
          class="bg-gray-100 text-gray-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-gray-300">Dark</span>
        <span
          class="bg-red-100 text-red-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded dark:bg-red-900 dark:text-red-300">Red</span>
        <span
          class="bg-green-100 text-green-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded dark:bg-green-900 dark:text-green-300">Green</span>
        <span
          class="bg-yellow-100 text-yellow-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded dark:bg-yellow-900 dark:text-yellow-300">Yellow</span>
        <span
          class="bg-indigo-100 text-indigo-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded dark:bg-indigo-900 dark:text-indigo-300">Indigo</span>
        <span
          class="bg-purple-100 text-purple-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded dark:bg-purple-900 dark:text-purple-300">Purple</span>
        <span
          class="bg-pink-100 text-pink-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded dark:bg-pink-900 dark:text-pink-300 bg-gray-100">Pink</span>
      </div>

      <div class="flex flex-col-reverse md:flex-row flex-wrap md:flex-nowrap justify-between w-full items-center">

        <div id="signalement_date" class="flex items-center md:mr-2 min-w-[300px] md:w-full">
          <div class="relative">
            <div class="absolute inset-y-0 left-0 flex items-center pl-3 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 20">
                <path
                  d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z"></path>
              </svg>
            </div>
            <label>
              <input id="calendar_start" name="signalement_start_date" type="text" placeholder="Select date start"
                     autocomplete="off"
                     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 pl-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">
            </label>
          </div>
          <span class="mx-2 text-gray-300 dark:text-gray-600">-</span>
          <div class="relative">
            <div class="absolute inset-y-0 left-0 flex items-center pl-3 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 20">
                <path
                  d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z"></path>
              </svg>
            </div>
            <label>
              <input id="calendar_end" name="signalement_end_date" type="text" placeholder="Select date end"
                     autocomplete="off"
                     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 pl-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">
            </label>
          </div>
        </div>

        <div class="flex items-center mb-2 md:mb-0">
          {% if app.user.proOptionChat %}
            <button id="btn_conversation" type="button" data-drawer-target="drawer-conversation"
                    data-drawer-show="drawer-conversation" data-drawer-placement="left"
                    aria-controls="drawer-navigation"
                    class="relative inline-flex flex-nowrap items-center 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 mr-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700">
              <span class="material-symbols-outlined mr-0 lg:mr-2 sm:mr-2 md:mr-0">forum</span>
              <span class="hidden lg:block sm:block md:hidden">{{ 'Header.btn_conversation'|trans }}</span>
              <div id="nb_msg_not_vu_document"
                   class="hidden absolute inline-flex items-center justify-center px-1 h-6 text-xs font-bold text-white bg-red-500 border-2 border-white rounded-full -top-2 -right-2 dark:border-gray-900">
              </div>
            </button>
            <script>
							document.querySelector('#btn_conversation').addEventListener('click', function () {
								window.dispatchEvent(new CustomEvent('closeNotification', {
									detail: {
										id: "new_message",
									}
								}));
							});
            </script>
          {% endif %}
          <button type="button" data-modal-target="modal_filters" data-modal-toggle="modal_filters"
                  class="flex flex-nowrap items-center 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 mr-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700">
            <span class="material-symbols-outlined mr-0 lg:mr-2 sm:mr-2 md:mr-0">tune</span>
            <span class="hidden lg:block sm:block md:hidden">{{ 'Header.btn_filter'|trans }}</span>
          </button>
          <button id="btn_export" type="button" data-modal-target="modal_export" data-modal-toggle="modal_export"
                  class="flex flex-nowrap items-center 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 mr-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700">
            <span class="material-symbols-outlined mr-0 lg:mr-2 md:mr-0">download</span>
            <span class="hidden lg:block md:hidden">{{ 'Header.btn_export'|trans }}</span>
          </button>

          <button type="button" id="dropdownNotificationButton" data-dropdown-toggle="dropdownNotification"
                  class="mr-2 relative inline-flex items-center p-3 text-sm font-medium text-center text-white bg-gray-800 hover:bg-gray-900 rounded-lg focus:ring-4 focus:ring-gray-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
            <span class="material-symbols-outlined w-5 h-5 mr-1">notifications_active</span>
            <span class="sr-only">{{ 'Header.btn_notif'|trans }}</span>
            <div id="nb_signalement"
                 class="hidden absolute inline-flex items-center justify-center px-1 h-6 text-xs font-bold text-white bg-red-500 border-2 border-white rounded-full -top-2 -right-2 dark:border-gray-900">
            </div>
          </button>

          <button id="dropdownAvatarNameButton" data-dropdown-toggle="dropdownAvatarName"
                  class="flex items-center text-sm font-medium text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 rounded-lg px-5 py-2.5 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700"
                  type="button">
            <span class="material-symbols-outlined r-0 lg:mr-2">admin_panel_settings</span>
            {#            <img class="w-6 h-6 mr-0 lg:mr-2 rounded-full" src="{{ asset('assets/img/logo_gtc.png') }}" alt="user photo"> #}
            <span
              class="hidden lg:block">{{ app.user.proNom|length > 5 ? app.user.proNom|slice(0, 3) ~ '...' : app.user.proNom }}</span>
            <svg class="w-2.5 h-2.5 ml-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                 viewBox="0 0 10 6">
              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="m1 1 4 4 4-4"></path>
            </svg>
          </button>

          <!-- Dropdown menu -->
          <div id="dropdownAvatarName"
               class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700 dark:divide-gray-600">
            <div class="px-4 py-3 text-sm text-gray-900 dark:text-white">
              <div class="font-medium">{{ 'Header.connected_as'|trans }}</div>
              <div class="truncate">{{ app.user.proEmail }}</div>
            </div>
            <ul class="py-2 text-sm text-gray-700 dark:text-gray-200"
                aria-labelledby="dropdownInformdropdownAvatarNameButtonationButton">
              {% if app.environment == 'dev' %}
                <li>
                  <a type="button" data-modal-target="modal_debug" data-modal-toggle="modal_debug"
                     class="cursor-pointer flex flex-nowrap items-center px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
                    <span class="material-symbols-outlined mr-2">labs</span>
                    {{ 'Header.btn_test'|trans }}
                  </a>
                </li>
              {% endif %}
              <li>
                <a type="button" data-modal-target="modal_settings" data-modal-toggle="modal_settings"
                   class="cursor-pointer flex flex-nowrap items-center px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
                  <span class="material-symbols-outlined mr-2">settings</span>
                  {{ 'Header.btn_settings'|trans }}
                </a>
              </li>
              {% if app.user.proEmail in ['francois.morival@umay.fr', 'leo.marcel.pro@gmail.com'] %}
                <li>
                  <a type="button" data-modal-target="modal_integration" data-modal-toggle="modal_integration"
                     class="cursor-pointer flex flex-nowrap items-center px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
                    <span class="material-symbols-outlined mr-2">link</span>
                    {{ 'Header.btn_integrations'|trans }}
                  </a>
                </li>
              {% endif %}
              <li>
                <a id="dropdown_other_options_btn" data-dropdown-toggle="dropdown_other_options"
                   data-dropdown-placement="left-start" type="button"
                   class="cursor-pointer flex flex-nowrap items-center px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
                  <span class="material-symbols-outlined mr-2">chevron_left</span>
                  {{ 'Header.btn_other'|trans }}
                </a>
                <div id="dropdown_other_options"
                     class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700">
                  <ul class="py-2 text-sm text-gray-700 dark:text-gray-200"
                      aria-labelledby="dropdown_other_options_btn">
                    <li>
                      <a type="button" data-modal-target="modal_actualite" data-modal-toggle="modal_actualite"
                         class="modal_active_content cursor-pointer flex flex-nowrap items-center px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
                        <span class="material-symbols-outlined mr-2">newspaper</span>
                        {{ 'Header.btn_actuality'|trans }}
                      </a>
                    </li>
                    <li>
                      <a type="button" data-modal-target="modal_event" data-modal-toggle="modal_event"
                         class="modal_active_content cursor-pointer flex flex-nowrap items-center px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
                        <span class="material-symbols-outlined mr-2">calendar_month</span>
                        {{ 'Header.btn_event'|trans }}
                      </a>
                    </li>
                    <li>
                      <a type="button" data-modal-target="modal_sponsor" data-modal-toggle="modal_sponsor"
                         class="modal_active_content cursor-pointer flex flex-nowrap items-center px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
                        <span class="material-symbols-outlined mr-2">handshake</span>
                        {{ 'Header.btn_partenaire'|trans }}
                      </a>
                    </li>
                  </ul>
                </div>
              </li>
            </ul>
            <div class="py-2">
              <a type="button" data-modal-target="modal_logout" data-modal-toggle="modal_logout"
                 class="cursor-pointer flex flex-nowrap items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">
                <span class="material-symbols-outlined mr-2">logout</span>
                {{ 'Home.btnLogout'|trans }}
              </a>
            </div>
          </div>
        </div>
      </div>

    </div>
  </nav>

  {% if app.environment == 'dev' %}
    <twig:Debug/>
  {% endif %}
  <twig:Settings/>
  {% if app.user.proEmail in ['francois.morival@umay.fr', 'leo.marcel.pro@gmail.com'] %}
    <twig:Integration/>
  {% endif %}
  <twig:Actualite/>
  <twig:Event/>
  <twig:Sponsor/>
  {% if app.user.proOptionChat %}
    <twig:Conversation/>
  {% endif %}
  {{ include('Components/Modal/Back/notification.html.twig') }}
  {{ include('Components/Modal/modal_logout.html.twig') }}
  <twig:Export/>
{% endblock %}