{namespace vh=Newland\NeosViewHelpers\ViewHelpers}

<f:comment>
    <!--
        This partial is responsible for rendering all filter facets
        inside the list view.

        Attention:
            - The f:form tag requires 'autocomplete="off"' in order to
              reset the form when navigating the browser back and forth;
              Without resetting, facets and result list won't match.
    -->
</f:comment>

<f:form actionUri="/toubiz-poi/filter-list"
        fieldNamePrefix=""
        additionalAttributes="{autocomplete: 'off'}"
        id="js-poi-filter-form">

    <f:form.hidden name="node" value="{node.contextPath}" />
    <f:form.hidden id="js-poi-pagination-index" name="query[page]" value="1" />

    <f:if condition="{categories -> f:count()} > 1">
        <div class="tb-results-filter">
            <button 
                class="tb-results-filter__collapse-button"
                data-target-enhancement
                data-target-enhancement-plugins.0.name="toggle-aria-expanded"
                data-target-enhancement-targets.0=".tb-results-filter__facet"
                aria-expanded="true"
                aria-haspopup="true">

                <span>
                    <vh:translate id="property.categories"
                                 package="Newland.Toubiz.Poi.Neos"
                                 source="Models/Article" />

                    <svg class="c-icon c-icon--toggle-down" aria-hidden="true">
                        <use xlink:href="#icon-toggle-down"></use>
                    </svg>
                    <svg class="c-icon c-icon--toggle-up" aria-hidden="true">
                        <use xlink:href="#icon-toggle-up"></use>
                    </svg>
                </span>
            </button>

            <fieldset class="tb-results-filter__facet is-target">
                <ul id="tb-results-filter__categories" class="tb-results-filter__facet-list">
                    <f:for each="{categories}" as="category">
                        <li>
                            <label for="facet-category-{category.persistenceObjectIdentifier}">
                                <f:form.checkbox 
                                    name="query[categories][]"
                                    value="{category.persistenceObjectIdentifier}"
                                    id="facet-category-{category.persistenceObjectIdentifier}"
                                    class="js-poi-filter-facet" />

                                {category.title}
                            </label>
                        </li>
                    </f:for>
                </ul>

                <f:if condition="{categories -> f:count()} > 4">
                    <button 
                        class="tb-results-filter__toggle-more-facets"
                        data-toubiz-expandable-text
                        data-toubiz-expandable-text-label-open="{vh:translate(id: 'facets.showMore', package: 'Newland.Toubiz.Poi.Neos', source: 'Views/List')}" data-toubiz-expandable-text-label-close="{vh:translate(id: 'facets.showLess', package: 'Newland.Toubiz.Poi.Neos', source: 'Views/List')}"
                        data-target-enhancement
                        data-target-enhancement-plugins.0.name="toggle-aria-expanded" data-target-enhancement-targets.0="#tb-results-filter__categories"
                        aria-expanded="false"
                        aria-haspopup="true">

                        <span data-toubiz-expandable-text-label>
                            {vh:translate(id: 'facets.showMore', package: 'Newland.Toubiz.Poi.Neos', source: 'Views/List')}
                        </span>

                        <svg class="c-icon c-icon--toggle-down" aria-hidden="true">
                            <use xlink:href="#icon-toggle-down"></use>
                        </svg>
                        <svg class="c-icon c-icon--toggle-up" aria-hidden="true">
                            <use xlink:href="#icon-toggle-up"></use>
                        </svg>
                    </button>
                </f:if>
            </fieldset>
        </div>
    </f:if>
</f:form>