{namespace filter=Newland\NeosFiltering\ViewHelpers}

<div class="tb-results-filter__list-item-content">
    <h2 class="tb-results-filter__heading">{title} ({unit})</h2>

    <div
        id="range-{id}"
        data-toubiz-range-slider
        data-toubiz-range-slider-bounds.min="(double) {min}"
        data-toubiz-range-slider-bounds.max="(double) {max}"
        data-toubiz-range-slider-user-field.min="#{id}__user-min"
        data-toubiz-range-slider-user-field.max="#{id}__user-max"
        data-toubiz-range-slider-data-field.min="#{id}__data-min"
        data-toubiz-range-slider-data-field.max="#{id}__data-max"
        data-toubiz-range-slider-factor="(double) {factor}"
        data-toubiz-range-slider-step="(int) 1"
        data-toubiz-range-slider-change-event="results-list-filter.change">

    </div>

    <div class="tb-range__fields">
        <div>
            <label class="visually-hidden" for="value-min-{count}">
                Minimum
            </label>
            <input
                id="{id}__user-min"
                type="number"
                min="{humanizedMin}"
                max="{humanizedMax}"
                step="1"
                placeholder="{humanizedMin}"
                class="tb-input tb-input--number"
            />
        </div>

        <span aria-hidden="true">-</span>

        <div>
            <label class="visually-hidden" for="value-max-{count}">
                Maximum
            </label>
            <input
                id="{id}__user-max"
                type="number"
                min="{humanizedMin}"
                max="{humanizedMax}"
                step="1"
                placeholder="{humanizedMax}"
                class="tb-input tb-input--number"
            />
        </div>

        <input
            id="{id}__data-min"
            name="{queryString}[min]"
            type="number"
            style="display: none;"
            data-id="{id}"
            data-toubiz-results-list.filter-group-item
            data-toubiz-results-list.filter-group-item-reset-event="range-slider.reset"
            {filter:ifNull(value: state.min, else: 'value="{state.min}"')} />

        <input
            id="{id}__data-max"
            name="{queryString}[max]"
            type="number"
            style="display: none;"
            data-id="{id}"
            data-toubiz-results-list.filter-group-item
            data-toubiz-results-list.filter-group-item-reset-event="range-slider.reset"
            {filter:ifNull(value: state.max, else: 'value="{state.max}"')} />

    </div>
</div>