{% load ui_classes ui_props %}

<c-vars orientation="vertical"
        type="hover"
        size="sm"
        fill="False"
        hide_native="True"
        disabled="False"
        viewport_class=""
        scrollbar_class=""
        thumb_class=""
        corner_class=""
        class="" />
{% ui_class "ui.scroll-area" "root" fill=fill size=size class=class as root_class %}
{% ui_class "ui.scroll-area" "viewport" orientation=orientation fill=fill class=viewport_class as viewport_class_resolved %}
{% ui_class "ui.scroll-area" "content" orientation=orientation as content_class %}
{% ui_class "ui.scroll-area" "scrollbar" orientation="vertical" class=scrollbar_class as vertical_scrollbar_class %}
{% ui_class "ui.scroll-area" "scrollbar" orientation="horizontal" class=scrollbar_class as horizontal_scrollbar_class %}
{% ui_class "ui.scroll-area" "thumb" orientation="vertical" class=thumb_class as vertical_thumb_class %}
{% ui_class "ui.scroll-area" "thumb" orientation="horizontal" class=thumb_class as horizontal_thumb_class %}
{% ui_class "ui.scroll-area" "corner" class=corner_class as corner_class_resolved %}
<div x-data="UiScrollArea"
     x-bind="root"
     data-ui-scroll-area
     data-orientation="{{ orientation }}"
     data-type="{{ type }}"
     data-size="{{ size }}"
     {% if fill|ui_bool %}data-fill{% endif %}
     {% if hide_native|ui_bool %}data-hide-native{% endif %}
     {% if disabled|ui_bool %}data-disabled{% endif %}
     data-viewport-class="{{ viewport_class }}"
     data-scrollbar-class="{{ scrollbar_class }}"
     data-thumb-class="{{ thumb_class }}"
     data-corner-class="{{ corner_class }}"
     data-class="{{ class }}"
     class="{{ root_class }}"
     {{ attrs }}>
    <div data-ui-scroll-area-viewport
         data-orientation="{{ orientation }}"
         {% if hide_native|ui_bool %}data-hide-native{% endif %}
         data-class="{{ viewport_class }}"
         tabindex="0"
         class="{{ viewport_class_resolved }}">
        <div data-ui-scroll-area-content class="{{ content_class }}">{{ slot }}</div>
    </div>
    {% if orientation == "vertical" or orientation == "both" %}
        <div data-ui-scroll-area-scrollbar
             data-orientation="vertical"
             data-class="{{ scrollbar_class }}"
             aria-hidden="true"
             class="{{ vertical_scrollbar_class }}">
            <div data-ui-scroll-area-thumb
                 data-orientation="vertical"
                 data-class="{{ thumb_class }}"
                 aria-hidden="true"
                 class="{{ vertical_thumb_class }}"></div>
        </div>
    {% endif %}
    {% if orientation == "horizontal" or orientation == "both" %}
        <div data-ui-scroll-area-scrollbar
             data-orientation="horizontal"
             data-class="{{ scrollbar_class }}"
             aria-hidden="true"
             class="{{ horizontal_scrollbar_class }}">
            <div data-ui-scroll-area-thumb
                 data-orientation="horizontal"
                 data-class="{{ thumb_class }}"
                 aria-hidden="true"
                 class="{{ horizontal_thumb_class }}"></div>
        </div>
    {% endif %}
    {% if orientation == "both" %}
        <div data-ui-scroll-area-corner
             data-class="{{ corner_class }}"
             aria-hidden="true"
             class="{{ corner_class_resolved }}"></div>
    {% endif %}
</div>