{% from "admin/components/csrf-field.html" import csrf_field %}
{% from "admin/components/icons.html" import icon %}
{# Bulk-actions listbox, rendered separately from ui/table.html so
   components/list_content.html can put it beside the search bar
   instead of stacked above the table -- row checkboxes still reference
   the form it renders via the HTML `form=` attribute (see
   ui/table.html), so the form itself never has to wrap the table.

   Picking an action submits immediately, with no separate "Apply"
   step: it writes the chosen route onto the form's `action` and calls
   requestSubmit(), not .submit(), which would skip the onsubmit
   handler running the confirm decision below.

   The route and confirmation text ride in as data-url/data-confirm on
   the clicked item and are read back through $el.dataset, so neither
   has to survive being embedded in a JS string.

   Included, not a macro, so it shares list_content.html's ambient
   context (actions, base_path, model_admin). #}
{% if actions %}
<form id="bulk-actions-form" method="post" action="{{ base_path }}/{{ model_admin.get_slug() }}/actions/"
      onsubmit="return window.adminConfirmSubmit(event, this, this.dataset.confirm)"
      class="{{ ui('toolbar', 'item') }}">
  {{ csrf_field(csrf_token) }}
  {# The query the list is showing, carried on the form so that "select
     all matching" can be resolved server-side. A checkbox only ever
     reaches the rows on this page, so without these the filtered set
     would be unreachable from a 25-row window. #}
  <input type="hidden" name="search" value="{{ search or '' }}">
  <input type="hidden" name="sort" value="{{ ordering or '' }}">
  {% for name, value in (filters or {}).items() %}
  <input type="hidden" name="filter[{{ name }}]" value="{{ value }}">
  {% endfor %}
  <input type="hidden" name="_select_all" value="">
  {# w-full on both the positioning wrapper and the trigger: a button
     can only fill a box that is itself full width, and the <form>
     above is what the stacked toolbar actually stretches. #}
  <div class="relative flex w-full lg:inline-flex lg:w-auto" x-data='{ open: false, label: {{ _("Action…")|tojson }} }'
       @keydown.escape="open = false" @click.outside="open = false">
    <button type="button" x-ref="trigger" @click="open = !open"
            :aria-expanded="open ? 'true' : 'false'" aria-haspopup="listbox"
            class="{{ ui('button', 'outline', 'size-sm') }} {{ ui('toolbar', 'item') }}">
      <span x-text="label" class="{{ ui('toolbar', 'item-label') }}"></span>
      {{ icon("chevron-down", "w-3.5 h-3.5") }}
    </button>
    <div x-show="open" x-cloak role="listbox"
         x-anchor.bottom-start.offset.6="$refs.trigger"
         x-transition:enter="transition ease-out duration-150"
         x-transition:enter-start="opacity-0 scale-95"
         x-transition:enter-end="opacity-100 scale-100"
         x-transition:leave="transition ease-in duration-100"
         x-transition:leave-start="opacity-100 scale-100"
         x-transition:leave-end="opacity-0 scale-95"
         class="{{ ui('combobox', 'content') }} w-48">
      {% for action in actions %}
      <div role="option" tabindex="0"
           data-url="{{ base_path }}/{{ model_admin.get_slug() }}/actions/{{ action.name }}"
           {% if action.confirm %}data-confirm="{{ _(action.confirm) }}"{% endif %} {% if action.preview %}data-preview{% endif %}
           @click="label = $el.textContent.trim(); open = false;
                   let form = $el.closest('form');
                   form.action = $el.dataset.url;
                   form.dataset.confirm = $el.dataset.confirm || '';
                   form.requestSubmit()"
           class="{{ ui('combobox', 'item') }}">{{ _(action.label) }}</div>
      {% endfor %}
    </div>
  </div>
</form>
{% endif %}