{namespace vh=Newland\NeosViewHelpers\ViewHelpers}
{namespace filtering=Newland\NeosFiltering\ViewHelpers}

<div class="tb-results-filter__facet">
    <h2 class="tb-results-filter__heading">{title}</h2>

    <f:if condition="{options -> f:count()} > {configuration.searchBoxDisplayLimit}">
        <vh:render section="searchBox" arguments="{_all}"/>
    </f:if>

    <ul
        id="item-filter-items-{id}"
        class="tb-results-filter__facet-list">

        <f:for each="{options}" as="option">
            <vh:render section="checkbox" arguments="{
                option: option,
                queryString: queryString,
                checked: '{vh:collection.includesValue(collection: stateValues, value: option.value)}'
            }"/>
        </f:for>
    </ul>
</div>

<f:section name="checkbox">
    <li data-item-filter-value="{option.label}">
        <label class="tb-results-filter__label" for="{option.id}">
            <input
                type="checkbox"
                data-toubiz-results-list.filter-group-item
                class="tb-results-filter__checkbox sr-only"
                name="{queryString}[]"
                id="{option.id}"
                value="{filtering:ifNull(value: option.queryString, then: option.value, else: option.queryString)}"
                {f:if(condition: checked, then: 'checked="checked" aria-checked="true"', else: 'aria-checked="false"')} />

            <span class="tb-results-filter__label-text">
                {option.label}
            </span>

            <span class="tb-results-filter__icon" aria-hidden="true">
                <svg class="c-icon" focusable="false">
                    <use xlink:href="#icon-check" />
                </svg>
            </span>
        </label>
    </li>
</f:section>

<f:section name="searchBox">
    <div class="tb-input-wrapper">
        <label for="search-checkbox-list-{id}" class="visually-hidden">
            <f:translate
                id="searchBox.placeholder"
                source="Views/Filter"
                package="Newland.NeosFiltering"
                arguments="{
                    0: title
                }" />

        </label>
        <input
            type="text"
            id="search-checkbox-list-{id}"
            class="tb-input tb-results-filter__search-input"
            placeholder="{f:translate(
                id: 'searchBox.placeholder',
                source: 'Views/Filter',
                package: 'Newland.NeosFiltering',
                arguments: {0: title}
            )}"
            data-item-filter
            data-item-filter-target="#item-filter-items-{id}" />

        <svg
            class="tb-icon tb-icon--search"
            aria-hidden="true"
            focusable="false">

            <use xlink:href="#icon-search"/>
        </svg>
    </div>
</f:section>