{% trans_default_domain 'home' %}

<div data-controller="loadMoreChat">
  <form class="mb-2 flex items-center">
    <label for="simple-search" class="sr-only">{{ 'Messagerie.search'|trans }}</label>
    <div class="relative w-full">
      <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
        <span class="material-symbols-outlined dark:text-white">person_search</span>
      </div>
      <label>
        <input type="search" data-model="debounce(100)|query"
               placeholder="{{ 'Messagerie.search_conversation_or_message'|trans }}" required
               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>
    <button type="submit"
            class="p-2.5 ml-2 text-sm font-medium text-white bg-blue-700 rounded-lg border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
      <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
              d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"></path>
      </svg>
      <span class="sr-only">{{ 'Messagerie.search'|trans }}</span>
    </button>
  </form>

  <div class="flex mb-2" data-loading="model(filter)|addClass(opacity-50)">
    <div class="flex flex-wrap justify-center mt-2 mb-[12px] w-full text-center">
      {% if filter is same as("none") %}
        {% for element in typeElements %}
          <button type="button" class="contents p-1.5" data-model="filter" data-value="{{ element.value }}"
                  data-action="live#update">
                <span data-model="filter" data-value="{{ element.value }}" data-action="live#update"
                      class="m-1 block {{ element.filterText }} text-xs font-medium px-2.5 py-1 rounded hover:opacity-80">
                  {{ element.title }}
                </span>
          </button>
        {% endfor %}
      {% else %}
        {% for element in typeElements %}
          {% if filter is same as(element.value) %}
            <button type="button" class="contents p-1.5" data-model="filter" data-value="none"
                    data-action="live#update">
                  <span data-model="filter" data-value="none" data-action="live#update"
                        style="border-color: {{ element.colorFilter }}!important"
                        class="m-1 flex flex-nowrap items-center {{ element.filterText }} text-xs font-medium px-2.5 py-1 rounded hover:opacity-80 border {{ element.filterActiveBorder }}">
                    <span style="font-size: 15px"
                          class="material-symbols-outlined text-sm mr-1">cancel</span> {{ element.title }}</span>
            </button>
          {% endif %}
        {% endfor %}
      {% endif %}
    </div>
  </div>


  <div class="flow-root">
    <ul role="list" class="divide-y divide-gray-200 dark:divide-gray-700"
        data-loading="model(selectUserMessage)|addClass(opacity-50)">
      {% if this.getListConversation is not empty %}
        {% for conversation in this.getListConversation %}
          <li id="banner_{{ conversation.id }}"
              class="{{ conversation.vu is same as(0) ? 'bg-gray-100' : '' }} py-3 px-2 sm:py-4 cursor-pointer"
              data-controller="pophover" data-pophover-target="el">
            <div class="flex items-center space-x-2">
              <div class="flex-shrink-0">
                <div class="relative">
                  <img class="w-8 h-8 rounded-full" src="{{ conversation.photoProfil|linkImage('photos_profil') }}"
                       alt="photo_profil">
                  {% if conversation["online"] %}
                    <span
                      class="bottom-[-3px] left-5 absolute w-3.5 h-3.5 bg-green-400 border-2 border-white dark:border-gray-800 rounded-full"></span>
                  {% endif %}
                </div>
              </div>
              <div class="flex-1 min-w-0">
                <p class="text-sm font-medium text-gray-900 truncate dark:text-white">
                  {{ conversation.pseudo | default("") }}
                  <span class="text-gray-400">({{ 'Date.sinceAgo'|trans }} {{ conversation['date'] }})</span>
                </p>
                <p class="text-sm text-gray-500 truncate dark:text-gray-400">
                <span
                  class="{{ conversation.vu is same as(0) ? 'font-bold' : '' }}">{{ conversation.lastMessage }}</span>
                </p>
              </div>
              <div class="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">
                <button
                  class="select_user flex items-center p-2 text-sm font-medium text-center text-gray-900 rounded-lg hover:bg-gray-100 focus:ring-4 focus:outline-none dark:text-white focus:ring-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
                  type="button"
                  data-model="selectUserMessage"
                  data-value="{{ conversation.id }}"
                  data-action="live#update"
                >
                  <span class="material-symbols-outlined">send</span>
                </button>

                <button type="button"
                        data-loading="action(archiveConversation)|addClass(opacity-50)"
                        data-pophover-target="button"
                        class="flex items-center p-2 text-sm font-medium text-center text-gray-900 rounded-lg hover:bg-gray-100 focus:ring-4 focus:outline-none dark:text-white focus:ring-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-600">
                  <span class="material-symbols-outlined text-purple-600">archive</span>
                </button>

                <div data-loading="action(archiveConversation)|addClass(opacity-50)" data-pophover-target="pophover"
                     data-popover id="{{ 'pophover_archive_' ~ conversation.id }}" role="tooltip"
                     class="absolute z-10 invisible inline-block w-64 text-sm text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-sm opacity-0 dark:text-gray-400 dark:border-gray-600 dark:bg-gray-800">
                  <div
                    class="px-3 py-2 bg-gray-100 border-b border-gray-200 rounded-t-lg dark:border-gray-600 dark:bg-gray-700">
                    <h3
                      class="font-semibold text-gray-900 dark:text-white  text-center">{{ 'Messagerie.remove_contact_confiance'|trans }}</h3>
                  </div>
                  <div class="px-3 py-2 w-full flex flex-col justify-center items-center text-center">
                    <p>{{ 'Messagerie.remove_contact_confirm'|trans }}</p>
                    <button
                      data-action="pophover#close live#action live#update live#$render"
                      data-live-action-param="removeContactTrust"
                      data-live-id-param="{{ conversation.id }}"
                      type="button"
                      class="mt-2 flex items-center focus:outline-none text-white bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg text-sm px-2 py-1.5 me-2 mb-2 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-900">
                      <span class="material-symbols-outlined text-white mr-2 text-sm">archive</span>
                      <span class="text-xs">{{ 'Messagerie.remove_contact_confiance'|trans }}</span>
                    </button>
                  </div>
                  <div data-popper-arrow></div>
                </div>
              </div>
            </div>
          </li>
        {% endfor %}

        {% if filter is same as ('none') %}
          <li class="py-4 text-center">
            <button id="load_more_button"
                    data-action="live#action live#$render" data-live-action-param="loadMore"
                    class="text-blue-600 hover:text-blue-800 font-medium">
              {{ 'Messagerie.load_more'|trans }}
            </button>
            <div id="load_more" class="flex justify-center hidden">
              <div class="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600"></div>
            </div>
          </li>
        {% endif %}
      {% else %}
        {% if typeElements|filter(element => element.value is same as(filter))|first %}
          <span
            class="text-sm flex justify-center items-center w-full text-gray-400">{{ typeElements|filter(element => element.value is same as(filter))|first.empty }}</span>
        {% else %}
          <span
            class="text-sm flex justify-center items-center w-full text-gray-400">{{ 'Messagerie.no_conversation'|trans }}</span>
        {% endif %}
      {% endif %}
    </ul>
  </div>
</div>