{# @description Scrollable region around a django-tables2 table, with its heading and footer rows pinned. #}
{# @prop table:text | description:"The django-tables2 Table instance to render." #}
{# @prop class:text | description:"Extra classes on the scroll region." #}
{# @prop label:text | description:"Accessible name for the region. Give it a distinct value on any page with more than one table." #}
{# @prop role:text | default:"region" | description:"ARIA role on the scroll region." #}
{% load i18n %}
{% load render_table from django_tables2 %}
{% comment %}
  role/tabindex/aria-label are variables, not written into the tag: anything
  hardcoded here would be emitted before {{ attrs }}, and HTML keeps the
  *first* of a repeated attribute, so a caller's own label would be ignored.
{% endcomment %}
<c-vars table class label role="region" />
<div class="overflow-auto table-pin-rows {{ class }}"
     style="scrollbar-gutter: stable"
     tabindex="0"
     role="{{ role }}"
     aria-label="{{ label|default:_('Scrollable table') }}"
     {{ attrs }}>{% render_table table %}</div>