@if (data_get($setUp, 'header.toggleColumns'))
    <div
        x-data="{ open: false }"
        class="mr-2 mt-2 sm:mt-0"
        @click.outside="open = false"
    >
        <button
            data-cy="toggle-columns-{{ $tableName }}"
            @click.prevent="open = ! open"
            class="focus:ring-primary-600 focus-within:focus:ring-primary-600 focus-within:ring-primary-600 dark:focus-within:ring-primary-600 flex rounded-md ring-1 transition focus-within:ring-2 dark:ring-pg-primary-600 dark:text-pg-primary-300 text-gray-600 ring-gray-300 dark:bg-pg-primary-800 bg-white dark:placeholder-pg-primary-400 rounded-md border-0 bg-transparent py-2 px-3 ring-0 placeholder:text-gray-400 focus:outline-none sm:text-sm sm:leading-6 w-auto"
        >
            <div class="flex">
                <x-livewire-powergrid::icons.eye-off class="w-5 h-5 text-pg-primary-500 dark:text-pg-primary-300" />
            </div>
        </button>

        <div
            x-cloak
            x-show="open"
            x-transition:enter="transition ease-out duration-100"
            x-transition:enter-start="transform opacity-0 scale-95"
            x-transition:enter-end="transform opacity-100 scale-100"
            x-transition:leave="transition ease-in duration-75"
            x-transition:leave-start="transform opacity-100 scale-100"
            x-transition:leave-end="transform opacity-0 scale-95"
            class="toggle-columns-base group absolute z-10 mt-2 w-64 rounded-md dark:bg-pg-primary-700 bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
            tabindex="-1"
            @keydown.tab="open = false"
            @keydown.enter.prevent="open = false;"
            @keyup.space.prevent="open = false;"
        >
            @php
                $columnOrderMap = array_flip(array_keys($this->columnOrderItems()));
                $orderedVisibleColumns = collect($this->visibleColumns)
                    ->sortBy(function ($column) use ($columnOrderMap) {
                        $field = data_get($column, 'field');

                        return $columnOrderMap[$field] ?? PHP_INT_MAX;
                    })
                    ->values();
            @endphp

            <div role="none">
                @foreach ($orderedVisibleColumns as $column)
                    @php
                        $field = data_get($column, 'field');
                        $isAction = (bool) data_get($column, 'isAction');
                        $canReorder = filled($field) && !$isAction && array_key_exists($field, $this->columnOrderItems());
                    @endphp

                    <div
                        wire:key="toggle-column-{{ $isAction ? 'actions' : $field }}"
                        data-cy="toggle-field-{{ $isAction ? 'actions' : $field }}"
                        wire:click="$dispatch('pg:toggleColumn-{{ $tableName }}', { field: '{{ $field }}'})"
                        @class([
                            'font-semibold bg-pg-primary-100 dark:bg-pg-primary-800 ' => data_get($column, 'hidden'),
                            'py-1' => $loop->first || $loop->last,
                            'cursor-pointer text-sm flex items-center justify-between px-4 py-2 text-pg-primary-800 hover:bg-pg-primary-100 hover:text-black-300 dark:text-pg-primary-200 dark:hover:bg-pg-primary-800',
                        ])
                    >
                        <div class="truncate pr-3">
                            {!! data_get($column, 'title') !!}
                        </div>

                        <div class="flex items-center gap-2 shrink-0">
                            @if (!data_get($column, 'hidden'))
                                <x-livewire-powergrid::icons.eye class="h-5 w-5 text-pg-primary-200 dark:text-pg-primary-300 shrink-0" />
                            @else
                                <x-livewire-powergrid::icons.eye-off class="h-5 w-5 text-pg-primary-500 dark:text-pg-primary-300 shrink-0" />
                            @endif

                            @if ($canReorder)
                                <button
                                    type="button"
                                    x-on:click.prevent.stop="$wire.moveColumnUp(@js($field))"
                                    @disabled(!$this->canMoveColumnUp($field))
                                    class="rounded border border-pg-primary-200 px-1.5 py-0.5 text-xs leading-none transition hover:bg-pg-primary-100 disabled:cursor-not-allowed disabled:opacity-40 dark:border-pg-primary-500 dark:hover:bg-pg-primary-800"
                                >
                                    ↑
                                </button>

                                <button
                                    type="button"
                                    x-on:click.prevent.stop="$wire.moveColumnDown(@js($field))"
                                    @disabled(!$this->canMoveColumnDown($field))
                                    class="rounded border border-pg-primary-200 px-1.5 py-0.5 text-xs leading-none transition hover:bg-pg-primary-100 disabled:cursor-not-allowed disabled:opacity-40 dark:border-pg-primary-500 dark:hover:bg-pg-primary-800"
                                >
                                    ↓
                                </button>
                            @endif
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>

    @if (method_exists($this, 'showsSavedFiltersToolbar') && $this->showsSavedFiltersToolbar())
        @include('livewire.powergrid.saved-filters-toolbar')
    @endif

@endif