{% trans_default_domain 'home' %}
<div id="modal_marker_safePlace" 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.getSelectedSafePlace["safeplace"] is not empty %}
            {% if this.getSelectedSafePlace["motif"].url is not same as("") %}
              <img src="{{ this.getSelectedSafePlace["motif"].url }}" alt="Signalement" class="h-6">
            {% endif %}
          {% endif %}
        </span>
        <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
          {% if this.getSelectedSafePlace["safeplace"] is not empty %}
            {% if this.getSelectedSafePlace["motif"].title is not same as("") %}
              {{ this.getSelectedSafePlace["motif"].title }}
            {% else %}
              {{ 'SafePlace.title'|trans }}
            {% endif %}
          {% endif %}
        </h3>
        <button type="button" data-modal-hide="modal_marker_safePlace"
                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.getSelectedSafePlace["safeplace"] is not empty %}
          {% if this.getSelectedSafePlace["safeplace"].bio is not same as (0) %}
            <div
              class="flex items-center p-4 mb-4 text-sm text-blue-800 border border-blue-300 rounded-lg bg-blue-50 dark:bg-gray-800 dark:text-blue-400 dark:border-blue-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>
                {{ this.getSelectedSafePlace["safeplace"].bio }}
              </div>
            </div>
          {% endif %}

          <div class="w-full grid grid-cols-2 gap-2">
            <span class="flex flex-wrap items-center text-sm text-gray-500 dark:text-gray-400">
                <span class="material-symbols-outlined mr-2">badge</span>
                <b
                  class="mr-2">{{ 'SafePlace.Name'|trans }} :</b>{{ this.getSelectedSafePlace["safeplace"].nom ?: 'SafePlace.not_available'|trans }}
              </span>
            <span class="flex flex-wrap items-center text-sm text-gray-500 dark:text-gray-400">
                <span class="material-symbols-outlined mr-2">bookmark_manager</span>
                <b
                  class="mr-2">{{ 'SafePlace.Category'|trans }} :</b>{{ this.getSelectedSafePlace["safeplace"].categorie ?: 'SafePlace.not_available'|trans }}
              </span>
            <span class="flex flex-wrap items-center text-sm text-gray-500 dark:text-gray-400">
                <span class="material-symbols-outlined mr-2">pin_drop</span>
                <b
                  class="mr-2">{{ 'SafePlace.Address'|trans }} :</b>{{ this.getSelectedSafePlace["safeplace"].adresse ?: 'SafePlace.not_available'|trans }}
              </span>
            <span class="flex flex-wrap items-center text-sm text-gray-500 dark:text-gray-400">
                <span class="material-symbols-outlined mr-2">location_city</span>
                <b
                  class="mr-2">{{ 'SafePlace.City'|trans }} :</b>{{ this.getSelectedSafePlace["safeplace"].ville ?: 'SafePlace.not_available'|trans }}
              </span>
            <span class="flex flex-wrap items-center text-sm text-gray-500 dark:text-gray-400">
                <span class="material-symbols-outlined mr-2">map</span>
                <b
                  class="mr-2">{{ 'SafePlace.Pays'|trans }} :</b>{{ this.getSelectedSafePlace["safeplace"].pays ?: 'SafePlace.not_available'|trans }}
              </span>
            <span class="flex flex-wrap items-center text-sm text-gray-500 dark:text-gray-400">
                <span class="material-symbols-outlined mr-2">phone</span>
                <b
                  class="mr-2">{{ 'SafePlace.Phone'|trans }} :</b>{{ this.getSelectedSafePlace["safeplace"].phone ?: 'SafePlace.not_available'|trans }}
              </span>
            <span class="flex flex-wrap items-center text-sm text-gray-500 dark:text-gray-400">
                <span class="material-symbols-outlined mr-2">favorite</span>
                <b
                  class="mr-2">{{ 'SafePlace.Favoris'|trans }} :</b>{{ this.getSelectedSafePlace["safeplace"].coupCoeur ?: 'SafePlace.not_available'|trans }}
              </span>
            <span class="flex flex-wrap items-center text-sm text-gray-500 dark:text-gray-400">
                <span class="material-symbols-outlined mr-2">handshake</span>
                <b
                  class="mr-2">{{ 'SafePlace.Sponsor'|trans }} :</b>{{ this.getSelectedSafePlace["safeplace"].sponsorLie ?: 'SafePlace.not_available'|trans }}
              </span>
            <span class="flex flex-wrap items-center text-sm text-gray-500 dark:text-gray-400">
                <span class="material-symbols-outlined mr-2">accessible</span>
                <b
                  class="mr-2">{{ 'SafePlace.Handicap'|trans }} :</b>{{ this.getSelectedSafePlace["safeplace"].accesHandicape? "Ce lieu est adapté pour les personnes avec un handicape": "Ce lieu n'est pas adapté pour les personnes avec un handicape" }}
              </span>
          </div>

          {% if this.getSelectedSafePlace["planning"] is not empty %}
            <div class="w-full">
              <span class="flex items-center justify-center text-sm text-gray-500 dark:text-gray-400 mb-2 w-full">
                <span class="material-symbols-outlined mr-2">schedule</span>
                <b>{{ 'SafePlace.horraire_ouverture'|trans }}</b>
              </span>
              <div class="relative overflow-x-auto shadow-md sm:rounded-lg">
                <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-2 py-3">
                      {{ 'SafePlace.day'|trans }}
                    </th>
                    <th scope="col" class="px-2 py-3">
                      {{ 'SafePlace.ouverture_matin'|trans }}
                    </th>
                    <th scope="col" class="px-2 py-3">
                      {{ 'SafePlace.fermeture_matin'|trans }}
                    </th>
                    <th scope="col" class="px-2 py-3">
                      {{ 'SafePlace.ouverture_apres_midi'|trans }}
                    </th>
                    <th scope="col" class="px-2 py-3">
                      {{ 'SafePlace.fermeture_apres_midi'|trans }}
                    </th>
                    {#                    <th scope="col" class="px-2 py-3"> #}
                    {#                      Service continue #}
                    {#                    </th> #}
                    {#                    <th scope="col" class="px-2 py-3"> #}
                    {#                      Service actif #}
                    {#                    </th> #}
                  </tr>
                  </thead>
                  <tbody>
                  {% for day in this.getSelectedSafePlace["planning"] %}
                    <tr
                      class="odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800 border-b dark:border-gray-700">
                      <th scope="row" class="px-2 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                        {{ day.jour }}
                      </th>
                      {% if not day.actif %}
                        <th colspan="4" class="px-2 py-4 text-center">
                          {{ 'SafePlace.close'|trans }}
                        </th>
                      {% else %}
                        <td class="px-2 py-4">
                          {{ day.h1 }}
                        </td>
                        {% if day.continu %}
                          <td colspan="2" class="px-2 py-4 text-center">
                            {{ 'SafePlace.open_continue_midi'|trans }}
                          </td>
                        {% else %}
                          <td class="px-2 py-4">
                            {{ day.h2 }}
                          </td>
                          <td class="px-2 py-4">
                            {{ day.h3 }}
                          </td>
                          <td class="px-2 py-4">
                            {{ day.h4 }}
                          </td>
                        {% endif %}
                        {% if day.continu and day.actif %}
                          <td class="px-2 py-4">
                            {{ day.h2 }}
                          </td>
                        {% endif %}
                      {% endif %}
                      {#                      <td class="px-2 py-4"> #}
                      {#                        <div class="flex items-center"> #}
                      {#                          {% if day.continu %} #}
                      {#                            <div class="h-2.5 w-2.5 rounded-full bg-green-500 me-2"></div> Oui #}
                      {#                          {% else %} #}
                      {#                            <div class="h-2.5 w-2.5 rounded-full bg-red-500 me-2"></div> Non #}
                      {#                          {% endif %} #}
                      {#                        </div> #}
                      {#                      </td> #}
                      {#                      <td class="px-2 py-4"> #}
                      {#                        <div class="flex items-center"> #}
                      {#                          {% if day.actif %} #}
                      {#                            <div class="h-2.5 w-2.5 rounded-full bg-green-500 me-2"></div> Oui #}
                      {#                          {% else %} #}
                      {#                            <div class="h-2.5 w-2.5 rounded-full bg-red-500 me-2"></div> Non #}
                      {#                          {% endif %} #}
                      {#                        </div> #}
                      {#                      </td> #}
                    </tr>
                  {% endfor %}
                  </tbody>
                </table>
              </div>
            </div>
          {% endif %}

          {% if this.getSelectedSafePlace["safeplace"].image is not same as("") %}
            <div class="w-full">
              <img src="{{ this.getSelectedSafePlace["safeplace"].image|linkImage('safeplaces') }}" alt="SafePlace_img"
                   class="w-full rounded">
            </div>
          {% endif %}


          {% if this.getSelectedSafePlace["safeplace"].latitude is not same as("") and this.getSelectedSafePlace["safeplace"].longitude is not same as("") %}
            <div class="w-full" style="height: 420px">
              <iframe class="w-full h-full"
                      src="https://maps.google.com/maps?q={{ this.getSelectedSafePlace["safeplace"].latitude }},{{ this.getSelectedSafePlace["safeplace"].longitude }}&hl=fr&z=14&amp;output=embed"
                      frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
            </div>
          {% endif %}
        {% endif %}
      </div>
    </div>
  </div>
</div>