{namespace vh=Newland\NeosViewHelpers\ViewHelpers}

<svg style="display: none;">
    <symbol id="icon-check" viewBox="0 0 512 512"><path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"/></symbol>
    <symbol id="icon-sliders" viewBox="0 0 512 512"><path d="M496 72H288V48c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v24H16C7.2 72 0 79.2 0 88v16c0 8.8 7.2 16 16 16h208v24c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16v-24h208c8.8 0 16-7.2 16-16V88c0-8.8-7.2-16-16-16zm0 320H160v-24c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v24H16c-8.8 0-16 7.2-16 16v16c0 8.8 7.2 16 16 16h80v24c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16v-24h336c8.8 0 16-7.2 16-16v-16c0-8.8-7.2-16-16-16zm0-160h-80v-24c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v24H16c-8.8 0-16 7.2-16 16v16c0 8.8 7.2 16 16 16h336v24c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16v-24h80c8.8 0 16-7.2 16-16v-16c0-8.8-7.2-16-16-16z"/></symbol>
</svg>

<form
    action="{actionUri}"
    method="GET"
    {formAttributes -> f:format.raw()}>

    <f:for each="{actionArguments}" as="value" key="key">
        <input type="hidden" name="{key}" value="{value}" />
    </f:for>
    <f:for each="{hiddenFields}" as="value" key="key">
        <input type="hidden" name="{key}" value="{value}" />
    </f:for>

    <div class="tb-results-filter">
        <nav
            class="tb-results-filter__navigation"
            aria-labelledby="filter-navigation-label">

            <span class="visually-hidden" id="filter-navigation-label">
                <f:translate id="aria.filterNavigation" source="Views/Filter" package="Newland.NeosFiltering" />
            </span>

            <button
                id="tb-results-filter-toggle"
                class="tb-results-filter__toggle tb-button tb-button--secondary tb-button--has-icon"
                data-toubiz-results-list.filter-toggle-button
                data-target-enhancement
                data-target-enhancement-classes.0="filter-list-is-target"
                data-target-enhancement-targets.0="#tb-results-filter-list, html"
                data-target-enhancement-plugins.0.name="toggle-aria-expanded"
                aria-expanded="false">

                <span class="tb-button__content-wrapper">
                    <svg
                        class="tb-icon tb-icon--filter"
                        aria-hidden="true"
                        focusable="false">

                        <use xlink:href="#icon-sliders"/>
                    </svg>
                    <svg
                        class="tb-icon tb-icon--close"
                        aria-hidden="true"
                        focusable="false">

                        <use xlink:href="#icon-close"/>
                    </svg>

                    <f:translate
                        id="action.openFiltersMobile"
                        source="Views/Filter"
                        package="Newland.NeosFiltering" />

                </span>
            </button>

            <ul id="tb-results-filter-list" class="tb-results-filter__list">
                <f:for each="{items}" as="item">
                    <f:alias map="{renderItem: '{vh:render(renderable: item)}'}">
                        <f:if condition="{renderItem}">
                            <li class="tb-results-filter__list-item {f:if(condition: item.visibleState, else: 'tb-results-filter__list-item--hidden')}">
                                {renderItem -> f:format.raw()}
                            </li>
                        </f:if>
                    </f:alias>
                </f:for>
            </ul>
        </nav>
    </div>
</form>