@php
    $field = 'h-11 w-full rounded-md border border-line bg-inset px-3 font-mono text-sm text-ink placeholder:text-ink-4 focus:border-accent/40 focus:outline-none';
    $label = 'mb-1.5 block font-mono text-[11px] uppercase tracking-wider text-ink-3';
    $err = 'mt-1.5 flex items-center gap-1.5 font-mono text-[11px] text-offline';
@endphp

<div class="space-y-7">
    <div class="space-y-1.5">
        <p class="font-mono text-[10px] font-semibold uppercase tracking-[0.18em] text-accent-text">{{ __('auth.control_plane') }}</p>
        <h1 class="font-display text-2xl font-bold tracking-tight text-ink">{{ __('auth.login_heading') }}</h1>
        <p class="font-mono text-xs text-ink-3">{{ __('auth.login_subtitle') }}</p>
    </div>

    @if (session('status'))
        <div class="flex items-start gap-2.5 rounded-md border border-online/25 bg-online/10 px-4 py-3">
            <x-icon name="shield" class="mt-0.5 h-4 w-4 shrink-0 text-online" />
            <p class="text-sm text-ink-2">{{ session('status') }}</p>
        </div>
    @endif

    <form wire:submit="authenticate" class="space-y-4">
        <div>
            <label for="email" class="{{ $label }}">{{ __('auth.email') }}</label>
            <input wire:model="email" id="email" type="text" autocomplete="username" autofocus
                   class="{{ $field }}" placeholder="admin@clusev.local" />
            @error('email') <p class="{{ $err }}"><x-icon name="alert" class="h-3.5 w-3.5 shrink-0" />{{ $message }}</p> @enderror
        </div>

        <div>
            <label for="password" class="{{ $label }}">{{ __('auth.password') }}</label>
            <div class="relative" x-data="{ show: false }">
                <input wire:model="password" id="password" :type="show ? 'text' : 'password'" autocomplete="current-password"
                       class="{{ $field }} pr-11" placeholder="••••••••" />
                <button type="button" @click="show = !show" :aria-label="show ? '{{ __('auth.hide_password') }}' : '{{ __('auth.toggle_password') }}'"
                        class="absolute inset-y-0 right-0 flex w-11 items-center justify-center text-ink-3 transition-colors hover:text-accent-text focus:text-accent-text focus:outline-none">
                    <svg x-show="!show" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/></svg>
                    <svg x-show="show" x-cloak class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49"/><path d="M14.084 14.158a3 3 0 0 1-4.242-4.242"/><path d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143"/><path d="m2 2 20 20"/></svg>
                </button>
            </div>
            @error('password') <p class="{{ $err }}"><x-icon name="alert" class="h-3.5 w-3.5 shrink-0" />{{ $message }}</p> @enderror
            <a href="{{ route('password.request') }}" wire:navigate class="mt-1.5 block font-mono text-[11px] text-ink-3 transition-colors hover:text-accent-text">{{ __('auth.forgot_link') }}</a>
        </div>

        <x-checkbox wire:model="remember" label="{{ __('auth.remember_me') }}" />

        <x-btn variant="primary" size="lg" type="submit" class="w-full" wire:loading.attr="disabled" wire:target="authenticate">
            <svg wire:loading wire:target="authenticate" class="h-4 w-4 animate-spin" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M21 12a9 9 0 1 1-6.219-8.56" stroke-linecap="round" /></svg>
            <span wire:loading.remove wire:target="authenticate">{{ __('auth.login_submit') }}</span>
            <span wire:loading wire:target="authenticate">{{ __('auth.checking') }}</span>
        </x-btn>
    </form>

    <div class="flex items-center gap-3">
        <span class="h-px flex-1 bg-line"></span>
        <span class="font-mono text-[10px] uppercase tracking-[0.14em] text-ink-4">{{ __('auth.secured') }}</span>
        <span class="h-px flex-1 bg-line"></span>
    </div>

    <p class="flex items-start gap-2 font-mono text-[11px] leading-relaxed text-ink-4">
        <x-icon name="shield" class="mt-px h-3.5 w-3.5 shrink-0 text-online" />
        {{ __('auth.security_note') }}
    </p>
</div>
