<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<div id="typo3-topbar">
    <div class="typo3-topbar-container" role="navigation" id="typo3-top-container">
        <div class="typo3-topbar-site">
            <a class="typo3-topbar-site-logo" href="{logoLink}" target="_blank" rel="noreferrer">
                <img src="{f:uri.resource(path: 'Images/typo3_logo_orange.svg', extensionName: 'backend')}" width="22" height="22" title="TYPO3 Content Management System" alt="">
            </a>
            <span class="typo3-topbar-site-name">{activeWorkspace}</span>
        </div>
        <div class="typo3-topbar-workspace-actions">
            <f:if condition="{liveUrl}">
                <div class="workspace-action">
                    <div class="slider-wrapper">
                        <span>Published Version</span>
                        <input type="range" class="slider" id="workspace-stage-slider" min="0" max="100" value="100" step="1" style="width: 150px;">
                        <span>Staged Version</span>
                    </div>
                </div>
            </f:if>
            <div class="workspace-action t3js-stage-buttons">
                <f:render partial="Preview/StageButtons" arguments="{_all}"/>
            </div>
            <div class="workspace-action 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 active-preview-mode" data-active-preview-mode="{firstPreviewMode}"><f:translate key="preview.mode{firstPreviewMode -> f:format.case(mode: 'capital')}" extensionName="workspaces" /></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}"><span><f:translate key="preview.mode{mode -> f:format.case(mode: 'capital')}" extensionName="workspaces" /></span></a></li>
                                </f:for>
                            </ul>
                        </div>
                    </f:then>
                    <f:else>
                        <span><f:translate key="info.newpage.detail" extensionName="workspaces" /></span>
                    </f:else>
                </f:if>
            </div>
        </div>
    </div>
</div>

<div role="tabpanel" class="workspace-panel">
    <div class="tab-content">
        <div role="tabpanel" class="tab-pane active workspaces preview-mode-slider" id="visual">
            <div class="t3js-workspace-preview">
                <f:if condition="{liveUrl}">
                    <iframe src="{liveUrl}" style="height: 0px;" id="live-view" title="{f:translate(key: 'LLL:EXT:workspaces/Resources/Private/Language/locallang.xlf:iframe.livePreview')}"></iframe>
                </f:if>
                <iframe src="{wsUrl}" id="workspace-view" title="{f:translate(key: 'LLL:EXT:workspaces/Resources/Private/Language/locallang.xlf:iframe.workspacePreview', arguments: {0: activeWorkspace})}"></iframe>
            </div>
        </div>
    </div>
</div>
</html>
