{# The form the row checkboxes belong to, by id rather than by nesting: a form
   cannot wrap a tbody without wrapping the table, and a table inside a form
   breaks the row-click behaviour. #}
<form id="bulk" method="post" class="bulk" hidden
      data-count-label="{{ spec.label }}">
  <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
  <span class="bulk-count" aria-live="polite"></span>
  {% for action in spec.bulk_actions %}
  {% if action.confirm %}
  <details class="confirm confirm--inline">
    <summary class="btn btn--small{% if action.danger %} btn--danger{% endif %}">{{ action.label }}</summary>
    <div class="confirm-body">
      <p class="confirm-text">{{ action.label }}, for every selected record?</p>
      <button class="btn{% if action.danger %} btn--danger{% endif %}"
              type="submit" formaction="{{ action.path }}">{{ action.label }}</button>
    </div>
  </details>
  {% else %}
  <button class="btn btn--small{% if action.danger %} btn--danger{% endif %}"
          type="submit" formaction="{{ action.path }}">{{ action.label }}</button>
  {% endif %}
  {% endfor %}
  {% if spec.renders("delete") %}
  <details class="confirm confirm--inline">
    <summary class="btn btn--small btn--danger">Delete selected</summary>
    <div class="confirm-body">
      <p class="confirm-text">Delete every selected record? This cannot be undone.</p>
      <button class="btn btn--danger" type="submit"
              formaction="{{ page_url }}/bulk-delete">Delete permanently</button>
    </div>
  </details>
  {% endif %}
</form>
<script>
  // The bar exists only while something is selected, and says how much. Nothing
  // else about selection needs script: the checkboxes are real form fields.
  (() => {
    const form = document.getElementById("bulk");
    if (!form) return;
    const label = form.querySelector(".bulk-count");
    const update = () => {
      const chosen = document.querySelectorAll('.row-select input[name="pk"]:checked').length;
      form.hidden = chosen === 0;
      label.textContent = chosen + " selected";
    };
    document.addEventListener("change", (event) => {
      if (event.target.closest(".row-select") || event.target.closest("thead")) update();
    });
    document.addEventListener("admin:selection", update);
    // A swapped-in page of rows arrives unchecked, so the count still holds.
    document.addEventListener("htmx:afterSettle", update);
  })();
</script>