@props([
    'id' => 'column-visibility',
])
<div class="column-visibility-wrap" id="{{ $id }}" @click.outside="close()">
    <button
        type="button"
        class="column-visibility-btn"
        @click="toggle()"
        title="Tùy chỉnh cột hiển thị"
        :class="{ 'is-active': open }"
    >
        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3m0 1a1 1 0 0 1 1 -1h16a1 1 0 0 1 1 1v16a1 1 0 0 1 -1 1h-16a1 1 0 0 1 -1 -1zm6 -1v18m6 -18v18" /></svg>
    </button>
    <div
        class="column-visibility-dropdown"
        x-show="open"
        x-cloak
    >
        <div class="column-visibility-dropdown-header">
            <span>Hiển thị cột</span>
        </div>
        <div class="column-visibility-dropdown-list">
            <template x-for="col in columns" :key="col.key">
                <label class="column-visibility-item">
                    <input
                        type="checkbox"
                        :checked="visible.indexOf(col.key) !== -1"
                        @change="toggleColumn(col.key)"
                    />
                    <span x-text="col.label"></span>
                </label>
            </template>
        </div>
        <div class="column-visibility-dropdown-footer">
            <button type="button" class="column-visibility-action-btn" @click="showAll()">
                @svg('fas-check-double') Hiện tất cả
            </button>
            <button type="button" class="column-visibility-action-btn" @click="hideAll()">
                @svg('fas-eye-slash') Ẩn tất cả
            </button>
        </div>
    </div>
</div>
