<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>
        <p>Tested with TYPO3:
            {f:render(section: 'TopicList', arguments: {
                topics: compatibleWith,
                addLinks: addLinks
            })}
        </p>
        <p>Topics:
            {f:render(section: 'TopicList', arguments: {
                topics: topics,
                addLinks: addLinks
            })}
        </p>
    </header>

    <f:section name="TopicList">
        <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>
    </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>