{% load ui_assets ui_classes ui_props %}
{% ui_require_asset "trellis:virtualizer" %}

<c-vars fetch_url=""
        total_items="0"
        item_size="36"
        buffer_size="50"
        overscan="0"
        axis="vertical"
        initial_index="0"
        start_param="start"
        count_param="count"
        total_param="total"
        window_param="window"
        total_header="X-Trellis-Total-Items"
        assets_header="X-Trellis-Assets"
        meta_selector="template[data-ui-virtualizer-meta]"
        scroll_area="True"
        fill="True"
        scroll_area_class=""
        viewport_class=""
        spacer_class=""
        block_class=""
        class="" />
{% ui_class "ui.virtualizer" "root" fill=fill class=class as root_class %}
{% ui_class "ui.virtualizer" "spacer" class=spacer_class as spacer_class_resolved %}
{% ui_class "ui.virtualizer" "block" class=block_class as block_class_resolved %}
<div x-data="UiVirtualizer"
     data-ui-virtualizer
     data-fetch-url="{{ fetch_url }}"
     data-total-items="{{ total_items }}"
     data-item-size="{{ item_size }}"
     data-buffer-size="{{ buffer_size }}"
     data-overscan="{{ overscan }}"
     data-axis="{{ axis }}"
     data-initial-index="{{ initial_index }}"
     data-start-param="{{ start_param }}"
     data-count-param="{{ count_param }}"
     data-total-param="{{ total_param }}"
     data-window-param="{{ window_param }}"
     data-total-header="{{ total_header }}"
     data-assets-header="{{ assets_header }}"
     data-meta-selector="{{ meta_selector }}"
     data-scroll-area="{{ scroll_area }}"
     data-fill="{{ fill }}"
     data-scroll-area-class="{{ scroll_area_class }}"
     data-viewport-class="{{ viewport_class }}"
     data-spacer-class="{{ spacer_class }}"
     data-block-class="{{ block_class }}"
     data-class="{{ class }}"
     class="{{ root_class }}{% if not scroll_area|ui_bool %} {{ viewport_class }} overflow-y-auto{% endif %}"
     {% if not scroll_area|ui_bool %}tabindex="0"{% endif %}
     {{ attrs }}>
    {% if scroll_area|ui_bool %}
        <c-ui.scroll-area orientation="vertical"
                          fill="{{ fill }}"
                          class="{{ scroll_area_class }}"
                          viewport_class="{{ viewport_class }}">
            <div data-ui-virtualizer-spacer class="{{ spacer_class_resolved }}">
                <div data-ui-virtualizer-block class="{{ block_class_resolved }}">{{ slot }}</div>
                <div data-ui-virtualizer-block class="{{ block_class_resolved }}"></div>
                <div data-ui-virtualizer-block class="{{ block_class_resolved }}"></div>
            </div>
        </c-ui.scroll-area>
    {% else %}
        <div data-ui-virtualizer-spacer class="{{ spacer_class_resolved }}">
            <div data-ui-virtualizer-block class="{{ block_class_resolved }}">{{ slot }}</div>
            <div data-ui-virtualizer-block class="{{ block_class_resolved }}"></div>
            <div data-ui-virtualizer-block class="{{ block_class_resolved }}"></div>
        </div>
    {% endif %}
</div>