<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-filestorage-browser
        class="scaffold-content-navigation-component"
        tree-actions="{treeActions -> f:format.json()}"
        active-folder="{f:if(condition: selectedFolder, then: selectedFolder.combinedIdentifier, else: '') -> f:format.htmlentities()}"
    >
    </typo3-backend-component-filestorage-browser>
</f:section>

<f:section name="Content">
    <f:if condition="{selectedFolder}">
        <h3><f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang_browse_links.xlf:folders" /></h3>
        <div class="list-group list-group-flush mb-3">
            <f:if condition="{selectedFolderUrl}">
                <f:then>
                    <a
                        href="{selectedFolderUrl}"
                        class="t3js-fileLink list-group-item list-group-item-action {f:if(condition: '{selectedFolder.combinedIdentifier} == {currentIdentifier}', then: 'active')}"
                        title="{selectedFolder.identifier}"
                    >{selectedFolderIcon -> f:format.raw()} {selectedFolderTitle}</a>
                </f:then>
                <f:else>
                    <div class="list-group-item">
                        {selectedFolderIcon -> f:format.raw()} {selectedFolderTitle}
                    </div>
                </f:else>
            </f:if>
            <f:if condition="{itemsInSelectedFolder}">
                <div class="list-group list-group-flush ms-3">
                    <f:for each="{itemsInSelectedFolder}" as="folder">
                        <a
                            href="{folder.url}"
                            class="t3js-fileLink list-group-item list-group-item-action{f:if(condition: '{folder.identifier} == {currentIdentifier}', then: ' active')}"
                            title="{folder.name}"
                        >
                            {folder.icon -> f:format.raw()}
                            {folder.title}
                        </a>
                    </f:for>
                </div>
            </f:if>
        </div>
    </f:if>
    {createFolderForm -> f:format.raw()}
</f:section>

</html>
