@php
    $badge = config('dashboard.auth.badge') ?: config('dashboard.brand_name');
    $isRtl = in_array(app()->getLocale(), ['ar'], true);
@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>

        {{-- Heading --}}
        <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.welcome_back') }}
        </h1>

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

        {{-- Animated divider --}}
        <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 (session('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>{{ session('status') }}</span>
            </div>
        @endif

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

            {{-- Password --}}
            <div>
                <label for="login-password" class="mb-2 block text-sm font-medium" style="color: var(--surface-foreground);">
                    {{ __('dashboard::dashboard.fields.password') }}
                </label>
                <div class="relative">
                    <input id="login-password"
                           :type="showPassword ? 'text' : 'password'"
                           wire:model.blur="password"
                           autocomplete="current-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);"
                            :aria-label="showPassword ? '{{ __('dashboard::dashboard.fields.password') }}' : '{{ __('dashboard::dashboard.fields.password') }}'">
                        <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>

            {{-- Remember + Forgot --}}
            <div class="flex items-center justify-between gap-3 pt-1">
                <label class="inline-flex cursor-pointer items-center gap-2.5 select-none">
                    <input type="checkbox" wire:model="remember" class="dash-auth-checkbox">
                    <span class="text-sm font-medium" style="color: var(--surface-foreground);">
                        {{ __('dashboard::dashboard.auth.remember_me') }}
                    </span>
                </label>

                <a href="{{ route('dashboard.password.request') }}"
                   wire:navigate
                   class="dash-auth-link group">
                    <span class="dash-auth-link-underline">
                        {{ __('dashboard::dashboard.auth.forgot.link') }}
                    </span>
                </a>
            </div>

            {{-- Submit --}}
            <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.sign_in') }}
                    <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.signing_in') }}
                </span>
            </button>

            <p class="mt-2 text-center text-xs leading-relaxed"
               style="color: color-mix(in oklch, var(--foreground) 50%, transparent);">
                {{ __('dashboard::dashboard.auth.terms') }}
            </p>
        </form>
    </x-dashboard::auth-shell>
</div>