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

<f:layout name="LinkBrowser" />

<f:section name="Navigation">
    <typo3-backend-component-page-browser
        class="scaffold-content-navigation-component"
        tree-actions="{treeActions -> f:format.json()}"
        active-page="{expandedPage}">
    </typo3-backend-component-page-browser>
</f:section>

<f:section name="Content">
    <f:if condition="{expandActivePage}">
        <f:if condition="{activePageLink}">
            <f:then>
                <a href="{activePageLink}" class="t3js-pageLink btn btn-default">
                    <f:format.raw>
                        <f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang_browse_links.xlf:linkTo" arguments="{0: '{activePageIcon} {activePageTitle}'}">{activePageIcon} {activePageTitle}</f:translate>
                    </f:format.raw>
                </a>
            </f:then>
            <f:else>
                <div>{activePageIcon -> f:format.raw()} {activePageTitle -> f:format.raw()}</div>
            </f:else>
        </f:if>

        <f:if condition="{contentElements}">
            <h4 class="mt-4 mb-3"><f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang_browse_links.xlf:contentElements" /></h4>
            <div class="list-group list-group-flush">
                <f:for each="{contentElements}" as="content">
                    <a href="{content.url}"  class="t3js-pageLink list-group-item list-group-item-action {f:if(condition: content.isSelected, then: ' active')}">
                        {content.icon -> f:format.raw()} {content.title -> f:format.raw()}
                    </a>
                </f:for>
            </div>
        </f:if>
    </f:if>
</f:section>

</html>
