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

    <f:layout name="Default" />

    <f:section name="Content">
        <header>
            <h1>Blog Post</h1>
        </header>
        <article class="single-blog-post">
            {f:render(partial: 'BlogPostHeader', arguments: {
                title: data.title,
                blogPost : data,
                compatibleWith: compatibleWith,
                topics: assignedTopics
            })}

            <a name="introduction"></a>
            <h2>Introduction <small><a href="#introduction">¶</a></small></h2>
            {data.abstract -> f:format.html()}
            {introduction -> f:format.raw()}

            {contentMain -> f:format.raw()}

            <f:if condition="{acknowledgements}">
                <a name="acknowledgements"></a>
                <h2>Acknowledgements <small><a href="#acknowledgements">¶</a></small></h2>
                {acknowledgements -> f:format.raw()}
            </f:if>

            <f:if condition="{furtherReading}">
                <a name="furtherReading"></a>
                <h2>Further reading <small><a href="#furtherReading">¶</a></small></h2>
                {furtherReading -> f:format.raw()}
            </f:if>
        </article>
    </f:section>

    <f:section name="Aside">
        {f:render(section: 'TOC', arguments: _all)}

        {f:render(partial: 'TopicList', arguments: {
            headline: 'Related Topics',
            topics: assignedTopics
        })}
    </f:section>

    <f:section name="TOC">
        <!-- TODO: Hide on mobile -->
        <nav>
            <h1>Table of Content</h1>
            <ul>
                <li>
                    <a href="#introduction">Introduction</a>
                </li>
                <f:alias map="{contentSections: pageSections.0.content}">
                    <f:for each="{contentSections}" as="contentEntry">
                        <li>
                            <a href="#c{contentEntry.data.uid}">{contentEntry.data.header}</a>
                        </li>
                    </f:for>
                </f:alias>
                <f:if condition="{acknowledgements}">
                    <li>
                        <a href="#acknowledgements">Acknowledgements</a>
                    </li>
                </f:if>
                <f:if condition="{furtherReading}">
                    <li>
                        <a href="#furtherReading">Further reading</a>
                    </li>
                </f:if>
            </ul>
        </nav>
    </f:section>
</html>