{% load static %}
{% spaceless %}
<div class="tableaux sticky{% if not view.sticky_bottom_toolbar %} tbx-scroll{% endif %}" data-controller="tableaux" data-prefix="{{ table.prefix }}" id="{{ table.prefix }}tableaux"
     data-url="{{ url }}" hx-get="{{ url }}" hx-trigger="tableauxResize from:body"
     hx-include="#{{ table.prefix }}filter_form, #{{ table.prefix }}modal_filter_form"
     hx-swap="outerHTML">
  {{ breakpoints|json_script:"breakpoints" }}
  {{ breakpoint_values|json_script:"breakpoint-values" }}
  <form id="{{ table.prefix }}filter_form" class="filter-form" hx-get="{{ url }}"
      {% if not view.filter_button %} hx-trigger="change from:#{{ table.prefix }}filter_form"{% endif %}
      {% if table.indicator %} hx-indicator="#{{ table.prefix }}tableaux_overlay"{% endif %}>
    <input type="hidden" name="prefix" value="{{ table.prefix }}">
    <input type="hidden" name="~page" value="{{ page }}">
    <input type="hidden" name="~per_page" value="{{ per_page }}">
    <input type="hidden" name="~order_by" value="{{ order_by }}">
    <input type="hidden" name="~filter_data" value="{{ filter_data }}">
    <input type="hidden" name="bp" value="{{ bp }}">
    {% include templates.toolbar_filter %}
    {% include templates.tb_filter_pills %}
  </form>
  {% if toolbar_visible %}
    <div id="{{ table.prefix }}toolbar_main">{% include templates.toolbar_main %}</div>
  {% endif %}
  {% include templates.tableaux_page_wrapper %}
</div>
<div class="tableaux-overlay htmx-indicator" id="{{ table.prefix }}tableaux_overlay" hx-swap-oob="true">
  <img alt="loading" src="{% static "django_tableaux/svg/grid.svg" %}">
</div>
{% endspaceless %}