@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.reset.title') }}
        </h1>

        <p class="mb-3 text-sm leading-relaxed" style="color: var(--muted-foreground);">
            {{ __('dashboard::dashboard.auth.reset.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>

        <form wire:submit="submit" class="flex flex-col gap-4" x-data="{ showPassword: false, showConfirm: false }">
            {{-- Email (readonly visual feedback) --}}
            <div>
                <label for="reset-email" class="mb-2 block text-sm font-medium" style="color: var(--surface-foreground);">
                    {{ __('dashboard::dashboard.fields.email') }}
                </label>
                <input id="reset-email"
                       type="email"
                       wire:model.blur="email"
                       autocomplete="username"
                       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>

            {{-- New password --}}
            <div>
                <label for="reset-password" class="mb-2 block text-sm font-medium" style="color: var(--surface-foreground);">
                    {{ __('dashboard::dashboard.auth.reset.password') }}
                </label>
                <div class="relative">
                    <input id="reset-password"
                           :type="showPassword ? 'text' : 'password'"
                           wire:model.blur="password"
                           autocomplete="new-password"
                           required
                           placeholder="••••••••"
                           class="dash-auth-input pe-12">
                    <button type="button"
                            @click="showPassword = !showPassword"
                            class="absolute inset-y-0 end-4 grid place-items-center transition hover:text-[var(--accent)]"
                            style="color: var(--muted-foreground);">
                        <flux:icon icon="eye" class="size-5" x-show="!showPassword"/>
                        <flux:icon icon="eye-slash" class="size-5" x-show="showPassword" x-cloak/>
                    </button>
                </div>
                @error('password')
                    <p class="mt-2 text-xs font-medium text-rose-500">{{ $message }}</p>
                @enderror
            </div>

            {{-- Confirm password --}}
            <div>
                <label for="reset-password-confirm" class="mb-2 block text-sm font-medium" style="color: var(--surface-foreground);">
                    {{ __('dashboard::dashboard.auth.reset.confirmation') }}
                </label>
                <div class="relative">
                    <input id="reset-password-confirm"
                           :type="showConfirm ? 'text' : 'password'"
                           wire:model.blur="password_confirmation"
                           autocomplete="new-password"
                           required
                           placeholder="••••••••"
                           class="dash-auth-input pe-12">
                    <button type="button"
                            @click="showConfirm = !showConfirm"
                            class="absolute inset-y-0 end-4 grid place-items-center transition hover:text-[var(--accent)]"
                            style="color: var(--muted-foreground);">
                        <flux:icon icon="eye" class="size-5" x-show="!showConfirm"/>
                        <flux:icon icon="eye-slash" class="size-5" x-show="showConfirm" x-cloak/>
                    </button>
                </div>
                @error('password_confirmation')
                    <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.reset.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.reset.resetting') }}
                </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>