<form id="columnSelectorForm">

    <div class="sticky-form-actions border-bottom">
        <div class="row row-cols-auto justify-content-between">
            <div class="col flex-grow-1">
                <div class="input-group">
                    <span class="input-group-addon" id="columns-filter-label"><f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang_column_selector.xlf:columnsFilter" /></span>
                    <input type="search" name="columns-filter" class="form-control" value="" aria-labelledby="columns-filter-label" placeholder="{f:translate(key: 'LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.enterSearchString')}">
                </div>
            </div>
            <div class="col">
                <div class="row row-cols-auto justify-content-end g-2 t3js-column-selector-actions">
                    <div class="col">
                        <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>
                    </div>
                    <div class="col">
                        <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>
                    </div>
                    <div class="col">
                        <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>
        </div>
    </div>

    <div class="row pt-5">
        <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-eye" size="small" alternativeMarkupIdentifier="inline" />
                            </span>
                            <span class="form-check-label-icon-unchecked">
                                <core:icon identifier="actions-eye" size="small" alternativeMarkupIdentifier="inline" />
                            </span>
                        </span>
                        <span class="form-check-label-text">
                            <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-muted text-monospace">[{column.name}]</span>
                                </f:else>
                            </f:if>
                        </span>
                    </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>
