{% load ui_assets ui_classes ui_props %}
{% ui_require_asset "trellis:data-grid" %}

<c-vars fetch_url=""
        total_rows="0"
        row_height="36"
        buffer_size="50"
        overscan="0"
        initial_index="0"
        start_param="start"
        count_param="count"
        total_param="total"
        total_header="X-Trellis-Total-Items"
        assets_header="X-Trellis-Assets"
        meta_selector="template[data-ui-virtualizer-meta]"
        selection="none"
        selection_value='{"mode":"ids","ids":[]}'
        select_on_row_click="False"
        row_key="id"
        sticky_header="True"
        resizable_columns="True"
        reorderable_columns="True"
        sortable_columns="True"
        min_column_width="60"
        default_column_width="180"
        max_column_width=""
        resize_mode="onChange"
        color="neutral"
        interaction="edge"
        drag_preview_position="preserve"
        density="default"
        border="row"
        empty="No rows found."
        header_component=""
        row_component="ui.data-grid.row"
        cell_component="ui.data-grid.cell"
        empty_component="ui.data-grid.empty"
        controls_class=""
        viewport_class=""
        header_class=""
        row_class=""
        cell_class=""
        footer_class=""
        empty_class=""
        class="" />
{% ui_class "ui.data-grid" "root" density=density border=border class=class as root_class %}
{% ui_class "ui.data-grid" "controls" class=controls_class as controls_class_resolved %}
{% ui_class "ui.data-grid" "scrollArea" as scroll_area_class %}
{% ui_class "ui.data-grid" "viewport" class=viewport_class as viewport_class_resolved %}
{% ui_class "ui.data-grid" "inner" as inner_class %}
{% ui_class "ui.data-grid" "header" stickyHeader=sticky_header|ui_bool class=header_class as header_class_resolved %}
{% ui_class "ui.data-grid" "headerRow" as header_row_class %}
{% ui_class "ui.data-grid" "body" as body_class %}
{% ui_class "ui.data-grid" "spacer" as spacer_class %}
{% ui_class "ui.data-grid" "block" as block_class %}
{% ui_class "ui.data-grid" "empty" class=empty_class as empty_class_resolved %}
{% ui_class "ui.data-grid" "footer" class=footer_class as footer_class_resolved %}
<div x-data="UiDataGrid"
     data-ui-data-grid
     data-ui-data-grid-scope="{{ id|default:'ui-data-grid' }}"
     data-fetch-url="{{ fetch_url }}"
     data-total-rows="{{ total_rows }}"
     data-row-height="{{ row_height }}"
     data-buffer-size="{{ buffer_size }}"
     data-overscan="{{ overscan }}"
     data-initial-index="{{ initial_index }}"
     data-start-param="{{ start_param }}"
     data-count-param="{{ count_param }}"
     data-total-param="{{ total_param }}"
     data-total-header="{{ total_header }}"
     data-assets-header="{{ assets_header }}"
     data-meta-selector="{{ meta_selector }}"
     data-selection="{{ selection }}"
     data-selection-value="{{ selection_value|ui_json }}"
     data-select-on-row-click="{{ select_on_row_click }}"
     data-row-key="{{ row_key }}"
     data-sticky-header="{{ sticky_header }}"
     data-resizable-columns="{{ resizable_columns }}"
     data-reorderable-columns="{{ reorderable_columns }}"
     data-sortable-columns="{{ sortable_columns }}"
     data-min-column-width="{{ min_column_width }}"
     data-default-column-width="{{ default_column_width }}"
     {% if max_column_width %}data-max-column-width="{{ max_column_width }}"{% endif %}
     data-resize-mode="{{ resize_mode }}"
     data-ui-selection-color
     data-color="{{ color }}"
     data-interaction="{{ interaction }}"
     data-drag-preview-position="{{ drag_preview_position }}"
     data-density="{{ density }}"
     data-border="{{ border }}"
     class="{{ root_class }}"
     {{ attrs }}>
    <style data-ui-data-grid-layout></style>
    {% if controls|ui_has_content %}<div data-ui-data-grid-controls class="{{ controls_class_resolved }}">{{ controls }}</div>{% endif %}
    <c-ui.scroll-area orientation="both" fill data-ui-data-grid-scroll-area class="{{ scroll_area_class }}" viewport_class="{{ viewport_class_resolved }}">
        <div data-ui-data-grid-inner role="table" aria-rowcount="{{ total_rows|add:1 }}" class="{{ inner_class }}">
            <div data-ui-data-grid-header role="rowgroup" class="{{ header_class_resolved }}">
                <div data-ui-data-grid-header-row
                     x-ui-sortable
                     data-sortable-scope="{{ id|default:'ui-data-grid' }}"
                     data-sortable-id="columns"
                     data-orientation="horizontal"
                     data-feedback="indicator"
                     data-color="{{ color }}"
                     data-interaction="{{ interaction }}"
                     data-preview-position="{{ drag_preview_position }}"
                     data-accepts='["data-grid-column"]'
                     data-disabled="{% if reorderable_columns|ui_bool %}false{% else %}true{% endif %}"
                     role="row"
                     aria-rowindex="1"
                     class="{{ header_row_class }}">
                    {% if header_component %}<c-component is="{{ header_component }}">{{ slot }}</c-component>{% else %}{{ slot }}{% endif %}
                    <span x-ui-sortable:indicator data-ui-data-grid-column-indicator></span>
                </div>
            </div>
            <div data-ui-data-grid-body role="rowgroup" class="{{ body_class }}">
                <div data-ui-data-grid-spacer class="{{ spacer_class }}">
                    <div data-ui-data-grid-block class="{{ block_class }}"></div>
                    <div data-ui-data-grid-block class="{{ block_class }}"></div>
                    <div data-ui-data-grid-block class="{{ block_class }}"></div>
                </div>
            </div>
        </div>
    </c-ui.scroll-area>
    {% ui_slot_content "empty" as empty_slot %}
    <div data-ui-data-grid-empty class="{{ empty_class_resolved }}">
        {% if empty_slot|ui_has_content %}{{ empty_slot }}{% elif empty_component and empty_component != "ui.data-grid.empty" %}<c-component is="{{ empty_component }}">{{ empty }}</c-component>{% else %}{{ empty }}{% endif %}
    </div>
    {% if footer|ui_has_content %}<div data-ui-data-grid-footer class="{{ footer_class_resolved }}">{{ footer }}</div>{% endif %}
</div>