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

<c-vars name=""
        value=""
        default_value="0"
        min="0"
        max="100"
        step="1"
        steps=""
        big_step="10"
        min_steps_between="0"
        range="False"
        orientation="horizontal"
        size="md"
        variant="default"
        disabled="False"
        required="False"
        invalid="False"
        label=""
        value_text=""
        lower_label="Minimum"
        upper_label="Maximum"
        lower_value_text=""
        upper_value_text=""
        show_value="False"
        format="number"
        root_class=""
        track_class=""
        range_class=""
        thumb_class=""
        tick_class=""
        class="" />
{% ui_class "ui.slider" "slider" size=size class=class as slider_class %}
{% ui_class "ui.slider" "root" orientation=orientation size=size variant=variant class=root_class as root_class_resolved %}
{% ui_class "ui.slider" "track" orientation=orientation size=size class=track_class as track_class_resolved %}
{% ui_class "ui.slider" "range" orientation=orientation size=size class=range_class as range_class_resolved %}
{% ui_class "ui.slider" "input" as input_class %}
{% ui_class "ui.slider" "thumb" orientation=orientation size=size class=thumb_class as thumb_class_resolved %}
{% ui_class "ui.slider" "value" as value_class %}
{% ui_class "ui.slider" "valueButton" as value_button_class %}
{% ui_class "ui.slider" "valueInput" as value_input_class %}
{% ui_class "ui.slider" "ticks" orientation=orientation class=tick_class as ticks_class %}
{% with raw_value=value|default:default_value %}
    <div x-data="UiSlider"
         data-ui-slider
         data-ui-selection-root
         data-orientation="{{ orientation }}"
         data-size="{{ size }}"
         data-variant="{{ variant }}"
         {% if name %}data-name="{{ name }}"{% endif %}
         data-value="{{ raw_value }}"
         {% if default_value %}data-default-value="{{ default_value }}"{% endif %}
         data-min="{{ min }}"
         data-max="{{ max }}"
         data-step="{{ step }}"
         {% if steps != "" and steps != None %}data-steps="{{ steps|ui_json }}"{% endif %}
         data-big-step="{{ big_step }}"
         data-min-steps-between="{{ min_steps_between }}"
         {% if range|ui_bool %}data-range{% endif %}
         {% if disabled|ui_bool %}data-disabled{% endif %}
         {% if required|ui_bool %}data-required{% endif %}
         {% if invalid|ui_bool %}data-invalid{% endif %}
         {% if label %}data-label="{{ label }}"{% endif %}
         {% if value_text %}data-value-text="{{ value_text }}"{% endif %}
         data-lower-label="{{ lower_label }}"
         data-upper-label="{{ upper_label }}"
         {% if lower_value_text %}data-lower-value-text="{{ lower_value_text }}"{% endif %}
         {% if upper_value_text %}data-upper-value-text="{{ upper_value_text }}"{% endif %}
         {% if show_value|ui_bool %}data-show-value{% endif %}
         data-format="{{ format }}"
         class="{{ slider_class }}">
        <div data-ui-slider-root
             data-orientation="{{ orientation }}"
             {% if range|ui_bool %}data-range{% endif %}
             {% if disabled|ui_bool %}data-disabled{% endif %}
             {% if required|ui_bool %}data-required{% endif %}
             {% if invalid|ui_bool %}data-invalid{% endif %}
             class="{{ root_class_resolved }}">
            <span data-ui-slider-track
                  data-ui-selection-recipe="slider-track"
                  data-orientation="{{ orientation }}"
                  {% if disabled|ui_bool %}data-disabled{% endif %}
                  {% if invalid|ui_bool %}data-invalid{% endif %}
                  class="{{ track_class_resolved }}">
                <span data-ui-slider-range
                      data-ui-selection-recipe="slider-range"
                      data-orientation="{{ orientation }}"
                      {% if disabled|ui_bool %}data-disabled{% endif %}
                      {% if invalid|ui_bool %}data-invalid{% endif %}
                      class="{{ range_class_resolved }}"></span>
            </span>
            {% if range|ui_bool %}
                <input type="range"
                       data-ui-slider-input
                       data-thumb="lower"
                       class="{{ input_class }}"
                       min="{{ min }}"
                       max="{{ max }}"
                       step="{{ step }}"
                       value="{{ raw_value|ui_value_part:'0'|default:min }}"
                       aria-label="{{ lower_label }}"
                       {% if lower_value_text %}aria-valuetext="{{ lower_value_text }}"{% endif %}
                       {% if disabled|ui_bool %}disabled{% endif %}
                       {% if invalid|ui_bool %}aria-invalid="true"{% endif %}
                       {{ attrs }}>
                <input type="range"
                       data-ui-slider-input
                       data-thumb="upper"
                       class="{{ input_class }}"
                       min="{{ min }}"
                       max="{{ max }}"
                       step="{{ step }}"
                       value="{{ raw_value|ui_value_part:'1'|default:max }}"
                       aria-label="{{ upper_label }}"
                       {% if upper_value_text %}aria-valuetext="{{ upper_value_text }}"{% endif %}
                       {% if disabled|ui_bool %}disabled{% endif %}
                       {% if invalid|ui_bool %}aria-invalid="true"{% endif %}>
                <span data-ui-slider-thumb
                      data-ui-selection-recipe="slider-thumb"
                      data-ui-surface="+2"
                      data-ui-elevation="1"
                      data-thumb="lower"
                      data-orientation="{{ orientation }}"
                      {% if disabled|ui_bool %}data-disabled{% endif %}
                      {% if invalid|ui_bool %}data-invalid{% endif %}
                      class="{{ thumb_class_resolved }}"></span>
                <span data-ui-slider-thumb
                      data-ui-selection-recipe="slider-thumb"
                      data-ui-surface="+2"
                      data-ui-elevation="1"
                      data-thumb="upper"
                      data-orientation="{{ orientation }}"
                      {% if disabled|ui_bool %}data-disabled{% endif %}
                      {% if invalid|ui_bool %}data-invalid{% endif %}
                      class="{{ thumb_class_resolved }}"></span>
            {% else %}
                <input type="range"
                       data-ui-slider-input
                       data-thumb="single"
                       class="{{ input_class }}"
                       min="{{ min }}"
                       max="{{ max }}"
                       step="{{ step }}"
                       value="{{ raw_value|ui_value_part:'0'|default:min }}"
                       {% if name %}name="{{ name }}"{% endif %}
                       {% if label %}aria-label="{{ label }}"{% endif %}
                       {% if value_text %}aria-valuetext="{{ value_text }}"{% endif %}
                       {% if disabled|ui_bool %}disabled{% endif %}
                       {% if required|ui_bool %}required{% endif %}
                       {% if invalid|ui_bool %}aria-invalid="true"{% endif %}
                       {{ attrs }}>
                <span data-ui-slider-thumb
                      data-ui-selection-recipe="slider-thumb"
                      data-ui-surface="+2"
                      data-ui-elevation="1"
                      data-thumb="single"
                      data-orientation="{{ orientation }}"
                      {% if disabled|ui_bool %}data-disabled{% endif %}
                      {% if invalid|ui_bool %}data-invalid{% endif %}
                      class="{{ thumb_class_resolved }}"></span>
            {% endif %}
        </div>
        {% if show_value|ui_bool %}
            <div data-ui-slider-value class="{{ value_class }}">
                {% if range|ui_bool %}
                    {% include "cotton/ui/slider/_value.html" with thumb="lower" value=raw_value|ui_value_part:'0' label=lower_label %}
                    <span aria-hidden="true">–</span>
                    {% include "cotton/ui/slider/_value.html" with thumb="upper" value=raw_value|ui_value_part:'1' label=upper_label %}
                {% else %}
                    {% include "cotton/ui/slider/_value.html" with thumb="single" value=raw_value label=label|default:'Value' %}
                {% endif %}
            </div>
        {% endif %}
        {% if slot %}
            <div data-ui-slider-ticks
                 data-orientation="{{ orientation }}"
                 class="{{ ticks_class }}">{{ slot }}</div>
        {% endif %}
        <span data-ui-slider-hidden-inputs hidden></span>
    </div>
{% endwith %}