<html xmlns:f="http://typo3.org/ns/TYPO3/Fluid/ViewHelpers"
    data-namespace-typo3-fluid="true">

    <header>
        <h1>{f:if(
            condition: link,
            then: '<a href="{link}">{title}</a>',
            else: title
        )}</h1>

        <p>
            Published: <time>{blogPost.lastUpdated -> f:format.date(format: 'Y-m-d')}</time>,
            Updated: <time>{blogPost.SYS_LASTCHANGED -> f:format.date(format: 'Y-m-d')}</time>
        </p>

        {f:render(section: 'TopicList', arguments: {
            headline: 'Tested with TYPO3:',
            topics: compatibleWith,
            addLinks: addLinks
        })}

        {f:render(section: 'TopicList', arguments: {
            headline: 'Topics:',
            topics: topics,
            addLinks: addLinks
        })}
    </header>

    <f:section name="TopicList">
        <f:if condition="{topics}">
            <p>{headline}
                <f:for each="{topics}" as="topic" iteration="i">
                    <f:render section="TopicLink"
                        contentAs="content"
                        arguments="{
                            addLinks: addLinks,
                            topicUid: topic.data.uid
                        }"
                    >
                        {topic.data.title}{f:if(condition: '!{i.isLast}', then: ',')}
                    </f:render>
                </f:for>
            </p>
        </f:if>
    </f:section>

    <f:section name="TopicLink">
        <f:if condition="{addLinks}">
            <f:then>
                <a href="{f:uri.page(pageUid: 11, additionalParams: {topic: topicUid})}">{content -> f:spaceless()}</a>
            </f:then>
            <f:else>
                {content}
            </f:else>
        </f:if>
    </f:section>
</html>