<div class="dropdown tp-theme-picker">
    <button class="btn btn-outline-secondary dropdown-toggle d-flex align-items-center gap-2" type="button" data-bs-toggle="dropdown" aria-expanded="false" aria-label="{{ __('ui.theme') }}">
        <span data-theme-current-icon aria-hidden="true">◐</span><span data-theme-current-label>{{ __('ui.system') }}</span>
    </button>
    <ul class="dropdown-menu dropdown-menu-end shadow-sm">
        @foreach(['light' => ['☀', __('ui.light')], 'dark' => ['☾', __('ui.dark')], 'system' => ['◐', __('ui.system')]] as $value => [$icon, $label])
            <li><button class="dropdown-item d-flex align-items-center gap-2" type="button" data-theme-value="{{ $value }}" data-theme-label="{{ $label }}" data-theme-icon="{{ $icon }}"><span aria-hidden="true">{{ $icon }}</span><span>{{ $label }}</span><span class="ms-auto" data-theme-check hidden aria-hidden="true">✓</span></button></li>
        @endforeach
    </ul>
</div>
