{% trans_default_domain 'home' %}

<div id="modal_marker_sos_urgent" 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">
           {% if this.getSelectedSOSUrgent.user %}
             {% if this.getSelectedSOSUrgent.user and this.getSelectedSOSUrgent.user.photoProfil is not same as("") %}
               <img src="{{ this.getSelectedSOSUrgent.user.photoProfil|linkImage('photos_profil') }}" alt="user_profil"
                    class="h-6">
             {% endif %}
           {% endif %}
        </span>
        <h3 class="text-xl font-semibold text-gray-900 dark:text-white flex items-center">
          <span class="material-symbols-outlined mr-2 text-red-700" style="font-size: 35px">sos</span>
          {% if this.getSelectedSOSUrgent.user %}
            {{ this.getSelectedSOSUrgent.user.pseudo }}
          {% endif %}
        </h3>
        <button id="modal_hide_modal_marker_sos_urgent" type="button" data-modal-hide="modal_marker_sos_urgent"
                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]">
        {% if this.getSelectedSOSUrgent.user %}
          {% if this.getSelectedSOSUrgent.danger and this.getSelectedSOSUrgent.etat is same as (0) %}
            <div
              class="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 mr-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                   fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd"
                      d="M10 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16Zm0-2a6 6 0 1 0 0-12 6 6 0 0 0 0 12ZM9 7a1 1 0 0 1 2 0v4a1 1 0 0 1-2 0V7Zm1 9a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"></path>
              </svg>
              <div>
                <span
                  class="font-medium">{{ 'Signalement.urgent'|trans }}</span> {{ 'Signalement.urgent_message'|trans }}
              </div>
            </div>
          {% endif %}

          <div class="w-full flex flex-col">
            <div class="w-full flex">
              <div
                class="w-1/2 cursor-pointer mx-2 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 dark:text-white">email</span>
                <span class="dark:text-white">{% if this.getSelectedSOSUrgent.user.email %}<a class="dark:text-white"
                                                                                              href="mailto://{{ this.getSelectedSOSUrgent.user.email }}"
                                                                                              target="_blank">{{ this.getSelectedSOSUrgent.user.email }}</a>{% else %}{{ 'Signalement.not_available'|trans }}{% endif %}</span>
              </div>

              <div
                class="w-1/2 cursor-pointer mx-2 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 dark:text-white">phone</span>
                <span class="dark:text-white">{% if this.getSelectedSOSUrgent.user.telephone %}<a
                    class="dark:text-white" href="tel://{{ this.getSelectedSOSUrgent.user.telephone }}"
                    target="_blank">{{ this.getSelectedSOSUrgent.user.telephone }}</a>{% else %}{{ 'Signalement.not_available'|trans }}{% endif %}</span>
              </div>
            </div>
          </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="w-full p-4">
              <h1 class="text-md text-gray-800 dark:text-gray-400 mb-2 text-center">
                <b>{{ 'Signalement.infoInRealTime'|trans }}</b></h1>

              <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 text-green-700" style="font-size: 30px">speed</span>
                  <span
                    class="dark:text-white"><b>{{ 'Signalement.speed'|trans }} :</b> {{ this.getSelectedSOSUrgent.userVitesse }} %</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 text-green-700"
                        style="font-size: 30px">battery_full</span>
                  <span
                    class="dark:text-white"><b>{{ 'Signalement.battery'|trans }} :</b> {{ this.getSelectedSOSUrgent.userBatterie }} %</span>
                </div>
              </div>

              {#              {% if this.getSelectedSOSUrgent.arrivee is same as (1) %} #}
              {#                <p class="text-sm text-gray-800 dark:text-gray-400 my-2">{{ 'Signalement.user_arrived'|trans }}.</p> #}
              {#              {% else %} #}
              {#                <p class="text-sm text-gray-800 dark:text-gray-400 my-2 text-center"><b>{{ 'Signalement.adresse_destination'|trans }} : </b>{{ this.getSelectedSOSUrgent.destinationAdresse ?: 'Signalement.not_available'|trans }}</p> #}
              {#              {% endif %} #}

              {% if this.getSelectedSOSUrgent.userLatitude is not same as("") and this.getSelectedSOSUrgent.userLongitude is not same as("") %}
                <h1 class="text-md text-gray-800 dark:text-gray-400 mb-2 text-center my-2">
                  <b>{{ 'Signalement.position_actuelle'|trans }}</b></h1>
                <iframe class="w-full" style="height: 420px"
                        src="https://maps.google.com/maps?q={{ this.getSelectedSOSUrgent.userLatitude }},{{ this.getSelectedSOSUrgent.userLongitude }}&hl=fr&z=14&amp;output=embed"
                        frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
              {% endif %}
            </div>
          </div>
          {#         <p class="text-sm text-gray-800 dark:text-gray-400 mb-2"><b>Suiveurs : </b>{{ this.getSelectedSOSUrgent.suiveurs }}</p> #}

          <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-1/2">
              <div class="flex flex-nowrap items-center mb-3">
                <img class="w-6 h-6 rounded-full shadow-lg mr-2"
                     src="{{ this.getSelectedSOSUrgent.user.photoProfil|linkImage('photos_profil') }}"
                     alt="{{ this.getSelectedSOSUrgent.user.pseudo }}"/>
                <h5
                  class="text-xl font-medium text-gray-900 dark:text-white capitalize">{{ this.getSelectedSOSUrgent.user.pseudo?: 'Signalement.pseudo_not_available'|trans }}</h5>
              </div>
              <span
                class="text-sm text-gray-500 dark:text-gray-400"><b>{{ 'Signalement.age'|trans }} :</b> {{ this.getSelectedSOSUrgent.user.age ?: 'Signalement.not_available'|trans }} ans</span>
              <span
                class="text-sm text-gray-500 dark:text-gray-400"><b>{{ 'Signalement.date_naissance'|trans }} :</b> {{ this.getSelectedSOSUrgent.user.dateNaissance|date('d/m/Y') ?: 'Signalement.not_available'|trans }}</span>
              <span
                class="text-sm text-gray-500 dark:text-gray-400"><b>{{ 'Signalement.sexe'|trans }} :</b> {{ this.getSelectedSOSUrgent.user.sexe ?: 'Signalement.not_available'|trans }}</span>
              <span
                class="text-sm text-gray-500 dark:text-gray-400"><b>{{ 'Signalement.frequence_sortie'|trans }} :</b> {{ this.getSelectedSOSUrgent.user.frequenceSortie ?: 'Signalement.not_available'|trans }}</span>
              <span
                class="text-sm text-gray-500 dark:text-gray-400"><b>{{ 'Signalement.frequence_voyage'|trans }} :</b> {{ this.getSelectedSOSUrgent.user.frequenceVoyage ?: 'Signalement.not_available'|trans }}</span>
              <span
                class="text-sm text-gray-500 dark:text-gray-400"><b>{{ 'Signalement.email'|trans }} :</b> {% if this.getSelectedSOSUrgent.user.email %}
                  <a
                  href="mailto://{{ this.getSelectedSOSUrgent.user.email }}">{{ this.getSelectedSOSUrgent.user.email }}</a>{% else %}{{ 'Signalement.not_available'|trans }}{% endif %}</span>
              <span
                class="text-sm text-gray-500 dark:text-gray-400"><b>{{ 'Signalement.phone'|trans }} :</b> {% if this.getSelectedSOSUrgent.user.telephone %}
                  <a
                  href="tel://{{ this.getSelectedSOSUrgent.user.telephone }}">{{ this.getSelectedSOSUrgent.user.telephone }}</a>{% else %}{{ 'Signalement.not_available'|trans }}{% endif %}</span>
              <span
                class="text-sm text-gray-500 dark:text-gray-400"><b>{{ 'Signalement.city'|trans }} :</b> {{ this.getSelectedSOSUrgent.user.ville ?: 'Signalement.not_available'|trans }}</span>
              <span
                class="text-sm text-gray-500 dark:text-gray-400"><b>{{ 'Signalement.pays'|trans }} :</b> {{ this.getSelectedSOSUrgent.user.pays ?: 'Signalement.not_available'|trans }}</span>
              <span
                class="text-sm text-gray-500 dark:text-gray-400"><b>{{ 'Signalement.date_insription'|trans }} :</b> {{ this.getSelectedSOSUrgent.user.dateInscription|date('d/m/Y H:i') ?: 'Signalement.not_available'|trans }}</span>
              <span
                class="text-sm text-gray-500 dark:text-gray-400"><b>{{ 'Signalement.date_derniere_connexion'|trans }} :</b> {{ this.getSelectedSOSUrgent.user.dateDerniereConnexion|date('d/m/Y H:i') ?: 'Signalement.not_available'|trans }}</span>
              <span
                class="text-sm text-gray-500 dark:text-gray-400"><b>{{ 'Signalement.date_dernier_action'|trans }} :</b> {{ this.getSelectedSOSUrgent.user.dateDerniereAction|date('d/m/Y H:i') ?: 'Signalement.not_available'|trans }}</span>
              <span
                class="text-sm text-gray-500 dark:text-gray-400"><b>{{ 'Signalement.langue'|trans }} :</b> {{ this.getSelectedSOSUrgent.user.langage ?: 'Signalement.not_available'|trans }}</span>
              <span
                class="text-sm text-gray-500 dark:text-gray-400"><b>{{ 'Signalement.os'|trans }} :</b> {{ this.getSelectedSOSUrgent.user.os ?: 'Signalement.not_available'|trans }}</span>
            </div>
            <div class="w-1/2" style="height: 420px">
              {% if this.getSelectedSOSUrgent.user.latitude is not same as("") and this.getSelectedSOSUrgent.user.longitude is not same as("") %}
                <iframe class="w-full" style="height: 420px"
                        src="https://maps.google.com/maps?q={{ this.getSelectedSOSUrgent.user.latitude }},{{ this.getSelectedSOSUrgent.user.longitude }}&hl=fr&z=14&amp;output=embed"
                        frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
              {% endif %}
            </div>
          </div>
        {% endif %}
      </div>

      <!-- Modal footer -->
      <div class="p-6 space-x-2 border-t border-gray-200 rounded-b dark:border-gray-600">
        <div class="flex justify-between">
          {% if app.user.proOptionChat %}
            <button type="button"
                    onclick="document.getElementById('modal_hide_modal_marker_sos_urgent').click();"
                    data-action="live#action live#$render"
                    data-live-action-param="openConversation"
                    data-live-id-param="{{ this.getSelectedSOSUrgent.user ? this.getSelectedSOSUrgent.user.id : '' }}"
                    class="flex flex-nowrap items-center text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">
              <span class="material-symbols-outlined mr-2">forum</span>
              {{ 'Signalement.btn_message'|trans }}
            </button>
          {% endif %}
          {% if this.getSelectedSOSUrgent.etat is not same as (1) %}
            <button type="button"
                    data-action="live#action live#$render"
                    data-live-action-param="updateToggleTraiteSOSUrgent"
                    class="flex flex-nowrap items-center 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 mr-2 mb-2 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800">
              <span class="material-symbols-outlined mr-2">done_all</span>
              {{ 'Signalement.mark_as_treated'|trans }}
            </button>
            {#          {% elseif this.getSelectedSOSUrgent.etat is not same as (0) %} #}
            {#            <button type="button" #}
            {#                    data-action="live#action live#$render" #}
            {#                    data-live-action-param="updateToggleTraiteSOSUrgent" #}
            {#                    class="flex flex-nowrap items-center focus:outline-none text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800"> #}
            {#              <span class="material-symbols-outlined mr-2">gpp_maybe</span> #}
            {#              {{ 'Signalement.mark_as_untreated'|trans }} #}
            {#            </button> #}
          {% endif %}
        </div>
      </div>
    </div>
  </div>
</div>