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

<f:layout name="Default"/>

<f:section name="Content">
    <vh:render renderable="{filter}"/>

    <f:if condition="{topics}">
        <div class="tb-event-filters relative">
            <div class="tb-event-filters__facet">
                <h2 class="mb-4 mt-10">
                    <vh:translate
                        id="topics.header"
                        package="Newland.Toubiz.Poi.Neos"
                        source="Views/Index"/>
                </h2>
            </div>

            <div class="tb-event-filter-facet__options mt-4">
            <f:for each="{topics}" as="topic">
                <poi:link.articleFilter
                    filter="{filter}"
                    query="{poi:filter.query(topic: topic)}"
                    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">
                    
                    {topic.title}
                </poi:link.articleFilter>
            </f:for>
            </div>
        </div>
    </f:if>
    <f:if condition="{lists}">
        <f:then>
            <f:for each="{lists}" as="list" key="id">
                <div class="mt-10">
                    <div class="flex justify-between items-center pb-6">
                        <h2 class="mt-0">{list.title}</h2>

                        <poi:link.articleFilter
                            filter="{filter}"
                            query="{poi:filter.query(topic: list)}"
                            class="text-secondary no-underline hover:no-underline focus:no-underline">

                            <vh:translate
                                id="swiper.showAll"
                                package="Newland.Toubiz.Poi.Neos"
                                source="Views/FilteredLists"/>

                            <svg class="c-icon" aria-hidden="true">
                                <use xlink:href="#icon-arrow-right" />
                            </svg>
                        </poi:link.articleFilter>
                    </div>

                    <poi:topic.articles 
                        topic="{list}"
                        queryOverride="{queryOverride}"
                        limit="{listLimit}"
                        properties="{properties}"
                        node="{node}">
                        
                        <vh:render
                            partial="PointOfInterests/ItemList"
                            contentAs="additionalSlides"
                            arguments="{ articles: articles, node: node, enableSwiper: 1 , id: id}">

                            <poi:link.articleFilter
                                filter="{filter}"
                                countAs="totalCount"
                                query="{poi:filter.query(topic: list)}"

                                class="c-show-all-card group bg-grey-lighter h-full flex justify-center items-center flex-col py-4 no-underline text-copy border-box">

                                <svg class="c-icon text-secondary bg-white rounded-full w-16 h-16 p-3 group-hover:text-white group-hover:bg-secondary transition-all transition-timing-ease-in transition-timing-short">
                                    <use xlink:href="#icon-plus"></use>
                                </svg>

                                <h3 class="font-bold mt-6 flex items-center">
                                    <span>
                                        <vh:translate
                                            id="swiper.showAll"
                                            package="Newland.Toubiz.Poi.Neos"
                                            source="Views/FilteredLists"/>

                                    </span>
                                    <svg class="c-icon pin-t ml-1">
                                        <use xlink:href="#icon-arrow-right"></use>
                                    </svg>
                                </h3>
                                <p class="text-sm">({totalCount})</p>
                            </poi:link.articleFilter>
                        </vh:render>
                    </poi:topic.articles>
                </div>
            </f:for>
        </f:then>
        <f:else if="{neos:rendering.inBackend(node: node)}">
            <p>Please select categories or attributes to display lists.</p>
        </f:else>
    </f:if>
</f:section>