{namespace poi=Newland\Toubiz\Poi\Neos\ViewHelpers}
{namespace vh=Newland\NeosViewHelpers\ViewHelpers}

<f:form
    action="show"
    method="GET"
    controller="FilteredLists"
    package="Newland.Toubiz.Poi.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-poi/filtered-list?node={node.contextPath}&format=ajax',
        '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]'
        }" />

    <div class="relative">
        <!-- Mobile navbar -->
        <div class="o-container 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">

                        <f:comment>
                            <!--
                                According to the design specification, this button should have an active state / be highlighted
                                if one or more of the included filters are currently active.

                                To visually achieve this state, add classes `bg-secondary text-white border-secondary`.
                            -->
                        </f:comment>

                        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-plugins.0.name="toggle-aria-expanded"
                                data-target-enhancement-exclusive-group="filter-overlays"
                                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-2">

                                <f:comment>
                                    <!--
                                        Like on mobile, this button should have an active state / be highlighted
                                        if one or more of the included filters are currently active.

                                        To visually achieve this state, add classes `bg-secondary text-white border-secondary`.
                                    -->
                                </f:comment>

                                <vh: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.Poi.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">
                                                    <vh: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.Poi.Neos')}" />

                                                </h3>
                                            </f:if>
                                            <poi:filter.fieldSet
                                                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">
                                            <vh: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">
                        <vh:translate
                            id="fieldSet.filter"
                            package="Newland.Toubiz.Poi.Neos"
                            source="Views/FilteredLists" />

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