<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" xmlns:core="http://typo3.org/ns/TYPO3/CMS/Core/ViewHelpers" data-namespace-typo3-fluid="true">
    <div class="workspace-panel" id="workspace-panel">
        <form id="workspace-settings-form">
            <div class="row row-cols-auto align-items-end g-3 mb-4">
                <div class="col">
                    <label for="depth" class="form-label"><f:translate key="LLL:EXT:workspaces/Resources/Private/Language/locallang.xlf:workingTable.depth" /></label>
                    <select name="depth" id="depth" class="form-select">
                        <option value="0" {f:if(condition: '{selectedDepth} == 0', then: 'selected')}><f:translate key="LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.depth_0" /></option>
                        <option value="1" {f:if(condition: '{selectedDepth} == 1', then: 'selected')}><f:translate key="LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.depth_1" /></option>
                        <option value="2" {f:if(condition: '{selectedDepth} == 2', then: 'selected')}><f:translate key="LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.depth_2" /></option>
                        <option value="3" {f:if(condition: '{selectedDepth} == 3', then: 'selected')}><f:translate key="LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.depth_3" /></option>
                        <option value="4" {f:if(condition: '{selectedDepth} == 4', then: 'selected')}><f:translate key="LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.depth_4" /></option>
                        <option value="999" {f:if(condition: '{selectedDepth} == 999', then: 'selected')}><f:translate key="LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.depth_infi" /></option>
                    </select>
                </div>
                <div class="col">
                    <label for="languages" class="form-label"><f:translate key="LLL:EXT:workspaces/Resources/Private/Language/locallang.xlf:workingTable.languages" /></label>
                    <div class="input-group">
                        <span class="input-group-addon input-group-icon">
                            <f:for each="{availableLanguages}" as="language"><f:if condition="{language.active}"><core:icon identifier="{language.flagIcon}" /></f:if></f:for>
                        </span>
                        <select name="languages" id="languages" class="form-select">
                            <f:for each="{availableLanguages}" as="language">
                                <option value="{language.uid}" {f:if(condition: '{language.active}', then: 'selected')} data-icon="{core:icon(identifier: '{language.flagIcon}') -> f:format.htmlspecialchars()}">{language.title}</option>
                            </f:for>
                        </select>
                    </div>
                </div>
                <div class="col">
                    <label for="stageFilter" class="form-label"><f:translate key="LLL:EXT:workspaces/Resources/Private/Language/locallang.xlf:workingTable.stages" /></label>
                    <select name="stages" id="stageFilter" class="form-select">
                        <f:for each="{availableSelectStages}" as="availableSelectStage">
                            <option value="{availableSelectStage.uid}" {f:if(condition: '{availableSelectStage.uid} == {selectedStage}', then: 'selected')}>{availableSelectStage.label}</option>
                        </f:for>
                    </select>
                </div>
                <div class="col">
                    <div class="input-group">
                        <input class="form-control t3js-clearable" type="text" name="search-text" placeholder="{f:translate(key: 'LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.enterSearchString')}">
                        <button type="submit" class="btn btn-default disabled"><core:icon identifier="actions-search" /></button>
                    </div>
                </div>
            </div>
        </form>
        <f:render section="multiRecordSelectionActions" arguments="{stageActions: stageActions, availableStages: availableStages, showEntireWorkspaceDropDown: showEntireWorkspaceDropDown, position: 'top'}" />
        <div id="workspace-content-wrapper">
            <div id="workspace-contents" class="table-fit mb-0" style="display: none">
                <table class="table table-striped">
                    <thead>
                    <tr>
                        <th>
                            <div class="btn-group dropdown position-static">
                                <button type="button" class="btn btn-borderless dropdown-toggle t3js-multi-record-selection-check-actions-toggle" data-bs-toggle="dropdown" data-bs-boundary="window" aria-expanded="false">
                                    <core:icon identifier="content-special-div" size="small" />
                                </button>
                                <ul class="dropdown-menu t3js-multi-record-selection-check-actions">
                                    <li>
                                        <button type="button" class="btn btn-link dropdown-item disabled" data-multi-record-selection-check-action="check-all" title="{f:translate(key: 'LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.checkAll')}">
                                            <core:icon identifier="actions-check-square" size="small" /> <f:translate key="LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.checkAll" />
                                        </button>
                                    </li>
                                    <li>
                                        <button type="button" class="btn btn-link dropdown-item disabled" data-multi-record-selection-check-action="check-none" title="{f:translate(key: 'LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.uncheckAll')}">
                                            <core:icon identifier="actions-square" size="small" /> <f:translate key="LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.uncheckAll" />
                                        </button>
                                    </li>
                                    <li>
                                        <button type="button" class="btn btn-link dropdown-item" data-multi-record-selection-check-action="toggle" title="{f:translate(key: 'LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.toggleSelection')}">
                                            <core:icon identifier="actions-document-select" size="small" /> <f:translate key="LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.toggleSelection" />
                                        </button>
                                    </li>
                                </ul>
                            </div>
                        </th>
                        <th><f:translate key="column.wsTitle" /></th>
                        <th><f:translate key="column.liveTitle" /></th>
                        <th><f:translate key="column.stage" /></th>
                        <th><f:translate key="column.integrity" /></th>
                        <th><core:icon identifier="flags-multiple" size="small" /></th>
                        <th></th>
                    </tr>
                    </thead>
                    <tbody data-multi-record-selection-row-selection="true">
                    </tbody>
                </table>
            </div>
            <div id="workspace-contents-empty" style="display: none">
                <div class="shadow-sm bg-info bg-gradient p-3">
                    <f:translate key="noResults" />
                </div>
            </div>
        </div>
        <f:render section="multiRecordSelectionActions" arguments="{stageActions: stageActions, availableStages: availableStages, showEntireWorkspaceDropDown: showEntireWorkspaceDropDown, position: 'bottom'}" />
        <nav id="workspace-pagination" class="mt-3"></nav>
    </div>
