{namespace filter=Newland\NeosFiltering\ViewHelpers}

<strong>{title}</strong>

<ul class="list-reset">
    <li>
        <div class="mb-2 flex justify-between items-center whitespace-no-wrap">
            <div class="mr-4 flex-none">
                <h4 class="mt-0 text-sm text-grey-dark">{title}</h4>
            </div>
            <div class="flex-none">
                    <span class="text-grey-dark">
                        <span id="{id}__output-min">{min * factor}</span>
                        -
                        <span id="{id}__output-max">{max * factor}</span>
                    {unit}
                    </span>
            </div>
        </div>
        <div class="mt-2 mx-2">
            <div
                    data-toubiz-range-slider
                    data-toubiz-range-slider-input.min="#{id}__min"
                    data-toubiz-range-slider-input.max="#{id}__max"
                    data-toubiz-range-slider-outputs.min="#{id}__output-min"
                    data-toubiz-range-slider-outputs.max="#{id}__output-max"
                    data-toubiz-range-slider-factor="{factor}"
                    data-toubiz-range-slider-step="{step}">

            </div>
        </div>
        <div class="hidden">
            <input
                    type="number"
                    name="{queryString}[min]"
                    id="{id}__min"
                    placeholder="{min}"
                    data-id="{id}"
                    min="{min}"
                    max="{max}"
                    step="{step}"
                    {filter:ifNull(value: state.min, else: 'value="{state.min}"')}
            />
            <input
                    type="number"
                    name="{queryString}[max]"
                    id="{id}__max"
                    placeholder="{max}"
                    data-id="{id}"
                    min="{min}"
                    max="{max}"
                    step="{step}"
                    {filter:ifNull(value: state.max, else: 'value="{state.max}"')}
            />
        </div>
    </li>
</ul>