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

<f:layout name="ElementBrowserWithNavigation" />

<f:section name="Navigation">
    <typo3-backend-component-filestorage-browser
        class="scaffold-content-navigation-component"
        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}">
        <h4 class="text-truncate mb-4">
            <core:iconForResource resource="{selectedFolder}" />
            {selectedFolder.storage.name}: {selectedFolder.identifier}
        </h4>
    </f:if>
    <f:flashMessages queueIdentifier="core.template.flashMessages"/>

    <f:if condition="{selectedFolder}">
        <div
            data-filelist-element="true"
            data-filelist-type="folder"
            data-filelist-identifier="{selectedFolder.combinedIdentifier}"
        >
            <button title="{selectedFolder.storage.name}" class="btn btn-default" data-filelist-action="primary">
                <core:iconForResource resource="{selectedFolder}" />
                <f:variable name="folderLabel" value="{f:if(condition: '{selectedFolder.name} !== \'\'', then: '{selectedFolder.name}', else: '{selectedFolder.storage.name}')}" />
                <f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang_browse_links.xlf:linkTo" arguments="{0: '/{folderLabel}'}">{selectedFolder.storage.name}: {selectedFolder.identifier}</f:translate>
            </button>
        </div>
    </f:if>

    <f:format.raw>{content}</f:format.raw>
</f:section>

</html>
