{% load ui_classes ui_props %}

<c-vars align="start"
        valign="middle"
        key=""
        target=""
        width=""
        resizable="False"
        min_width="4rem"
        max_width=""
        sortable="False"
        sort="none"
        abbr=""
        scope="col"
        class=""
        content_class=""
        resize_handle_class="" />
{% ui_class "ui.table" "column" align=align valign=valign class=class as column_class %}
{% ui_class "ui.table" "columnContent" align=align class=content_class as content_class_resolved %}
{% ui_class "ui.table" "resizeHandle" class=resize_handle_class as resize_handle_class_resolved %}
<th data-ui-table-column
    {% if key %}data-column-key="{{ key }}"{% endif %}
    {% if target %}data-target="{{ target }}"{% endif %}
    {% if resizable|ui_bool %}x-ui-resizable data-ui-resizable data-resize-axis="x" data-resize-min="{{ min_width }}"{% if max_width %} data-resize-max="{{ max_width }}"{% endif %}
    {% endif %}
    {% if sortable|ui_bool %}data-sortable{% endif %}
    data-align="{{ align }}"
    data-valign="{{ valign }}"
    data-sort="{{ sort }}"
    scope="{{ scope }}"
    {% if sort != "none" %}aria-sort="{{ sort }}"{% endif %}
    {% if abbr %}abbr="{{ abbr }}"{% endif %}
    {% if width %}style="width: {{ width }};"{% endif %}
    class="{{ column_class }}"
    {{ attrs }}>
    <div data-ui-table-column-content class="{{ content_class_resolved }}">
        {{ slot }}
        {% if sortable|ui_bool %}
            <span data-ui-table-sort-indicator aria-hidden="true" class="sr-only">{{ sort }}</span>
        {% endif %}
    </div>
    {% if resizable|ui_bool %}
        <span x-ui-resizable:handle
              data-ui-table-column-resize-handle
              data-ui-resize-handle
              role="separator"
              tabindex="0"
              aria-orientation="vertical"
              aria-valuemin="0"
              aria-valuenow="0"
              aria-label="Resize column"
              class="{{ resize_handle_class_resolved }}"></span>
    {% endif %}
</th>