{# @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 %}
  The scroll handler names the edges that have cells under them, and the
  stylesheet gives only those a shadow, as the app header has one when stuck.
{% endcomment %}
{% 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="mvp-table-region overflow-auto table-pin-rows bg-base-100 {{ class }}"
     tabindex="0"
     role="{{ role }}"
     aria-label="{{ label|default:_('Scrollable table') }}"
     x-data="{ top: false, side: false }"
     @scroll.passive="top = $el.scrollTop > 0; side = $el.scrollLeft !== 0"
     :class="{ 'mvp-table-over-top': top, 'mvp-table-over-side': side }"
     {{ attrs }}>{% render_table table %}</div>