{% form_theme form with admin_form_themes() only %}
<div {{ attributes }}>
  {% if newPath is not null and (disabledNewIfEmpty == false or disabledNewIfEmpty == true and items|length > 0) %}
    <div class="mb-4 flex justify-end">
      <a
        href="{{ newHref }}"
        class="border-primary text-primary hover:border-primary-hover hover:text-primary-hover focus-visible:outline-primary-hove flex cursor-pointer gap-2 rounded-md border px-2 py-1 text-sm font-semibold shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2">
        <div class="icon-circle-plus"></div>
        <span>
          {%- if newTitle is defined %}{{ newTitle }}{% else %}Ajouter{% endif -%}
        </span>
      </a>
    </div>
  {% endif %}
  {% if searchType %}
    {{
      form_start(form, { attr: {
      'data-action': 'live#action:prevent',
      'data-live-action-param': 'debounce(300)|filter',
      'novalidate': 'true',
    }}
    ) }}
    <div
      x-data="
        {
          openFilter: false,
          filtersCount: 0,
          get filters() {
            return this.filtersCount;
          }
        }
      "
      x-on:update-filters-count.window="filtersCount = $event.detail"
      class="relative flex flex-col gap-3 rounded-md bg-transparent py-4 md:flex-row md:items-center md:justify-between"
      data-skip-morph>
      {{ form_row(form.query, { label : false }) }}
      <!-- Buttons aligned horizontally always -->
      {% if form.direction is defined and form.sorter is defined %}
        <div class="flex w-full items-center justify-end gap-2 md:w-auto">
          <!-- Filter button + dropdown -->
          <div class="relative">
            <button
              type="button"
              x-on:click="openFilter = !openFilter"
              class="relative flex cursor-pointer items-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-800 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:hover:bg-gray-800">
              <svg
                class="h-4 w-4 text-gray-600 dark:text-white/50"
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round">
                <path d="m21 16-4 4-4-4"/>
                <path d="M17 20V4"/>
                <path d="m3 8 4-4 4 4"/>
                <path d="M7 4v16"/>
              </svg>
              Trier
              <span
                x-show="filters > 0"
                x-text="filters"
                x-transition
                x-cloak
                class="absolute -top-1.5 -right-1.5 flex h-5 w-5 items-center justify-center rounded-full bg-gray-800 text-xs font-semibold text-white">
              </span>
            </button>

            <!-- DROPDOWN FORM -->
            <div
              x-show="openFilter"
              x-on:click.away="openFilter = false"
              x-transition
              x-cloak
              class="absolute right-0 z-20 mt-2 w-72 space-y-4 rounded-lg border border-gray-200 bg-white p-4 shadow-lg dark:border-gray-700 dark:bg-gray-900">
              <!-- ASC/DESC -->
              <div class="flex gap-2">
                {% for choice in form.direction %}
                  <label class="flex-1">
                    {{
                      form_widget(choice, {
                      attr: {
                      class: 'sr-only ',
                      }
                      })
                    }}
                    <div
                      class="cursor-pointer rounded-full px-4 py-2 text-center text-sm font-medium transition-colors"
                      x-data
                      :class="{{ choice.vars.checked ? '\'bg-primary text-white\'' : '\'bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white/80\'' }}"
                      x-on:click.prevent="document.getElementById('{{ choice.vars.id }}').click()">
                      {{ choice.vars.label }}
                    </div>
                  </label>
                {% endfor %}
              </div>
              {{ form_widget(form.sorter) }}
            </div>
          </div>
        </div>
      {% else %}
        {{ form_widget(form.sorter) }}
      {% endif %}
      {% if form.submit is defined %}
        {{ form_row(form.submit) }}
      {% endif %}
    </div>
    {{ form_end(form) }}
  {% endif %}
  {% block template -%}
  {%- endblock %}
  {% if items.totalItemCount > items.itemNumberPerPage %}
    <div class="flex justify-end p-6">
      {{ knp_pagination_render(items, '@extends/SerenityAdmin/pagination.html.twig') }}
    </div>
  {% endif %}
</div>
