@php
    $badge = config('dashboard.auth.badge') ?: config('dashboard.brand_name');
@endphp

<div>
    <x-dashboard::auth-shell>
        {{-- Brand chip --}}
        <span class="dash-auth-chip mb-5">
            <flux:icon icon="sparkles" class="size-3"
                       style="filter: drop-shadow(0 0 6px color-mix(in oklch, var(--accent) 60%, transparent));"/>
            {{ $badge }}
        </span>

        <h1 class="dash-auth-heading mb-2 text-3xl font-semibold leading-tight tracking-tight sm:text-4xl md:text-[2.5rem] md:leading-[1.1]">
            {{ __('dashboard::dashboard.auth.forgot.title') }}
        </h1>

        <p class="mb-3 text-sm leading-relaxed" style="color: var(--muted-foreground);">
            {{ __('dashboard::dashboard.auth.forgot.subtitle') }}
        </p>

        <div class="mb-7 flex items-center gap-2">
            <span class="dash-auth-divider-bar"></span>
            <span class="dash-auth-divider-line"></span>
        </div>

        @if ($status)
            <div class="mb-6 flex items-center gap-3 rounded-2xl px-4 py-3 text-sm font-medium"
                 style="color: var(--accent);
                        background-color: color-mix(in oklch, var(--accent) 10%, transparent);
                        border: 1px solid color-mix(in oklch, var(--accent) 24%, transparent);">
                <flux:icon icon="check-circle" class="size-5 shrink-0"/>
                <span>{{ $status }}</span>
            </div>
        @endif

        <form wire:submit="submit" class="flex flex-col gap-4">
            <div>
                <label for="forgot-email" class="mb-2 block text-sm font-medium" style="color: var(--surface-foreground);">
                    {{ __('dashboard::dashboard.fields.email') }}
                </label>
                <input id="forgot-email"
                       type="email"
                       wire:model.blur="email"
                       autocomplete="username"
                       autofocus
                       required
                       placeholder="name@example.com"
                       class="dash-auth-input">
                @error('email')
                    <p class="mt-2 text-xs font-medium text-rose-500">{{ $message }}</p>
                @enderror
            </div>

            <button type="submit"
                    wire:loading.attr="disabled"
                    wire:target="submit"
                    class="dash-auth-submit group mt-3">
                <span class="relative flex items-center justify-center gap-2"
                      wire:loading.remove
                      wire:target="submit">
                    {{ __('dashboard::dashboard.auth.forgot.submit') }}
                    <flux:icon icon="arrow-long-right"
                               class="size-4 transition-transform group-hover:translate-x-0.5 rtl:-scale-x-100 rtl:group-hover:-translate-x-0.5"/>
                </span>
                <span class="relative flex items-center justify-center gap-2"
                      wire:loading
                      wire:target="submit">
                    <flux:icon icon="arrow-path" class="size-4 animate-spin"/>
                    {{ __('dashboard::dashboard.auth.forgot.sending') }}
                </span>
            </button>

            <div class="mt-2 flex justify-center">
                <a href="{{ route('dashboard.login') }}"
                   wire:navigate
                   class="dash-auth-link group">
                    <flux:icon icon="arrow-long-left"
                               class="size-4 transition-transform group-hover:-translate-x-0.5 rtl:-scale-x-100 rtl:group-hover:translate-x-0.5"/>
                    <span class="dash-auth-link-underline">
                        {{ __('dashboard::dashboard.auth.forgot.back') }}
                    </span>
                </a>
            </div>
        </form>
    </x-dashboard::auth-shell>
</div>