{namespace newland=Newland\NeosViewHelpers\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">

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

                        <f:translate id="facet.date._values.today"
                                     package="Newland.Toubiz.Events.Neos"
                                     source="Components/Filter"/>
                    </f:link.action>
                    <f:link.action 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"/>
                    </f:link.action>

                    <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 class="tb-event-filter-facet__options">
                <f:for each="{categories}" as="category">
                    <f:link.action action="searchResult"
                                   class="tb-event-filter-facet-option {f:if(condition: '{newland:collection.includesValue(collection: search.categories, value: category.persistenceObjectIdentifier)}', then: 'is-selected')}"
                                   arguments="{search: { categories: {0: category.persistenceObjectIdentifier}}}"
                                   additionalAttributes="{
                                        'data-toubiz-events-facet-option': category.persistenceObjectIdentifier
                                   }">

                        {category.title}
                    </f:link.action>
                </f:for>
            </div>
        </div>
    </div>
</div>