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

<f:layout name="Default"/>

<f:section name="Content">
    <div class="mt-10">
        <div class="flex justify-between items-center pb-6">
            <f:if condition="{title}">
                <h2 class="mt-0">{title}</h2>
            </f:if>
            <a href="{listUri}" 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>
            </a>
        </div>

        <vh:render
            partial="PointOfInterests/ItemList"
            contentAs="additionalSlides"
            arguments="{ articles: articles, node: node, enableSwiper: 1 , id: '{vh:generate.randomString()}'}">

            <a 
                href="{listUri}"
                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">({count})</p>
            </a>
        </vh:render>
    </div>
</f:section>
