
<f:variable name="publishDateFormat" value="{settings.meta.listheader.elements.published.format}"/>
<f:for each="{posts}" iteration="iterator" as="post">
    <f:variable name="orientation" value="{f:if(condition:iterator.isFirst, then:'vertical', else:'responsive')}"/>

    <f:comment><!-- Filling badgesGroup with categories --></f:comment>
    <f:variable name="badges" value="{}" />
    <f:comment><!--
    <f:for each="{post.categories}" as="category">
        {badges -> v:iterator.push(add: {
            text: category.title,
            size : "md",
            hierarchy : "tertiary"
        }) -> f:variable(name: 'badges')}
    </f:for>
    --></f:comment>

    <f:comment><!-- Fill image parameter with post.featuredImage --></f:comment>
    <f:variable name="image" value="" />
    <f:if condition="{post.featuredImage}">
        <f:variable name="image"><i:image
            class="%imgClass%"
            image="{post.featuredImage}"
            treatIdAsReference="1"
            maxWidth="1680"
            sources="{
                    '2xl': { width: '1680' },
                    'xl': { width: '1296' },
                    'lg': { width: '1128' },
                    'md': { width: '956' },
                    'sm': { width: '700' },
                    'xs': { width: '612' },
                }"
        /></f:variable>
    </f:if>

    <f:comment><!-- Build card array for twig template --></f:comment>
    <f:variable name="card" value="{
        variant: 'filled',
        orientation: orientation,
        heading: {
            topline: '{f:format.date(format: publishDateFormat,date: post.publishDate)}',
            headline: {
                text: '{post.title}',
                markup: 'h3',
                style: '4',
            }
        },
        copy: {
            text: '{f:if(condition:post.teaser, then:post.teaser, else:post.description)}'
        },
        image: {
            html: image
        },
        link: {
            anchor: {
                text: 'Zum Beitrag',
                title: 'Zum Beitrag: {post.title}',
                href: '{blogvh:link.post(post: post, returnUri:1)}',
                variant: 'anchor'
            },
            icon: {
                name: 'solid-arrow-sm-right',
            }
        },
        badgeGroup: {
            items: badges,
            position: 'on-image'
        }
    }" />

    {cards -> v:iterator.push(add: card) -> f:variable(name: 'cards')}
</f:for>

<f:format.raw>
<azh:twigTemplate template="elements/components/c-grid-highlight/c-grid-highlight.template.twig"
                  variables="{cards:cards}"/>
</f:format.raw>