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

    <f:layout name="Content" />

    <f:section name="Header">
        {data.title}
    </f:section>

    <f:section name="Content">
        <main>{contentMain -> f:format.raw()}</main>
    </f:section>

    <f:section name="Aside">

        {f:render(section: 'Breadcrumb', arguments: {
            breadcrumb: rootline
        })}

        {f:render(section: 'TableOfContent', arguments: {
            contentSections: pageSections.0.content
        })}

    </f:section>

    <f:section name="Breadcrumb">
        <f:if condition="{breadcrumb}">
            <nav>
                <h1>Breadcrumb</h1>
                <ul>
                    <f:for each="{breadcrumb}" as="page">
                        <li>
                            <a href="{page.link}">{page.title}</a>
                        </li>
                    </f:for>
                </ul>
            </nav>
        </f:if>
    </f:section>

    <f:section name="TableOfContent">
        <nav>
            <h1>Table of Content</h1>
            <ol>
                <f:for each="{contentSections}" as="contentEntry">
                    <f:if condition="{contentEntry.data.header}">
                        <li>
                            <a href="#c{contentEntry.data.uid}">{contentEntry.data.header}</a>
                        </li>
                    </f:if>
                </f:for>
            </ol>
        </nav>
    </f:section>
</html>