{namespace neos=Neos\Neos\ViewHelpers}
{namespace fusion=Neos\Fusion\ViewHelpers}
{namespace vh=Newland\NeosViewHelpers\ViewHelpers}

<neos:contentElement.wrap node="{node}">
    <div class="c-author-rootpage">
        <section class="c-author-page__header">
            <div class="o-container o-container--xs">
                <f:if condition="{neos:rendering.inBackend()}">
                    <f:then>
                        {neos:contentElement.editable(property: 'headline', tag: 'h1', class: 'c-author-root-page__title')}
                        {neos:contentElement.editable(property: 'subtitle', class: 'c-author-root-page__subtitle')}
                    </f:then>
                    <f:else>
                        <f:if condition="{subtitle -> vh:string.notEmpty()}">
                            {neos:contentElement.editable(property: 'headline', tag: 'h1', class: 'c-author-root-page__title')}
                            {neos:contentElement.editable(property: 'subtitle', class: 'c-author-root-page__subtitle')}
                        </f:if>
                    </f:else>
                </f:if>
            </div>
        </section>

        <section class="o-container">

            <f:if condition="{linkedAuthors}">
                <f:then>
                    <ul class="o-grid o-grid--fourths o-grid--centered">
                        <f:for each="{linkedAuthors}" as="authorPage" iteration="iterator">
                            <f:render section="authorPageTeaser" arguments="{_all}" />
                        </f:for>
                    </ul>
                </f:then>
                <f:else>
                    <f:if condition="{neos:rendering.inEditMode()}">
                        <div{attributes -> f:format.raw()}>
                            <p>No AuthorPages found</p>
                        </div>
                    </f:if>
                </f:else>
            </f:if>
        </section>
    </div>

    <f:section name="authorPageTeaser">
        <li class="o-grid__item">
            <neos:link.node node="{authorPage}" class="c-teaser-card">
                <div class="c-author-page__image c-author-page__image--teaser mt-20">
                    <img src="{neos.media:uri.image(image: authorPage.properties.image, width: 160, height: 160, allowCropping: true)}" width="160" height="160" alt="{authorPage.properties.title}" />
                </div>
                <p class="c-teaser-card__title c-teaser-card__title--author">{authorPage.properties.title}</p>
            </neos:link.node>
        </li>
    </f:section>

</neos:contentElement.wrap>