<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"
>

<form id="columnSelectorForm">

    <div class="sticky-form-actions">
        <label
            for="columns-filter-input"
            class="visually-hidden"
        >
            <f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang_column_selector.xlf:columnsFilter" />
        </label>
        <input
            type="search"
            autocomplete="off"
            id="columns-filter-input"
            name="columns-filter"
            class="form-control"
            value=""
            placeholder="{f:translate(key: 'LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.enterSearchString')}"
        >
        <div class="btn-group t3js-column-selector-actions">
            <button type="button" class="btn btn-default disabled" data-action="select-all">
                <core:icon identifier="actions-check-square"/> <f:translate key="LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.checkAll" />
            </button>
            <button type="button" class="btn btn-default disabled" data-action="select-none">
                <core:icon identifier="actions-square"/> <f:translate key="LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.uncheckAll" />
            </button>
            <button type="button" class="btn btn-default" data-action="select-toggle">
                <core:icon identifier="actions-document-select"/> <f:translate key="LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.toggleSelection" />
            </button>
        </div>
    </div>

    <div class="row">
        <f:for each="{columns}" as="column">
            <div class="col-6 t3js-column-selector-container">
                <div class="mt-2 form-check form-check-type-icon-toggle {f:if(condition: column.disabled, then: 'disabled')}">
                    <input
                        type="checkbox"
                        id="select-column-{table}-{column.name}"
                        name="selectedColumns[]"
                        class="form-check-input t3js-column-selector"
                        value="{column.name}"
                        {f:if(condition:'{column.selected}', then:' checked')}
                        {f:if(condition:'{column.disabled}', then: 'disabled')}
                    />
                    <label class="form-check-label" for="select-column-{table}-{column.name}">
                        <span class="form-check-label-icon">
                            <span class="form-check-label-icon-checked">
                                <core:icon identifier="actions-check" size="small" alternativeMarkupIdentifier="inline" />
                            </span>
                            <span class="form-check-label-icon-unchecked">
                                <core:icon identifier="miscellaneous-placeholder" size="small" alternativeMarkupIdentifier="inline" />
                            </span>
                        </span>
                        <f:if condition="{column.pseudo} && {column.label}">
                            <f:then>
                                <span><i>{column.label}</i></span>
                            </f:then>
                            <f:else>
                                <f:if condition="{column.label}">
                                    <span>{column.label}</span>
                                </f:if>
                                <span class="text-variant">[{column.name}]</span>
                            </f:else>
                        </f:if>
                    </label>
                </div>
                <f:if condition="{column.disabled}">
                    <input type="hidden" name="selectedColumns[]" value="{column.name}" />
                </f:if>
            </div>
        </f:for>
    </div>

    <input type="hidden" name="table" value="{table}">

</form>

</html>
