@auth
    @if(auth()->user()->hasVerifiedEmail())
    <div
        id="pwa-push-settings"
        class="rounded-2xl border border-border/60 bg-card/80 p-6 shadow-sm ring-1 ring-black/[0.04] backdrop-blur-sm dark:bg-card/90 dark:ring-white/[0.06] sm:p-8"
        data-vapid-url="{{ route('push.vapid-public-key') }}"
        data-subscribe-url="{{ route('push.subscribe') }}"
        data-unsubscribe-url="{{ route('push.unsubscribe') }}"
        data-test-url="{{ route('push.test') }}"
    >
        <div class="max-w-xl space-y-4">
            <div>
                <h2 class="text-lg font-semibold text-foreground">{{ __('Push notifications') }}</h2>
                <p class="mt-1 text-sm text-muted-foreground leading-relaxed">
                    {{ __('Get reminders and collab updates on this device when the app is in the background.') }}
                </p>
            </div>
            <p class="text-sm text-muted-foreground" data-push-status></p>
            <div class="flex flex-wrap gap-2">
                <button
                    type="button"
                    data-action="push-enable"
                    class="inline-flex min-h-11 touch-manipulation items-center justify-center rounded-xl bg-foreground px-5 py-2.5 text-sm font-semibold text-primary-foreground shadow-sm transition-opacity hover:opacity-90"
                >
                    {{ __('Enable') }}
                </button>
                <button
                    type="button"
                    data-action="push-disable"
                    class="inline-flex min-h-11 touch-manipulation items-center justify-center rounded-xl border border-border/80 bg-card px-5 py-2.5 text-sm font-medium text-foreground shadow-sm transition-colors hover:bg-secondary/60"
                >
                    {{ __('Disable') }}
                </button>
                <button
                    type="button"
                    data-action="push-test"
                    class="inline-flex min-h-11 touch-manipulation items-center justify-center rounded-xl border border-border/80 bg-secondary/40 px-5 py-2.5 text-sm font-medium text-foreground transition-colors hover:bg-secondary/60"
                >
                    {{ __('Send test') }}
                </button>
            </div>
        </div>
    </div>
    @else
        <div class="rounded-2xl border border-border/60 bg-card/80 p-6 shadow-sm ring-1 ring-black/[0.04] backdrop-blur-sm dark:bg-card/90 dark:ring-white/[0.06] sm:p-8">
            <p class="text-sm text-muted-foreground">{{ __('Verify your email to manage push notifications.') }}</p>
        </div>
    @endif
@endauth