{#- The Actions menu in the toolbar, for the rows ticked in the table below.
    The table reloads on its own, so the two share what is ticked through a
    store, and each action submits the table's form by its id. The table sends
    the menu again with every reload, since "select all" counts what matches
    now, and the total sends its first line again once it is in. Rows are
    ticked in the table, which a phone does not show. -#}
{% import "adminsite/_icons.html" as icons %}
{% if actions %}
  {% set safe = actions|rejectattr("dangerous")|list %}
  {% set dangerous = actions|selectattr("dangerous")|list %}
  <div id="bulk-actions" class="max-md:hidden" x-data {% if oob|default(false) %}hx-swap-oob="true"{% endif %}>
    <button id="bulk-actions-button" class="btn btn-sm" type="button" popovertarget="bulk-actions-menu"
            disabled :disabled="!$store.selection.picked"
            :class="$store.selection.picked ? 'btn-soft btn-primary border-primary' : 'btn-plain'">
      {{ _('Actions') }}
      <span class="badge badge-sm badge-primary rounded-full px-1.5 tabular-nums" x-show="$store.selection.picked" x-cloak>
        <span x-show="!$store.selection.everything" x-text="$store.selection.picked"></span>
        <span x-show="$store.selection.everything" x-text="$store.selection.matching"></span>
      </span>
      {{ icons.icon("chevron-down", 14) }}
    </button>
    {#- In the top layer, lined up with the button's end, so nothing scrolling
        under it cuts it off. -#}
    <div id="bulk-actions-menu" popover data-below="bulk-actions-button" data-align="end"
         ontoggle="dropBelow(event)" aria-label="{{ _('Actions') }}"
         class="invisible inset-auto m-0 w-72 rounded-box border border-base-300 bg-base-100 p-1.5 text-base-content shadow-float">
      {% include "adminsite/_bulk_summary.html" %}
      {#- Whatever cannot be undone comes last, under a line of its own. -#}
      <ul class="menu w-full p-0">
        {% for item in safe + dangerous %}
          <li {% if safe and loop.index0 == safe|length %}class="mt-1 border-t border-base-300 pt-1"{% endif %}>
            <button class="{% if item.dangerous %}text-error{% endif %}"
                    {% if item.needs_dialog %}type="button"
                      onclick="this.closest('[popover]').hidePopover(); document.getElementById('action-{{ item.name }}').showModal()"
                    {% else %}type="submit" form="records-actions"
                      formaction="{{ urls.action(view, item.name) }}{% if request.url.query %}?{{ request.url.query }}{% endif %}"
                    {% endif %}>
              {% if item.icon %}{{ icons.custom(item.icon, urls, "size-3.5" if item.dangerous else "size-3.5 text-muted") }}{% endif %}
              {{ item.label }}
            </button>
          </li>
        {% endfor %}
        <li class="mt-1 border-t border-base-300 pt-1">
          <button type="button"
                  @click="
                    document.querySelectorAll('#records-actions input[type=checkbox]').forEach(box => box.checked = false);
                    $store.selection.picked = 0;
                    $store.selection.everything = false;
                    $el.closest('[popover]').hidePopover();
                  ">
            <span class="text-muted">{{ icons.icon("x", 14) }}</span>{{ _('Clear the selection') }}
          </button>
        </li>
      </ul>
    </div>
  </div>
{% endif %}