{% load i18n %}

<dialog id="filtersDialog" class="modal">
  <section
    class="relative modal-box p-0 max-h-dvh overflow-hidden md:max-h-[calc(100dvh-0.5rem)] lg:max-h-[calc(100dvh-1rem)]"
  >
    <header class="absolute inset-x-0 top-0 backdrop-blur-3xl p-4 lg:p-6">
      <nav class="flex items-center justify-between gap-4">
        <h1 class="text-lg font-bold lg:text-xl">{% trans 'Filters' %}</h1>

        <div
          class="tooltip tooltip-left rtl:tooltip-right"
          data-tip="{% trans 'Close' %}"
          onclick="filtersDialog.close()"
        >
          <button class="btn btn-square btn-sm btn-ghost lg:btn-md 2xl:btn-lg">
            <i data-lucide="x" class="size-4 lg:size-6"></i>
            <span class="sr-only">{% trans 'Close' %}</span>
          </button>
        </div>
      </nav>
    </header>

    <main
      class="pt-16 pb-4 max-h-dvh overflow-y-auto md:max-h-[calc(100dvh-0.5rem)] lg:pt-20 lg:pb-6 lg:max-h-[calc(100dvh-1rem)]"
    >
      <div class="container-prose grid gap-4 px-4 lg:gap-8 lg:px-6">
        {% for element in elements %}{{ element }}{% endfor %}
      </div>
    </main>
  </section>

  <button class="modal-backdrop" onclick="filtersDialog.close()">
    {% trans 'close' %}
  </button>
</dialog>
