{% load i18n %}

<div class="slider-wrapper relative" data-insight-range-slider data-legend-mode="{{ slider_config.legend_mode|default:'static' }}">
    {% if slider_config.dual %}
        {# Dual-range mode with two thumbs #}
        <div role="group" aria-labelledby="{{ slider_config.tag_id }}_label" class="slider-dual-group">
            <span id="{{ slider_config.tag_id }}_label" class="flex gap-1 font-bold text-sm text-insight-headline">{{ slider_config.label }}</span>
            <div class="slider-dual-container relative mt-1 h-6">
                {# Background track #}
                <div class="-translate-y-1/2 absolute top-1/2 w-full h-2 bg-insight-raised rounded-insight-full" aria-hidden="true"></div>
                {# Highlighted range track #}
                <div class="slider-track -translate-y-1/2 absolute top-1/2 h-2 bg-insight-primary rounded-insight-full pointer-events-none" aria-hidden="true"></div>
                {# Min thumb input #}
                <input
                    type="range"
                    id="{{ slider_config.tag_id }}_min"
                    name="{{ slider_config.name }}_min"
                    value="{{ slider_config.value_min|default:slider_config.minimum }}"
                    min="{{ slider_config.minimum }}"
                    max="{{ slider_config.maximum }}"
                    step="{{ slider_config.step_size|default:1 }}"
                    {% if slider_config.disabled %}disabled aria-disabled="true"{% endif %}
                    aria-label="{% blocktranslate with label=slider_config.label %}{{ label }} - Minimum{% endblocktranslate %}"
                    aria-valuemin="{{ slider_config.minimum }}"
                    aria-valuemax="{{ slider_config.maximum }}"
                    aria-valuenow="{{ slider_config.value_min|default:slider_config.minimum }}"
                    class="slider-input-min appearance-none [&::-webkit-slider-thumb]:pointer-events-auto [&::-moz-range-thumb]:pointer-events-auto [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-6 [&::-webkit-slider-thumb]:h-6 [&::-webkit-slider-thumb]:bg-insight-base [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-insight-primary [&::-webkit-slider-thumb]:rounded-insight-full [&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:-mt-2 [&::-moz-range-thumb]:w-6 [&::-moz-range-thumb]:h-6 [&::-moz-range-thumb]:bg-insight-base [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-insight-primary [&::-moz-range-thumb]:rounded-insight-full [&::-moz-range-thumb]:cursor-pointer [&:focus-visible::-webkit-slider-thumb]:ring-2 [&:focus-visible::-webkit-slider-thumb]:ring-insight-focus [&:focus-visible::-webkit-slider-thumb]:ring-offset-2 [&:focus-visible::-moz-range-thumb]:ring-2 [&:focus-visible::-moz-range-thumb]:ring-insight-focus [&:focus-visible::-moz-range-thumb]:ring-offset-2 absolute inset-0 w-full h-full bg-transparent cursor-pointer pointer-events-none focus-visible:outline-none"
                >
                {# Max thumb input #}
                <input
                    type="range"
                    id="{{ slider_config.tag_id }}_max"
                    name="{{ slider_config.name }}_max"
                    value="{{ slider_config.value_max|default:slider_config.maximum }}"
                    min="{{ slider_config.minimum }}"
                    max="{{ slider_config.maximum }}"
                    step="{{ slider_config.step_size|default:1 }}"
                    {% if slider_config.disabled %}disabled aria-disabled="true"{% endif %}
                    aria-label="{% blocktranslate with label=slider_config.label %}{{ label }} - Maximum{% endblocktranslate %}"
                    aria-valuemin="{{ slider_config.minimum }}"
                    aria-valuemax="{{ slider_config.maximum }}"
                    aria-valuenow="{{ slider_config.value_max|default:slider_config.maximum }}"
                    class="slider-input-max appearance-none [&::-webkit-slider-thumb]:pointer-events-auto [&::-moz-range-thumb]:pointer-events-auto [&::-webkit-slider-thumb]:w-6 [&::-webkit-slider-thumb]:h-6 [&::-webkit-slider-thumb]:bg-insight-base [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-insight-primary [&::-webkit-slider-thumb]:rounded-insight-full [&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:-mt-2 [&::-moz-range-thumb]:w-6 [&::-moz-range-thumb]:h-6 [&::-moz-range-thumb]:bg-insight-base [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-insight-primary [&::-moz-range-thumb]:rounded-insight-full [&::-moz-range-thumb]:cursor-pointer [&:focus-visible::-webkit-slider-thumb]:ring-2 [&:focus-visible::-webkit-slider-thumb]:ring-insight-focus [&:focus-visible::-webkit-slider-thumb]:ring-offset-2 [&:focus-visible::-moz-range-thumb]:ring-2 [&:focus-visible::-moz-range-thumb]:ring-insight-focus [&:focus-visible::-moz-range-thumb]:ring-offset-2 absolute inset-0 w-full h-full bg-transparent cursor-pointer pointer-events-none focus-visible:outline-none"
                >
            </div>
        </div>
    {% else %}
        {# Single-range mode #}
        <label class="flex gap-1 font-bold text-sm text-insight-headline" for="{{ slider_config.tag_id }}">{{ slider_config.label }}</label>
        <input
            type="range"
            id="{{ slider_config.tag_id }}"
            name="{{ slider_config.name }}"
            value="{{ slider_config.value }}"
            min="{{ slider_config.minimum }}"
            max="{{ slider_config.maximum }}"
            step="{{ slider_config.step_size|default:1 }}"
            {% if slider_config.disabled %}disabled aria-disabled="true"{% endif %}
            aria-valuemin="{{ slider_config.minimum }}"
            aria-valuemax="{{ slider_config.maximum }}"
            aria-valuenow="{{ slider_config.value }}"
            class="range-custom accent-insight-primary appearance-none w-full h-6 bg-transparent cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-insight-primary focus-visible:ring-offset-2"
        >
    {% endif %}
    {% if slider_config.items %}
        <div class="slider-legend flex justify-between mt-1 w-full text-sm text-insight-body" aria-hidden="true">
            {% for item in slider_config.items %}
                <span class="slider-legend-item text-center" data-index="{{ forloop.counter0 }}">{{ item }}</span>
            {% endfor %}
        </div>
    {% endif %}
</div>