<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" xmlns:sms="http://typo3.org/ns/Sitegeist/SmsResponsiveImages/ViewHelpers" data-namespace-typo3-fluid="true">
<f:layout name="Default"/>

<f:section name="Header">
    <f:render partial="Header/All" arguments="{_all}"/>
</f:section>

<f:section name="Main">
    <f:if condition="{menu}">
        <div class="row row-cols-2 row-cols-md-3 row-cols-lg-4 g-3">
            <f:for each="{menu}" as="page">
                <div class="col">
                    <div class="card teaser teaser-box">
                        <f:if condition="{page.teaser_image}">
                            <sms:image image="{page.teaser_image.0}" srcset="168,312,336,504,626" sizes="(min-width: 400px) 312px, 50vw" width="312" cropVariant="teaser" loading="lazy" class="card-img-top h-auto"/>
                        </f:if>
                        <div class="card-body">
                            <h3 class="card-title">
                                <a href="{page.link}" class="stretched-link">{page.title -> f:format.raw()}</a>
                            </h3>
                            <p class="card-text">{f:if(condition: page.data.menutext2, then: '{page.data.menutext2 -> f:format.raw()}', else: '{page.data.menutext1 -> f:format.raw()}')}</p>
                        </div>
                    </div>

                </div>
            </f:for>
        </div>
    </f:if>
</f:section>

<f:section name="link">
    <a href="{page.link}" {f:if(condition: page.target, then: ' target="{page.target}"')} class="nav-link{f:if(condition: page.active, then: ' active')}{f:if(condition: page.current, then: ' current')}{f:if(condition: page.spacer, then: ' disabled')}" >{page.title}</a>
</f:section>
</html>
