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

<f:layout name="Module" />

<f:section name="Content">

    <div class="typo3-workspace-topbar t3js-workspace-topbar">
        <div class="typo3-workspace-topbar-container" role="navigation">
            <div class="typo3-workspace-topbar-site">
                <a class="typo3-workspace-topbar-site-logo" href="{logoLink}" target="_blank" rel="noreferrer">
                    <img src="{f:uri.resource(path: 'EXT:backend/Resources/Public/Images/typo3_logo_orange.svg')}" width="22" height="22" title="TYPO3 Content Management System" alt="" >
                </a>
                <span class="typo3-workspace-topbar-site-name">{activeWorkspace}</span>
            </div>
            <f:if condition="{liveUrl}">
                <div class="typo3-workspace-topbar-slider t3js-stage-slider-container">
                    <span><f:translate key="LLL:EXT:workspaces/Resources/Private/Language/locallang.xlf:window.version.published" /></span>
                    <div class="form-range form-range-sm" style="width: 150px;">
                        <input type="range" class="form-range-input t3js-stage-slider" min="0" max="100" value="100" step="1">
                    </div>
                    <span><f:translate key="LLL:EXT:workspaces/Resources/Private/Language/locallang.xlf:window.version.staged" /></span>
                </div>
            </f:if>
            <div class="typo3-workspace-topbar-actions">
                <div class="typo3-workspace-topbar-action typo3-workspace-topbar-action-buttons t3js-stage-buttons"></div>
                <div class="typo3-workspace-topbar-action typo3-workspace-topbar-action-mode t3js-preview-mode">
                    <f:if condition="{liveUrl}">
                        <f:then>
                            <div class="btn-group">
                                <button
                                    type="button"
                                    class="btn btn-sm btn-default dropdown-toggle"
                                    data-bs-toggle="dropdown"
                                    aria-haspopup="true"
                                    aria-expanded="false"
                                >
                                    <span class="t3js-active-preview-mode" data-active-preview-mode="{firstPreviewMode}"><f:translate key="LLL:EXT:workspaces/Resources/Private/Language/locallang.xlf:preview.mode{firstPreviewMode -> f:format.case(mode: 'capital')}" /></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-right">
                                    <f:for each="{splitPreviewModes}" as="mode">
                                        <li>
                                            <a href="#" class="dropdown-item" data-preview-mode="{mode}">
                                                <f:translate key="LLL:EXT:workspaces/Resources/Private/Language/locallang.xlf:preview.mode{mode -> f:format.case(mode: 'capital')}" />
                                            </a>
                                        </li>
                                    </f:for>
                                </ul>
                            </div>
                        </f:then>
                        <f:else>
                            <span class="t3js-active-preview-mode" data-active-preview-mode="none"><f:translate key="LLL:EXT:workspaces/Resources/Private/Language/locallang.xlf:info.newpage.detail" extensionName="workspaces" /></span>
                        </f:else>
                    </f:if>
                </div>
            </div>
        </div>
    </div>

    <div class="typo3-workspace-preview typo3-workspace-preview-{firstPreviewMode} t3js-workspace-preview">
        <f:if condition="{liveUrl}">
            <iframe class="typo3-workspace-view-live t3js-workspace-view-live" src="{liveUrl}" style="height: 0px;" title="{f:translate(key: 'LLL:EXT:workspaces/Resources/Private/Language/locallang.xlf:iframe.livePreview')}"></iframe>
        </f:if>
        <iframe class="typo3-workspace-view-workspace t3js-workspace-view-workspace" src="{wsUrl}" id="workspace-view" title="{f:translate(key: 'LLL:EXT:workspaces/Resources/Private/Language/locallang.xlf:iframe.workspacePreview', arguments: {0: activeWorkspace})}"></iframe>
    </div>

</f:section>

</html>
