{% trans_default_domain 'home' %}

<div id="modal_marker_signalement" data-loading="action(updateToggleTraiteMarker)|addClass(opacity-50)" 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.getSelectedSignalement.details.url is not same as("") %}
            <img src="{{ this.getSelectedSignalement.details.url }}" alt="{{ 'Signalement.title'|trans }}" class="h-6">
          {% endif %}
        </span>
        <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
          {% if this.getSelectedSignalement.details.title is not same as("") %}
            {{ this.getSelectedSignalement.details.title }}
          {% else %}
            {{ 'Signalement.title'|trans }}
          {% endif %}
          {% if this.getSelectedSignalement.details.type is not same as("") %}
            - ({{ this.getSelectedSignalement.details.type }})
          {% endif %}
        </h3>
        <button id="close_modal_marker_signalement" type="button" data-modal-hide="modal_marker_signalement"
                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.getSelectedSignalement.traite is not same as (0) %}
          <div
            class="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 mr-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>
              {{ 'Signalement.signalement_taken_to_police'|trans }}
              {% if this.getSelectedSignalement.nom_police is not same as ("") %}
                ({{ 'Signalement.signalement_taken_by'|trans }} : {{ this.getSelectedSignalement.nom_police }})
              {% endif %}
            </div>
          </div>
        {% else %}
          <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
                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>
              <span
                class="font-medium">{{ 'Signalement.warning'|trans }}</span> {{ 'Signalement.signalement_not_taken'|trans }}
            </div>
          </div>
        {% endif %}

        <p class="text-sm text-gray-800 dark:text-gray-400"><b>{{ 'Signalement.motif'|trans }}
            : </b>{{ this.getSelectedSignalement.details.title }}</p>

        {% if this.getSelectedSignalement.commentaire is not same as ("") %}
          <p class="text-sm text-gray-800 dark:text-gray-400"><b>{{ 'Signalement.commentaire'|trans }}
              :</b> {{ this.getSelectedSignalement.commentaire }}</p>
        {% else %}
          <p class="text-sm text-gray-800 dark:text-gray-400">{{ 'Signalement.commentaire_not_available'|trans }}</p>
        {% endif %}

        {% if this.getSelectedSignalement.transport is same as (2) %}
          <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">
                <h5 class="mb-1 text-xl font-medium text-gray-900 dark:text-white flex items-center">
                <span class="material-symbols-outlined mr-2">
                  {{ this.getSelectedSignalement.transport is same as (2) ? 'directions_bus' : 'directions_run' }}
                </span>
                  <span>{{ 'Signalement.mode_deplacement'|trans }} : {{ this.getSelectedSignalement.transport_string }}</span>
                </h5>
              </div>
              <span
                class="text-sm text-gray-500 dark:text-gray-400"><b>{{ 'Signalement.type_transport'|trans }}</b> : {{ this.getSelectedSignalement.transport_mode ?: this.getSelectedSignalement.transport_string }}</span>
              <span
                class="text-sm text-gray-500 dark:text-gray-400"><b>{{ 'Signalement.transport_line'|trans }} :</b> {{ this.getSelectedSignalement.transport_ligne ?: 'Signalement.not_available'|trans }}</span>
              <span
                class="text-sm text-gray-500 dark:text-gray-400"><b>{{ 'Signalement.transport_direction'|trans }} :</b> {{ this.getSelectedSignalement.transport_direction ?: 'Signalement.not_available'|trans }}</span>
              <span
                class="text-sm text-gray-500 dark:text-gray-400"><b>{{ 'Signalement.transport_station'|trans }} :</b> {{ this.getSelectedSignalement.transport_arret ?: 'Signalement.not_available'|trans }}</span>
              {% if this.getSelectedSignalement.transport_vehicule %}
                <span
                  class="text-sm text-gray-500 dark:text-gray-400"><b>{{ 'Signalement.transport_vehicule'|trans }} :</b> {{ this.getSelectedSignalement.transport_vehicule ?: 'Signalement.not_available'|trans }}</span>
              {% endif %}
            </div>
          </div>
        {% else %}
          <p class="mr-4 text-sm text-gray-800 dark:text-gray-400"><b>{{ 'Signalement.mode_deplacement'|trans }}
              :</b> {{ this.getSelectedSignalement.transport_string }}</p>
        {% endif %}

        {% if this.getSelectedSignalement.adresse is not same as ("") %}
          <p class="text-sm text-gray-800 dark:text-gray-400"><b>{{ 'Signalement.adresse_complete'|trans }}
              :</b> {{ this.getSelectedSignalement.adresse }}</p>
        {% endif %}

        {% if this.getSelectedSignalement.commentaire_police is not same as ("") and this.getSelectedSignalement.traite is same as(1) %}
          <p class="text-sm text-gray-800 dark:text-gray-400"><b>{{ 'Signalement.commentaire_police'|trans }}
              :</b> {{ this.getSelectedSignalement.commentaire_police }}</p>
        {% endif %}

        <p class="text-sm text-gray-800 dark:text-gray-400"><b>{{ 'Signalement.signalTo'|trans }}
            :</b> {{ this.getSelectedSignalement.date|date('d/m/Y H:i') }}</p>
        {% if this.getSelectedSignalement.is_temoin is same as (1) %}
          <p class="text-sm text-gray-800 dark:text-gray-400"><b>{{ 'Signalement.is_temoin'|trans }}.</b></p>
        {% else %}
          <p class="text-sm text-gray-800 dark:text-gray-400"><b>{{ 'Signalement.is_victime'|trans }}.</b></p>
        {% endif %}

        {% if this.getSelectedSignalement.veutEtreRecontacte is same as (1) %}
          {% if this.getSelectedSignalement.detail_user %}
            <p class="text-sm text-gray-800 dark:text-red-400"><b>{{ 'Signalement.is_contact'|trans }}.</b></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>{% if this.getSelectedSignalement.detail_user.email %}<a
                      href="mailto://{{ this.getSelectedSignalement.detail_user.email }}">{{ this.getSelectedSignalement.detail_user.email }}</a>{% else %}{{ 'Signalement.not_available'|trans }}{% endif %}</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>{% if this.getSelectedSignalement.detail_user.telephone %}<a
                      href="tel://{{ this.getSelectedSignalement.detail_user.telephone }}">{{ this.getSelectedSignalement.detail_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="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.getSelectedSignalement.detail_user.photoProfil|linkImage('photos_profil') }}"
                       alt="{{ this.getSelectedSignalement.detail_user.pseudo }}"/>
                  <h5
                    class="text-xl font-medium text-gray-900 dark:text-white capitalize">{{ this.getSelectedSignalement.detail_user.pseudo?: 'Signalement.pseudo_not_available'|trans }}</h5>
                </div>
                <span
                  class="text-sm text-gray-500 dark:text-gray-400"><b>{{ 'Signalement.nb_signalement'|trans }} : <span
                      class="text-purple-700">{{ this.getSelectedSignalement.nbSignalement ?: 'Signalement.not_available'|trans }}</span></b></span>
                <span
                  class="text-sm text-gray-500 dark:text-gray-400"><b>{{ 'Signalement.age'|trans }} :</b> {{ this.getSelectedSignalement.detail_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.getSelectedSignalement.detail_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.getSelectedSignalement.detail_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.getSelectedSignalement.detail_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.getSelectedSignalement.detail_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.getSelectedSignalement.detail_user.email %}
                    <a
                    href="mailto://{{ this.getSelectedSignalement.detail_user.email }}">{{ this.getSelectedSignalement.detail_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.getSelectedSignalement.detail_user.telephone %}
                    <a
                    href="tel://{{ this.getSelectedSignalement.detail_user.telephone }}">{{ this.getSelectedSignalement.detail_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.getSelectedSignalement.detail_user.ville ?: 'Signalement.not_available'|trans }}</span>
                <span
                  class="text-sm text-gray-500 dark:text-gray-400"><b>{{ 'Signalement.pays'|trans }} :</b> {{ this.getSelectedSignalement.detail_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.getSelectedSignalement.detail_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.getSelectedSignalement.detail_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.getSelectedSignalement.detail_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.getSelectedSignalement.detail_user.langage ?: 'Signalement.not_available'|trans }}</span>
                <span
                  class="text-sm text-gray-500 dark:text-gray-400"><b>{{ 'Signalement.os'|trans }} :</b> {{ this.getSelectedSignalement.detail_user.os ?: 'Signalement.not_available'|trans }}</span>
              </div>
              <div class="w-1/2" style="height: 420px">
                {% if this.getSelectedSignalement.latitude is not same as("") and this.getSelectedSignalement.longitude is not same as("") %}
                  <iframe class="w-full h-full"
                          src="https://maps.google.com/maps?q={{ this.getSelectedSignalement.latitude }},{{ this.getSelectedSignalement.longitude }}&hl=fr&z=15&amp;output=embed"
                          frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
                {% endif %}
              </div>
            </div>
          {% else %}
            <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">
                <span class="text-sm text-gray-500 dark:text-gray-400"><b>Utilisateur supprimé</b></span>
              </div>
            </div>
          {% endif %}
        {% else %}
          <p class="text-sm text-gray-800 dark:text-gray-400">{{ 'Signalement.not_contact'|trans }}.</p>
        {% endif %}

        {#        {% if this.getSelectedSignalement.veutEtreRecontacte is same as (1) %} #}
        {#          <p class="text-sm text-gray-800 dark:text-red-400"><b>{{ 'Signalement.is_contact'|trans }}.</b></p> #}
        {#        {% else %} #}
        {#          <p class="text-sm text-gray-800 dark:text-gray-400">{{ 'Signalement.not_contact'|trans }}.</p> #}
        {#        {% endif %} #}

        {#        {% if this.getSelectedSignalement.veutEtreRecontacte is same as (1) %} #}
        {#          <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>{% if this.getSelectedSignalement.detail_user.email %}<a href="mailto://{{ this.getSelectedSignalement.detail_user.email }}">{{ this.getSelectedSignalement.detail_user.email }}</a>{% else %}{{ 'Signalement.not_available'|trans }}{% endif %}</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>{% if this.getSelectedSignalement.detail_user.telephone %}<a href="tel://{{ this.getSelectedSignalement.detail_user.telephone }}">{{ this.getSelectedSignalement.detail_user.telephone }}</a>{% else %}{{ 'Signalement.not_available'|trans }}{% endif %}</span> #}
        {#              </div> #}
        {#            </div> #}
        {#          </div> #}
        {#        {% endif %} #}

        {#        {% if this.getSelectedSignalement.veutEtreRecontacte is same as (1) %} #}
        {#          <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.getSelectedSignalement.detail_user.photoProfil|linkImage('photos_profil') }}" alt="{{ this.getSelectedSignalement.detail_user.pseudo }}"/> #}
        {#                <h5 class="text-xl font-medium text-gray-900 dark:text-white capitalize">{{ this.getSelectedSignalement.detail_user.pseudo?: 'Signalement.pseudo_not_available'|trans }}</h5> #}
        {#              </div> #}
        {#              <span class="text-sm text-gray-500 dark:text-gray-400"><b>{{ 'Signalement.nb_signalement'|trans }} : <span class="text-purple-700">{{ this.getSelectedSignalement.nbSignalement ?: 'Signalement.not_available'|trans }}</span></b></span> #}
        {#              <span class="text-sm text-gray-500 dark:text-gray-400"><b>{{ 'Signalement.age'|trans }} :</b> {{ this.getSelectedSignalement.detail_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.getSelectedSignalement.detail_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.getSelectedSignalement.detail_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.getSelectedSignalement.detail_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.getSelectedSignalement.detail_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.getSelectedSignalement.detail_user.email %}<a href="mailto://{{ this.getSelectedSignalement.detail_user.email }}">{{ this.getSelectedSignalement.detail_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.getSelectedSignalement.detail_user.telephone %}<a href="tel://{{ this.getSelectedSignalement.detail_user.telephone }}">{{ this.getSelectedSignalement.detail_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.getSelectedSignalement.detail_user.ville ?: 'Signalement.not_available'|trans }}</span> #}
        {#              <span class="text-sm text-gray-500 dark:text-gray-400"><b>{{ 'Signalement.pays'|trans }} :</b> {{ this.getSelectedSignalement.detail_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.getSelectedSignalement.detail_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.getSelectedSignalement.detail_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.getSelectedSignalement.detail_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.getSelectedSignalement.detail_user.langage ?: 'Signalement.not_available'|trans }}</span> #}
        {#              <span class="text-sm text-gray-500 dark:text-gray-400"><b>{{ 'Signalement.os'|trans }} :</b> {{ this.getSelectedSignalement.detail_user.os ?: 'Signalement.not_available'|trans }}</span> #}
        {#            </div> #}
        {#            <div class="w-1/2" style="height: 420px"> #}
        {#              {% if this.getSelectedSignalement.latitude is not same as("") and this.getSelectedSignalement.longitude is not same as("") %} #}
        {#                <iframe class="w-full h-full" src="https://maps.google.com/maps?q={{ this.getSelectedSignalement.latitude }},{{ this.getSelectedSignalement.longitude }}&hl=fr&z=15&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">
        {% if this.getSelectedSignalement.traite is not same as (1) %}
          <div class="mb-3 px-2">
            <label for="commentaire_pro"
                   class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{{ 'Signalement.commentaire_placeholder'|trans }}</label>
            <textarea id="commentaire_pro"
                      type="text"
                      data-model="norender|selectSignalementCommentaire"
                      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="{{ 'Signalement.commentaire_placeholder_bloc'|trans }}">
              {{ this.getSelectedSignalement.commentaire_police }}
            </textarea>
          </div>
        {% endif %}
        <div class="flex justify-between">
          {% if app.user.proOptionChat %}
            <button type="button"
                    onclick="document.getElementById('close_modal_marker_signalement').click();"
                    data-action="live#action live#$render"
                    data-live-action-param="openConversation"
                    data-live-id-param="{{ this.getSelectedSignalement.user }}"
                    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.getSelectedSignalement.traite is not same as (1) %}
            <button type="button"
                    data-action="live#action live#$render"
                    data-live-action-param="updateToggleTraiteMarker"
                    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.getSelectedSignalement.traite is not same as (0) %}
            <button type="button"
                    data-action="live#action live#$render"
                    data-live-action-param="updateToggleTraiteMarker"
                    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>