<div
    x-data="{
        theme: localStorage.getItem('theme') || @js(filament()->getDefaultThemeMode()->value),
        labels: @js(['light' => __('ui.light'), 'dark' => __('ui.dark'), 'system' => __('ui.system')]),
        icons: { light: '☀', dark: '☾', system: '◐' },
        choose(value) {
            this.theme = value
            window.dispatchEvent(new CustomEvent('theme-changed', { detail: value }))
        },
    }"
    x-on:theme-changed.window="theme = $event.detail"
>
    <x-filament::dropdown placement="bottom-end" teleport>
        <x-slot name="trigger">
            <button type="button" class="tp-admin-control" aria-label="{{ __('ui.theme') }}" title="{{ __('ui.theme') }}">
                <span class="tp-admin-theme-icon" aria-hidden="true" x-text="icons[theme] || icons.system">◐</span>
                <span class="tp-admin-control-label" x-text="labels[theme] || labels.system">{{ __('ui.system') }}</span>
                <x-filament::icon icon="heroicon-m-chevron-down" class="tp-admin-control-chevron" />
            </button>
        </x-slot>

        <x-filament::dropdown.list>
            @foreach(['light' => ['heroicon-o-sun', __('ui.light')], 'dark' => ['heroicon-o-moon', __('ui.dark')], 'system' => ['heroicon-o-computer-desktop', __('ui.system')]] as $value => [$icon, $label])
                <button
                    type="button"
                    class="fi-dropdown-list-item"
                    x-on:click="choose('{{ $value }}')"
                    x-bind:aria-current="theme === '{{ $value }}' ? 'true' : null"
                >
                    <x-filament::icon :icon="$icon" class="fi-icon fi-size-md" />
                    <span class="fi-dropdown-list-item-label">{{ $label }}</span>
                    <span class="ms-auto" x-show="theme === '{{ $value }}'" aria-hidden="true">✓</span>
                </button>
            @endforeach
        </x-filament::dropdown.list>
    </x-filament::dropdown>
</div>
