<div x-data="range{{id|capitalize}}({ min: {{ min }}, max: {{ max }} })" class="relative max-w-xl w-full">
    <div class="mt-4">
        <!-- Range inputs -->
        <input
            type="range"
            aria-label="Min {{id}} value"
            step="{{step|default(10)}}"
            :min="min"
            :max="max"
            @input="mintrigger"
            x-model="minval"
            data-filter-type="{{id}}_min" 
            @change="updateFilters($event)"
            class="absolute pointer-events-none appearance-none z-20 h-2 w-full opacity-0 cursor-pointer"
        >

        <input
            type="range"
            aria-label="Max {{id}} value"
            step="{{step|default(10)}}"
            :min="min"
            :max="max"
            @input="maxtrigger"
            x-model="maxval"
            data-filter-type="{{id}}_max" 
            @change="updateFilters($event)"
            class="absolute pointer-events-none appearance-none z-20 h-2 w-full opacity-0 cursor-pointer"
        >

        <!-- Track -->
        <div class="relative z-10 h-1">
            <div class="absolute inset-0 rounded-md bg-slate-200"></div>
            <div
                class="absolute top-0 bottom-0 rounded-md bg-primary-dark z-20"
                :style="`left: ${minthumb}%; right: ${maxthumb}%`"
            ></div>
            <div
                class="absolute z-30 w-4 h-4 top-1/2 -translate-y-1/2 bg-primary-dark rounded-full"
                :style="`left: ${minthumb}%`"
            ></div>
            <div
                class="absolute z-30 w-4 h-4 top-1/2 -translate-y-1/2 bg-primary-dark rounded-full"
                :style="`right: ${maxthumb}%`"
            ></div>
        </div>
    </div>

    <!-- Value display -->
    <div class="flex items-center pt-5 text-base lg:text-sm">
        {% if id == 'storage' %}
        Da <strong class="ml-1"><span x-text="formatStorageLabel(minval, '{{ unit|e('js') }}')"></span></strong>
        <span class="mx-1">a</span>
        <strong><span x-text="formatStorageLabel(maxval, '{{ unit|e('js') }}')"></span></strong>
        {% elseif useFloat %}
        Da <strong class="ml-1"><span x-text="parseFloat(minval).toFixed(1)"></span>{{unit|raw}}</strong>
        <span class="mx-1">a</span>
        <strong><span x-text="parseFloat(maxval).toFixed(1)"></span>{{unit|raw}}</strong>
        {% else %}
        Da <strong class="ml-1"><span x-text="minval"></span>{{unit|raw}}</strong>
        <span class="mx-1">a</span>
        <strong><span x-text="maxval"></span>{{unit|raw}}</strong>
        {% endif %}
    </div>
</div>

<script>
    if (typeof window !== 'undefined' && typeof window.formatStorageLabel !== 'function') {
        window.formatStorageLabel = function formatStorageLabel(value, unit = 'GB') {
            const numericValue = typeof value === 'number' ? value : parseFloat(value);
            if (!Number.isFinite(numericValue)) {
                return `${value}${unit}`;
            }

            const normalizedValue = Number.isInteger(numericValue)
                ? numericValue.toString()
                : numericValue.toFixed(1).replace(/\.0$/, '');

            if (numericValue >= 1000) {
                const tbValue = numericValue / 1024;
                const formattedTb = Number.isInteger(tbValue)
                    ? tbValue.toString()
                    : tbValue.toFixed(1).replace(/\.0$/, '');
                return `${formattedTb}tb`;
            }

            return `${normalizedValue}${unit}`;
        };
    }

    function range{{id|capitalize}}({ min, max }) {
        {% if useFloat %}
        min = parseFloat(min);
        max = parseFloat(max);
        {% else %}
        min = parseInt(min);
        max = parseInt(max);
        {% endif %}
        return {
            min,
            max,
            minval: min,
            maxval: max,
            get minthumb() {
                return ((this.minval - this.min) / (this.max - this.min)) * 100;
            },
            get maxthumb() {
                return 100 - ((this.maxval - this.min) / (this.max - this.min)) * 100;
            },
            mintrigger(e) {
                {% if useFloat %}
                this.minval = Math.min(parseFloat(e.target.value), this.maxval - {{step|default(10)}});
                {% else %}
                this.minval = Math.min(parseInt(e.target.value), this.maxval - {{step|default(10)}});
                {% endif %}
            },
            maxtrigger(e) {
                {% if useFloat %}
                this.maxval = Math.max(parseFloat(e.target.value), this.minval + {{step|default(10)}});
                {% else %}
                this.maxval = Math.max(parseInt(e.target.value), this.minval + {{step|default(10)}});
                {% endif %}
            }
        }
    }
</script>
    