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

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

<div class="tb-event-filters relative">
    <div class="tb-event-filters__facet">

        <div class="tb-event-filter-facet relative mb-4">

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

                </h3>
            </div>

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

                <events:link.frontendRoute
                    prefix="--newland_toubiz_events_neos-full"
                    node="{documentNode}"
                    action="searchResult"
                    arguments="{ query: { fromDate: today, toDate: today, city: query.city } }"
                    additionalAttributes="{ 'data-toubiz-events-date': 'today' }"
                    class="tb-event-filter-facet-option inline-block p-3 mr-2 mb-3 text-sm text-grey-darker border border-grey-light rounded-sm no-underline {f:if(condition: '{query.fromDate} == {today}', then: 'is-selected bg-secondary text-white border-secondary')}">

                    <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 inline-block p-3 mr-2 mb-3 text-sm text-grey-darker border border-grey-light rounded-sm no-underline {f:if(condition: '{query.fromDate} == {tomorrow}', then: 'is-selected bg-secondary text-white border-secondary')}"
                    arguments="{query: { fromDate: tomorrow, toDate: tomorrow, city: query.city }}"
                    additionalAttributes="{ 'data-toubiz-events-date': '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-date-picker.min-date="{datePickerMinDate}"
                    data-toubiz-date-picker.initial-state="{initialDatepickerState}"
                    {f:if(condition: datePickerLoadPage, then: 'data-toubiz-date-picker-integration.load-page="{datePickerLoadPage}"')}
                    class="tb-date-picker static {f:if(condition: datePickerIsActive, then: 'is-selected')}">

                    <a
                        href="#0"
                        data-toubiz-date-picker-button
                        class="tb-date-picker__button inline-block p-3 mr-2 mb-3 text-sm text-grey-darker border border-grey-light rounded-sm no-underline hover:text-white hover:bg-secondary hover:border-secondary focus:text-white focus:bg-secondary focus:border-secondary {f:if(condition: datePickerIsActive, then: 'bg-secondary border-secondary text-white')}">

                        <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>
            </div>
        </div>

        <f:if condition="{query}">
            <button class="tb-event-filters__reset-button {f:if(condition: search, then: 'is-active')} absolute pin-t pin-r text-xs opacity-50">
                <neos:link.node
                    node="{documentNode}"
                    class="text-grey-darker no-underline">

                    <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>
                </neos:link.node>
            </button>
        </f:if>

        <f:if condition="{topics}">
            <div class="tb-event-filter-facet relative mb-4">
                <div class="tb-event-filter-facet__header">
                    <h3 class="tb-event-filter-facet__title m-0 text-base">
                        <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 mt-4">
                    <f:for each="{topics}" as="topic" iteration="iterator">
                        <events:link.frontendRoute
                            prefix="--newland_toubiz_events_neos-full"
                            node="{documentNode}"
                            action="searchResult"
                            arguments="{ query: '{events:filter.query(topic: topic)}' }"
                            class="tb-event-filter-facet-option {f:if(condition: '{iterator.index} > 5', then: 'tb-event-filter-facet-option--initially-hidden-on-mobile')} p-3 mr-2 mb-3 text-sm text-grey-darker border border-grey-light rounded-sm no-underline {f:if(condition: '{newland:collection.includesValue(collection: query.topics, value: topic.combinedIdentifier)}', then: 'bg-secondary text-white border-secondary')}">

                            {topic.title}
                        </events:link.frontendRoute>
                    </f:for>
                </div>
            </div>
        </f:if>
    </div>
</div>