{% load ui_classes ui_props %}
<c-vars key="" label="" width="180" min_width="60" max_width="" hidden="False" pinned="" sortable="False" sort="none" resizable="True" reorderable="True" align="start" class="" header_class="" label_class="" resize_handle_class="" />
{% ui_class "ui.data-grid" "columnHeader" class=class|add:" "|add:header_class as header_class_resolved %}
{% ui_class "ui.data-grid" "columnLabel" class=label_class as label_class_resolved %}
{% ui_class "ui.data-grid" "columnPreview" as column_preview_class %}
{% ui_class "ui.data-grid" "columnPreviewLabel" as column_preview_label_class %}
{% ui_class "ui.data-grid" "sortButton" as sort_button_class %}
{% ui_class "ui.data-grid" "resizeHandle" class=resize_handle_class as resize_handle_class_resolved %}
<div x-ui-sortable:item
     data-sortable-id="{{ key }}"
     data-sortable-type="data-grid-column"
     data-label="{{ label|default:key }}"
     data-disabled="{% if reorderable|ui_bool %}false{% else %}true{% endif %}"
     data-ui-data-grid-column
     data-ui-data-grid-column-header
     data-column="{{ key }}"
     data-label="{{ label }}"
     data-width="{{ width }}"
     data-min-width="{{ min_width }}"
     {% if max_width %}data-max-width="{{ max_width }}"{% endif %}
     {% if hidden|ui_bool %}data-hidden{% endif %}
     {% if hidden|ui_bool %}hidden{% endif %}
     {% if pinned %}data-pinned="{{ pinned }}"{% endif %}
     data-sortable="{{ sortable }}"
     data-resizable="{{ resizable }}"
     data-reorderable="{{ reorderable }}"
     data-align="{{ align }}"
     data-sort="{{ sort }}"
     role="columnheader"
     {% if sortable|ui_bool %}aria-sort="{{ sort }}"{% endif %}
     class="{{ header_class_resolved }}"
     {{ attrs }}>
    {% if sortable|ui_bool %}
        <button type="button" x-ui-sortable:handle data-ui-data-grid-sort-button class="{{ sort_button_class }}">
            <span data-ui-data-grid-column-label class="{{ label_class_resolved }}">{{ slot|default:label }}</span>
            <span aria-hidden="true">{% if sort == "ascending" %}↑{% elif sort == "descending" %}↓{% endif %}</span>
        </button>
    {% else %}
        <span x-ui-sortable:handle data-ui-data-grid-column-label class="{{ label_class_resolved }}">{{ slot|default:label }}</span>
    {% endif %}
    {% if resizable|ui_bool %}<span data-ui-data-grid-resize-handle data-ui-resize-handle role="separator" tabindex="0" aria-orientation="vertical" aria-label="Resize {{ label|default:key }} column" class="{{ resize_handle_class_resolved }}"></span>{% endif %}
    <template x-ui-sortable:preview>
        <span data-ui-data-grid-column-preview data-ui-surface="+1" data-ui-elevation="2" class="{{ column_preview_class }}">
            <span data-ui-data-grid-column-preview-label class="{{ column_preview_label_class }}">{{ label|default:key }}</span>
        </span>
    </template>
</div>