{% import 'ohmyadmin/lib/forms.html' as forms %}

<div class="inline-block relative z-10"
     x-data="{open: false}"
     hx-target="#data"
     hx-boost="true"
     hx-indicator="#load-indicator"
     data-test="filter"
>
    <button class="btn" @click="open = !open">
        <span>{{ filter.label }}</span>
        <span class="text-gray-500">{{ tabler_icon('chevron-down') }}</span>
    </button>
    <form method="get"
          hx-get
          action="{{ request.url }}"
          x-show="open"
          @submit="open = false; $dispatch('filters-activate');"
          @click.outside="open = false"
          x-transition:enter="transition ease-out duration-100"
          x-transition:enter-start="transform opacity-0 scale-95"
          x-transition:enter-end="transform opacity-100 scale-100"
          x-transition:leave="transition ease-in duration-75"
          x-transition:leave-start="transform opacity-100 scale-100"
          x-transition:leave-end="transform opacity-0 scale-95"
          class="dropdown absolute top-0 left-0 w-64 translate-y-12 px-3 py-2">
        <div>
            {% block content %}{% endblock %}
        </div>
        <div class="mt-5 flex items-center gap-2">
            <button class="btn btn-accent" type="submit">
                {{ _('Apply', domain='ohmyadmin') }}
            </button>
            <button class="btn btn-text" type="button" @click="open = !open">
                {{ _('Cancel', domain='ohmyadmin') }}
            </button>
        </div>
    </form>
</div>
