{namespace newland=Newland\NeosViewHelpers\ViewHelpers}
{namespace events=Newland\Toubiz\Events\Neos\ViewHelpers}

<f:comment>
    <!--
        This partial is responsible for rendering filter facets.
    -->
</f:comment>

<div class="tb-event-filters">
    <div class="tb-event-filters__facet">
        <button data-toubiz-events-filter-reset-button
                class="tb-event-filters__reset-button {f:if(condition: search, then: 'is-active')}">

            <f:translate id="action.reset" package="Newland.Toubiz.Events.Neos" source="Components/Filter"/>
            <svg class="c-icon" aria-hidden="true">
                <use xlink:href="#tb-event-icon-filter-reset"/>
            </svg>
        </button>

        <f:if condition="{displayDatePicker}'">
            <div data-toubiz-events-facet="date"
                 data-toubiz-events-facet-type="date-range"
                 class="tb-event-filter-facet">

                <div class="tb-event-filter-facet__header">
                    <h3 class="tb-event-filter-facet__title">
                        <f:translate id="facet.date.title"
                                     package="Newland.Toubiz.Events.Neos"
                                     source="Components/Filter"/>

                    </h3>
                </div>

                <div class="tb-event-filter-facet__options">

                    <events:link.frontendRoute prefix="--newland_toubiz_events_neos-full"
                                               node="{documentNode}"
                                               action="searchResult"
                                               arguments="{ search: { fromDate: today, toDate: today } }"
                                               additionalAttributes="{ 'data-toubiz-events-facet-option': 'today' }"
                                               class="tb-event-filter-facet-option {f:if(condition: '{search.fromDate} == {today}', then: 'is-selected')}">

                        <f:translate id="facet.date._values.today"
                                     package="Newland.Toubiz.Events.Neos"
                                     source="Components/Filter"/>

                    </events:link.frontendRoute>

                    <events:link.frontendRoute prefix="--newland_toubiz_events_neos-full"
                                               node="{documentNode}"
                                               action="searchResult"
                                               class="tb-event-filter-facet-option {f:if(condition: '{search.fromDate} == {tomorrow}', then: 'is-selected')}"
                                               arguments="{search: { fromDate: tomorrow, toDate: tomorrow }}"
                                               additionalAttributes="{
                                                   'data-toubiz-events-facet-option': 'tomorrow'
                                               }">

                        <f:translate id="facet.date._values.tomorrow"
                                     package="Newland.Toubiz.Events.Neos"
                                     source="Components/Filter"/>

                    </events:link.frontendRoute>

                    <div data-toubiz-date-picker
                         data-toubiz-date-picker.locale="de"
                         data-toubiz-events-facet-option="date"
                         data-toubiz-events-facet-option-type="date"
                         data-toubiz-date-picker.min-date="{datePickerMinDate}"
                         data-toubiz-date-picker.initial-state="{initialDatepickerState}"
                         <f:if condition="{action} == index">
                             data-toubiz-date-picker-integration.load-page="{f:uri.action(action: 'searchResult', arguments: {search: {fromDate: '{{=it.start}}', toDate: '{{=it.end}}'}})}"
                         </f:if>
                         class="tb-date-picker {f:if(condition: datePickerIsActive, then: 'is-selected')}">

                        <a href="#0"
                           data-toubiz-date-picker-button
                           class="tb-date-picker__button">

                            <span data-toubiz-date-picker-label
                                  class="tb-date-picker__label">

                                <!-- Date picker value will be insterted here -->
                            </span>
                            <span class="tb-date-picker__placeholder">
                                <f:translate id="facet.date._values.selectRange"
                                             package="Newland.Toubiz.Events.Neos"
                                             source="Components/Filter"/>
                            </span>
                        </a>

                        <div data-toubiz-date-picker-overlay
                             class="tb-date-picker__overlay">

                            <div data-toubiz-date-picker-range></div>
                        </div>

                        <div data-toubiz-date-picker-reset-button
                             class="tb-date-picker__reset-button">

                        </div>
                    </div>
                </div>
            </div>
        </f:if>
        <div data-toubiz-events-facet="categories"
             data-toubiz-events-facet-type="multiple"
             class="tb-event-filter-facet">
            <div class="tb-event-filter-facet__header">
                <h3 class="tb-event-filter-facet__title">
                    <f:translate id="facet.category.title"
                                 package="Newland.Toubiz.Events.Neos"
                                 source="Components/Filter" />
                </h3>
            </div>

            <div id="facet-options-{node.identifier}"
                 class="tb-event-filter-facet__options">
                <f:for each="{categories}" as="category" iteration="iterator">
                    <events:link.frontendRoute prefix="--newland_toubiz_events_neos-full"
                                               node="{documentNode}"
                                               action="searchResult"
                                               arguments="{ search: { categories: { 0: category.persistenceObjectIdentifier } } }"
                                               class="tb-event-filter-facet-option {f:if(condition: '{iterator.index} > 5', then: 'tb-event-filter-facet-option--initially-hidden-on-mobile')} {f:if(condition: '{newland:collection.includesValue(collection: search.categories, value: category.persistenceObjectIdentifier)}', then: 'is-selected')}"
                                               additionalAttributes="{
                                                   data-toubiz-events-facet-option: category.PersistenceObjectIdentifier
                                               }">

                        {category.title}
                    </events:link.frontendRoute>
                </f:for>
            </div>
            <button class="tb-event-filters__toggle-button"
                    data-toubiz-events-facet-toggle-options
                    data-target-enhancement
                    data-target-enhancement-plugins.0.name="toggle-aria-expanded"
                    data-target-enhancement-exclusive-group="facets-group"
                    data-target-enhancement-targets.0="#facet-options-{node.identifier}"
                    aria-expanded="false"
                    aria-haspopup="true">

                <span class="tb-event-filters__toggle-button-label tb-event-filters__toggle-button-label--collapse">
                    <f:translate id="facet.showLess"
                                 package="Newland.Toubiz.Events.Neos"
                                 source="Components/Filter"/>
                </span>
                <span class="tb-event-filters__toggle-button-label tb-event-filters__toggle-button-label--expand">
                    <f:translate id="facet.showMore"
                                 package="Newland.Toubiz.Events.Neos"
                                 source="Components/Filter"/>
                </span>

                <span class="tb-event-filters__toggle-button-icon">
                    <svg class="c-icon" aria-hidden="true">
                        <use xlink:href="#tb-event-icon-angle-down" />
                    </svg>
                </span>
            </button>
        </div>
    </div>
</div>