{namespace map=Newland\Toubiz\Map\Neos\ViewHelpers}

<template data-toubiz-map-filter-menu-template>
    <div
        id="tb-map-filter-menu"
        class="tb-map-filter-menu">

        <button
            data-toubiz-map-filter-menu-open
            class="tb-map-filter-menu__toggle tb-map-filter-menu__toggle--open"
            aria-expanded="false"
            aria-pressed="false">

            <map:icon id="tb-map-open" additionalAttributes="{ aria-hidden: 'true' }" />

            {properties.menuLabel}
        </button>
        <button
            data-toubiz-map-filter-menu-close
            class="tb-map-filter-menu__toggle tb-map-filter-menu__toggle--close"
            aria-expanded="false"
            aria-pressed="false"
            aria-label="Close">

            <map:icon id="tb-map-close" additionalAttributes="{ aria-hidden: 'true' }" />
        </button>

        <div class="tb-map-filter-menu__body">
            <header class="tb-map-filter-menu__header">
                <f:if condition="{properties.useAlternativeMenuStyle && properties.filterMenuTopline}">
                    <span class="tb-map-filter-menu__title-topline">{properties.filterMenuTopline}</span>
                </f:if>
                <h4 class="tb-map-filter-menu__title">
                    <f:if condition="{properties.chooseCategoryLabel}">
                        <f:then>{properties.chooseCategoryLabel}</f:then>
                        <f:else>
                            <f:translate
                                id="filterMenu.title"
                                package="Newland.Toubiz.Map.Neos"
                                source="Views/Map/Show" />

                        </f:else>
                    </f:if>
                </h4>
            </header>

            {{?it.items}}
            <ul class="tb-map-filter-menu__items">
                <li>
                    <div
                        class="tb-map-filter-item"
                        tabindex="0"
                        data-toubiz-map-filter-menu-item="null">

                        <div class="tb-map-filter-item__icon">
                            <svg
                                class="c-icon"
                                aria-hidden="true"
                                data-icon-open>

                                <use xlink:href="#tb-map-select-all" />
                            </svg>
                        </div>
                        <div class="tb-map-filter-item__name">
                            <f:translate
                                id="filterMenu.allFilters"
                                package="Newland.Toubiz.Map.Neos"
                                source="Views/Map/Show" />

                        </div>
                    </div>
                </li>
                {{~it.items :value:index}}
                <li>
                    <div
                        class="tb-map-filter-item"
                        tabindex="0"
                        data-toubiz-map-filter-menu-item="{{!value.path}}"
                        aria-pressed="false">

                        <div class="tb-map-filter-item__icon">
                            <img src="{{=value.style.iconUrl}}" />
                        </div>
                        <div class="tb-map-filter-item__name">
                            {{=value.title}}
                        </div>

                        {{?value.children.length}}
                        <div class="tb-map-filter-item__toggle-icon">
                            <svg class="c-icon" aria-hidden="true" data-icon-open>
                                <use xlink:href="#tb-map-expand" />
                            </svg>
                        </div>
                        {{?}}
                    </div>

                    {{?value.children.length}}
                    <ul class="tb-map-filter-menu__sub-items" data-toubiz-map-filter-sub-item="{{!value.path}}">
                        {{~value.children :subValue}}
                        <li>
                            <div
                                class="tb-map-filter-item"
                                tabindex="0"
                                data-toubiz-map-filter-menu-item="{{!subValue.path}}">

                                <div class="tb-map-filter-item__icon">
                                    <img src="{{=subValue.style.iconUrl}}" />
                                </div>
                                <div class="tb-map-filter-item__name">
                                    {{=subValue.title}}
                                </div>
                            </div>
                        </li>
                        {{~}}
                    </ul>
                    {{?}}
                </li>
                {{~}}
            </ul>
            {{?}}

            <div class="tb-map-filter-menu__action">
                <button
                    data-toubiz-map-filter-menu-confirm
                    class="tb-map-filter-menu__confirm-button c-button c-button--ghost c-button--secondary">

                    <f:translate
                        id="filterMenu.mobileConfirmLabel"
                        package="Newland.Toubiz.Map.Neos"
                        source="Views/Map/Show" />

                </button>
            </div>
        </div>
    </div>
</template>