<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:spaceless>
                <f:render section="Topic"
                    contentAs="content"
                    arguments="{
                        addLinks: addLinks,
                        topicUid: topic.data.uid
                    }"
                >
                    {topic.data.title}
                </f:render></f:spaceless>{f:if(condition: '!{i.isLast}', then: ',')}
            </f:for></p>
        </f:if>
    </f:section>

    <f:section name="Topic">
        {f:if(
            condition: addLinks,
            then: "{f:render(section: 'LinkedTopic', arguments: _all)}",
            else: content
        )}
    </f:section>

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