<!--
/**
 * Copyright (c) 2016 maijindou.com. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<div data-bind="collapsible"
     class="admin__action-dropdown-wrap admin__data-grid-action-columns"
     data-role="toolbar-menu-item">
    <button
        class="admin__action-dropdown"
        type="button"
        data-bind="toggleCollapsible"
        data-toggle="dropdown"
        aria-haspopup="true">
        <span class="admin__action-dropdown-text" data-bind="i18n: 'Columns'"></span>
    </button>
    <div data-bind="css: {_overflow: hasOverflow()}" class="admin__action-dropdown-menu admin__data-grid-action-columns-menu">
        <div class="admin__action-dropdown-menu-header">
            <span data-bind="text: getHeaderMessage()"></span>
        </div>
        <div class="admin__action-dropdown-menu-content">
            <div class="admin__field-option" data-bind="repeat: {foreach: elems, item: '$col'}">
                <input
                    class="admin__control-checkbox"
                    type="checkbox"
                    data-bind="
                        attr: {
                            id: ++ko.bindingHandlers['uniqueName'].currentIndex + '_uid'
                        },
                        disable: isDisabled($col()),
                        checked: $col().visible"/>
                <label
                    class="admin__field-label"
                    data-bind="
                        text: $col().label,
                        attr: {
                            for: ko.bindingHandlers['uniqueName'].currentIndex + '_uid'
                        }"></label>
            </div>
        </div>
        <div class="admin__action-dropdown-menu-footer">
            <div class="admin__action-dropdown-footer-secondary-actions">
                <button data-bind="click: reset" class="action-tertiary" type="button">
                    <span data-bind="i18n: 'Reset'"></span>
                </button>
            </div>
            <div class="admin__action-dropdown-footer-main-actions">
                <button data-bind="click: cancel, closeCollapsible" class="action-tertiary" type="button">
                    <span data-bind="i18n: 'Cancel'"></span>
                </button>
            </div>
        </div>
    </div>
</div