</html>

<f:section name="multiRecordSelectionActions">
    <div class="row workspace-actions multi-record-selection-actions-wrapper gx-0 hidden">
        <f:if condition="{stageActions} && {showEntireWorkspaceDropDown}">
            <div class="col-auto">
                <div class="row row-cols-auto align-items-center g-2 me-2">
                    <label class="col" for="mass-action-{position}">
                        <strong><f:translate key="entireWorkspace" /></strong>
                    </label>
                    <div class="col">
                        <select name="mass-action" id="mass-action-{position}" class="form-select form-select-sm">
                            <option value=""><f:translate key="chooseMassAction" /></option>
                            <f:for each="{stageActions}" as="stageAction">
                                <option value="{stageAction.action}">{stageAction.title}</option>
                            </f:for>
                        </select>
                    </div>
                </div>
            </div>
        </f:if>
        <div class="col-auto">
            <div class="row row-cols-auto align-items-center g-2 t3js-multi-record-selection-actions hidden">
                <div class="col">
                    <strong><f:translate key="LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.selection"/></strong>
                </div>
                <div class="col">
                    <select name="stage-action" class="form-select form-select-sm">
                        <option value=""><f:translate key="chooseAction" /></option>
                        <f:for each="{availableStages}" as="availableStage">
                            <option value="{availableStage.uid}">{availableStage.title}</option>
                        </f:for>
                    </select>
                </div>
                <div class="col">
                    <select name="selection-action" class="form-select form-select-sm">
                        <option value=""><f:translate key="chooseSelectionAction" /></option>
                        <f:for each="{stageActions}" as="stageAction">
                            <option value="{stageAction.action}">{stageAction.title}</option>
                        </f:for>
                    </select>
                </div>
            </div>
        </div>
    </div>
</f:section>
