<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" xmlns: data-namespace-typo3-fluid="true">
<f:layout name="Default"/>
<f:section name="Main">
    <f:if condition="{menu}">
        <nav class="menu-pages menu-pages--layout{data.layout} row row-cols-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-6 justify-content-center g-4">
            <f:for each="{menu}" as="page">
                <div class="nav-item col">
                    <f:link.page class="nav-link{f:if(condition: page.current, then: ' active')}" pageUid="{page.data.uid}" title="{page.title}">
                        <div class="menuitem-title fs-4 text-center text-uppercase mb-2">
                            <f:format.raw>{page.title}</f:format.raw>
                        </div>
                        <f:if condition="{page.files}">
                            <div class="menuitem-image rounded-circle bg-light overflow-hidden">
                                <sms:image image="{v:iterator.last(haystack: page.files)}" cropVariant="mobile" width="192c" height="192" srcset="1x, 2x" class="img-fluid  w-100"/>
                            </div>
                        </f:if>
                    </f:link.page>
                </div>
            </f:for>
        </nav>

    </f:if>
</f:section>
</html>
