{# @description daisyUI's table: a keyboard-focusable, horizontally scrolling wrapper holding a <table>, named by its caption or an aria-label. #}
{# @prop caption:text | description:"Caption naming the scrolling region for assistive technology. Fill the caption slot instead for markup." #}
{# @prop size:select['xs','sm','md','lg','xl'] | description:"Table size." #}
{# @prop zebra:boolean | description:"Stripe alternating rows." #}
{# @prop pin-rows:boolean | description:"Keep the header row visible while scrolling. Has no effect without a <thead>." #}
{# @prop pin-cols:boolean | description:"Keep the first column visible while scrolling. Has no effect without row header cells." #}
{# @prop content_class:text | description:"Extra classes added to the <table>." #}
{# @prop class:text | description:"Extra classes added to the scrolling wrapper." #}
{# @slot <thead><tr><th scope="col">Service</th><th scope="col">Status</th><th scope="col">Shortcut</th></tr></thead><tbody><tr><th scope="row">Search</th><td><c-status variant="success" size="sm" /> Online</td><td><c-kbd>Ctrl</c-kbd> + <c-kbd>K</c-kbd></td></tr></tbody> — Header and body rows, with header cells given scope; a Status column with a dot beside its text and no label, and a Shortcut column with a key combination. #}
{# @slot:caption — Caption content in place of the attribute, naming the scrolling region for assistive technology. #}
{% comment %}
  Caller duties: a caption or aria-label names the scroll region; pin-rows
  needs a <thead>, pin-cols needs row headers. The wrapper is always a Tab
  stop so keyboard users can scroll it.
{% endcomment %}
{% load daisy_cotton %}
<c-vars caption="" size="" zebra="" pin-rows="" pin-cols="" content_class="" class="" />
{% unique_id "table" as caption_id %}
<div class="overflow-x-auto {{ class }}" tabindex="0" role="region"{% if caption %} aria-labelledby="{{ caption_id }}"{% endif %} {{ attrs }}>
  <table class="table {% variation size "table" "xs,sm,md,lg,xl" %}{% if zebra %} table-zebra{% endif %}{% if pin_rows %} table-pin-rows{% endif %}{% if pin_cols %} table-pin-cols{% endif %} {{ content_class }}">
    {% if caption %}<caption id="{{ caption_id }}">{{ caption }}</caption>{% endif %}
    {{ slot }}
  </table>
</div>