{namespace event=Newland\Toubiz\Events\Neos\ViewHelpers}

<f:form
    action="searchResult"
    method="GET"
    controller="Events"
    package="Newland.Toubiz.Events.Neos"
    object="{query}"
    objectName="query"
    arguments="{ node: node }"
    additionalAttributes="{
        'data-toubiz-results-list.filter-form': 'data-toubiz-results-list.filter-form',
        'data-toubiz-results-list.filter-form.ajax-action': '/toubiz-events/filter?node={node.contextPath}',
        'data-toubiz-results-list.filter-form.ajax-method': 'GET',
        'data-toubiz-results-list.filter-form.ajax-update-url': '1',
        'data-toubiz-results-list.filter-form.ajax-update-url-parameters': 'query',
        'data-toubiz-results-list.filter-form.ajax-update-url-plugin-namespace': argumentNamespace
    }">

    <f:form.hidden
        property="page"
        additionalAttributes="{
            'data-toubiz-results-list.page': 'data-toubiz-results-list.page',
            'data-toubiz-ajax.name': 'query[page]'
        }" />

    <f:form.hidden
        property="fromDate"
        additionalAttributes="{
            'data-toubiz-events-from-date': 'data-toubiz-events-from-date',
            'data-toubiz-ajax.name': 'query[fromDate]'
        }" />

    <f:form.hidden
        property="toDate"
        additionalAttributes="{
            'data-toubiz-events-to-date': 'data-toubiz-events-to-date',
            'data-toubiz-ajax.name': 'query[toDate]'
        }" />

    <div class="w-full border-b border-grey-lighter mb-6">
        <div class="relative">
            <!-- Mobile navbar -->
            <div class="sm:hidden py-4">
                <ul class="list-reset flex justify-between">
                    <li>
                        <a
                            href="#overlay"
                            data-target-enhancement
                            data-target-enhancement-plugins.0.name="toggle-aria-expanded"
                            class="block border border-grey text-grey-darker rounded-sm no-underline py-2 px-3 mr-2">

                            Filter
                        </a>
                    </li>

                    <f:comment>
                        <!--
                            Map is not yet implemented.

                            <li>
                                <a
                                    href="#"
                                    class="block border border-grey text-grey-darker rounded-sm no-underline py-2 px-3">

                                    Karte anzeigen
                                </a>
                            </li>
                        -->
                    </f:comment>
                </ul>
            </div>

            <div
                id="overlay"
                data-target-enhancement-subject
                class="absolute sm:static top-full hidden sm:block bg-white sm:bg-transparent w-full border-b sm:border-t border-grey-lightest z-50 shadow sm:shadow-none -mx-4 sm:-mx-0 container-break sm:container-break-reset sm:w-auto">

                <div class="p-4 sm:px-0 sm:flex sm:justify-between">
                    <ul class="w-full sm:flex-1 list-reset">
                        <f:for each="{filterSections}" as="section" key="sectionKey">
                            <li class="relative inline-block w-full sm:w-auto">
                                <a
                                    href="#overlay-category-{sectionKey}"
                                    data-target-enhancement
                                    data-target-enhancement-exclusive-group="filter-overlays"
                                    data-target-enhancement-plugins.0.name="toggle-aria-expanded"
                                    aria-pressed="false"
                                    aria-haspopup="true"
                                    class="hidden sm:inline-block border border-grey text-grey-darker rounded-sm no-underline py-2 px-3 mr-1">

                                    <f:translate
                                        id="{f:if(condition: section.i18n.id, then: section.i18.id, else: 'section.{sectionKey}')}"
                                        source="{f:if(condition: section.i18n.source, then: section.i18n.source, else: 'Views/Filter')}"
                                        package="{f:if(condition: section.i18n.package, then: section.i18n.package, else: 'Newland.Toubiz.Events.Neos')}" />

                                </a>

                                <div
                                    id="overlay-category-{sectionKey}"
                                    data-target-enhancement-subject
                                    class="w-full block sm:hidden">

                                    <div class="z-50 bg-white mb-8 sm:mb-0 sm:p-6 block w-full sm:mt-3 sm:w-auto sm:shadow sm:absolute sm:top-full sm:pin-l sm:min-w-sm sm:border sm:border-grey-lighter">
                                        <f:for each="{section.fieldSets}" as="fieldSet" key="fieldSetKey" iteration="iteration">
                                            <div class="{f:if(condition: iteration.isFirst, else: 'mt-3')}">
                                                <f:if condition="!{fieldSet.disableHeading}">
                                                    <h3 class="mb-4 mt-0 text-lg">
                                                        <f:translate
                                                            id="{f:if(condition: fieldSet.i18n.id, then: fieldSet.i18.id, else: 'fieldSet.{fieldSetKey}')}"
                                                            source="{f:if(condition: fieldSet.i18n.source, then: fieldSet.i18n.source, else: 'Views/Filter')}"
                                                            package="{f:if(condition: fieldSet.i18n.package, then: fieldSet.i18n.package, else: 'Newland.Toubiz.Events.Neos')}" />

                                                    </h3>
                                                </f:if>

                                                <event:filter.fieldSet
                                                    name="{fieldSetKey}"
                                                    fieldSet="{fieldSet}"
                                                    node="{node}" />

                                            </div>
                                        </f:for>

                                        <div class="mt-6 hidden sm:block">
                                            <button class="c-button c-button--secondary w-full text-center" type="submit">
                                                <f:translate
                                                    id="fieldSet.filter"
                                                    package="Newland.Toubiz.Poi.Neos"
                                                    source="Views/FilteredLists" />

                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </f:for>
                    </ul>

                    <f:comment>
                        <!--
                            Map is not yet implemented.

                            <div class="hidden sm:block sm:flex-none">
                                <a href="#" class="border border-grey text-grey-darker rounded-sm no-underline inline-block py-2 px-3">
                                    Karte anzeigen
                                </a>
                            </div>
                        -->
                    </f:comment>

                    <div class="sm:hidden">
                        <button class="c-button c-button--secondary w-full text-center mt-4" type="submit">
                            <f:translate
                                id="fieldSet.filter"
                                package="Newland.Toubiz.Poi.Neos"
                                source="Views/FilteredLists" />

                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</f:form>