@props([
    'tableId',
    'columns' => [],
    'label' => null,
])

@php
    $label = $label ?: __('kview-ui-data::table.settings');
    $triggerId = $tableId.'_settings_trigger';
    $panelId = $tableId.'_settings';
@endphp

<div class="erp-table-settings">
    <x-ui.icon-button
        :id="$triggerId"
        icon="sliders"
        :label="$label"
        variant="secondary"
        class="erp-table-settings-trigger"
        data-erp-settings-trigger
        aria-haspopup="dialog"
        aria-expanded="false"
        aria-controls="{{ $panelId }}"
    />
    <div
        id="{{ $panelId }}"
        class="erp-table-settings-panel"
        data-erp-settings-panel
        role="dialog"
        aria-labelledby="{{ $triggerId }}"
        hidden
    >
        <div class="erp-table-settings-head">
            <strong>{{ __('kview-ui-data::table.columns') }}</strong>
            <button type="button" class="erp-link-button" data-erp-reset-table>{{ __('kview-ui-data::table.reset') }}</button>
        </div>
        <div class="erp-column-manager" data-erp-column-manager>
            @foreach ($columns as $column)
                <label class="erp-column-manager-item" draggable="true" data-erp-column-item="{{ $column['key'] }}">
                    <span class="erp-drag-handle"><x-ui.icon name="grip-vertical" size="15" /></span>
                    <input
                        type="checkbox"
                        data-erp-column-toggle="{{ $column['key'] }}"
                        @checked(($column['hidden'] ?? false) === false)
                        @disabled(($column['hideable'] ?? true) === false)
                    >
                    <span>{{ $column['label'] }}</span>
                </label>
            @endforeach
        </div>
    </div>
</div>