<f:variable name="publishDateFormat" value="{settings.meta.listheader.elements.published.format}"/>
<f:for each="{posts}" iteration="iterator" as="post">
    <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
                fetchpriority="low"
                class="%imgClass%"
                image="{post.featuredImage}"
                treatIdAsReference="1"
                maxWidth="600"
                sources="{
                    '2xl': { width: '397' },
                    'xl': { width: '435' },
                    'lg': { width: '380' },
                    'md': { width: '452' },
                    'sm': { width: '355' },
                }"
            />
        </f:variable>
    </f:if>

    <f:comment><!-- Build card array for twig template --></f:comment>
    <f:variable name="card" value="{
        variant: 'filled',
        orientation: 'vertical',
        heading: {
            topline: '{f:format.date(format: publishDateFormat,date: post.publishDate)}',
            headline: {
                text: '{post.title}',
                markup: 'h3',
                style: '4',
            }
        },
        copy: {
            text: '{f:if(condition:post.abstract, then:post.abstract, 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'
        }
    }"/>

    <f:variable name="cardHtml">
        <azh:twigTemplate template="elements/components/c-card/c-card.template.twig"
                          variables="{card}"/>
    </f:variable>

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

<f:variable name="variables" value="{
    contentBase: {
        alignment: 'left',
        heading: {
            headline: {
                text: 'Weitere Beiträge',
                markup: 'h3',
                style: '3',
                solid: 1,
            }
        }
    },
    brickContainer: {
        variant: 'b-container--default',
    },
    slider: {
        slides: cards,
        translations: {
            nextSlideMessage: 'Nächste Beiträge',
            prevSlideMessage: 'Vorherige Beiträge',
            firstSlideMessage: 'Erste Beitragsgruppe',
            lastSlideMessage: 'Letzte Beitragsgruppe',
            paginationBulletMessage: 'Gehe zu Beitragsgruppe {{index}}'
        },
    }
}"/>

<f:format.raw>
    <azh:twigTemplate template="elements/bricks/b-slider/b-slider.template.twig"
                      variables="{variables}"/>
</f:format.raw>