<div class="space-y-4">

    <x-portal.card :title="__('اللغة')">
        <div class="flex gap-2">
            @foreach(['ar' => 'العربية', 'en' => 'English'] as $code => $label)
                <button type="button" wire:click="setLocale('{{ $code }}')"
                        class="flex-1 rounded-xl border px-4 py-2.5 text-sm font-semibold"
                        style="{{ $locale === $code
                            ? 'background: var(--brand-500); color: var(--brand-fg); border-color: var(--brand-500);'
                            : 'border-color: var(--portal-border); color: var(--portal-muted);' }}"
                        @if($locale === $code) aria-current="true" @endif>
                    {{ $label }}
                </button>
            @endforeach
        </div>
    </x-portal.card>

    <x-portal.card :title="__('الإشعارات')">
        <p class="mb-3 text-[11px] leading-relaxed" style="color: var(--portal-muted);">
            {{ __('اختر ما يصلك وعلى أي قناة. لا تشمل هذه الإعدادات الرسائل الضرورية مثل تأكيد الدفع.') }}
        </p>

        <div class="space-y-4">
            @foreach($events as $event => $eventLabel)
                <fieldset>
                    <legend class="text-sm font-semibold">{{ __($eventLabel) }}</legend>
                    <div class="mt-2 flex flex-wrap gap-x-4 gap-y-2">
                        @foreach($channels as $channel => $channelLabel)
                            <label class="flex items-center gap-1.5 text-[11px]">
                                <input type="checkbox"
                                       wire:model="preferences.{{ $event }}.{{ $channel }}"
                                       class="h-4 w-4 rounded"
                                       style="accent-color: var(--brand-500);">
                                <span style="color: var(--portal-muted);">{{ __($channelLabel) }}</span>
                            </label>
                        @endforeach
                    </div>
                </fieldset>
            @endforeach
        </div>

        <button type="button" wire:click="save"
                class="mt-4 w-full rounded-xl px-4 py-2.5 text-sm font-bold"
                style="background: var(--brand-500); color: var(--brand-fg);">
            {{ __('حفظ') }}
        </button>
    </x-portal.card>

    <x-portal.card :title="__('الأجهزة المسجَّلة')">
        {{-- Push is the one channel whose recipients a member cannot otherwise
             see: an old phone or a browser at work keeps receiving silently. --}}
        @forelse($devices as $device)
            <div class="flex items-center justify-between gap-3 border-b py-2.5 last:border-0"
                 style="border-color: var(--portal-border);">
                <div class="min-w-0">
                    <p class="truncate text-sm font-semibold">
                        {{ $device->device_name ?: ($device->platform === 'web' ? __('متصفح') : __('هاتف')) }}
                    </p>
                    <p class="truncate text-[11px]" style="color: var(--portal-muted);">
                        {{ $device->platform }}
                        @if($device->last_used_at) · {{ $device->last_used_at->diffForHumans() }} @endif
                    </p>
                </div>
                <button type="button" wire:click="forgetDevice({{ $device->id }})"
                        class="shrink-0 text-xs font-semibold" style="color: var(--portal-danger-ink);">
                    {{ __('إلغاء') }}
                </button>
            </div>
        @empty
            <p class="py-2 text-xs" style="color: var(--portal-muted);">
                {{ __('لا توجد أجهزة مسجَّلة لاستقبال الإشعارات') }}
            </p>
        @endforelse
    </x-portal.card>
</div>
