{% load ui_classes ui_props %}

<c-vars layout="auto"
        density="default"
        variant="ghost"
        border="row"
        zebra="False"
        hover="True"
        sticky_header="False"
        nowrap="True"
        width="full"
        class=""
        table_class="" />
{% ui_class "ui.table" "root" width=width class=class as root_class %}
{% ui_class "ui.table" "scroll" as scroll_class %}
{% ui_class "ui.table" "table" layout=layout density=density variant=variant border=border zebra=zebra|ui_bool hover=hover|ui_bool stickyHeader=sticky_header|ui_bool nowrap=nowrap|ui_bool width=width class=table_class as table_class_resolved %}
<div data-ui-table-root data-width="{{ width }}" class="{{ root_class }}">
    <div data-ui-table-scroll class="{{ scroll_class }}">
        <table data-ui-table
               data-layout="{{ layout }}"
               data-density="{{ density }}"
               data-variant="{{ variant }}"
               data-border="{{ border }}"
               data-width="{{ width }}"
               {% if zebra|ui_bool %}data-zebra{% endif %}
               {% if hover|ui_bool %}data-hover{% endif %}
               {% if sticky_header|ui_bool %}data-sticky-header{% endif %}
               {% if nowrap|ui_bool %}data-nowrap{% endif %}
               class="{{ table_class_resolved }}"
               {{ attrs }}>
            {{ slot }}
        </table>
    </div>
</div>