@extends('layouts.auth')
@section('title', 'Reset Password')
@section('content')
    <h2 class="text-xl font-semibold text-white mb-6">Set new password</h2>
    <form method="POST" action="{{ route('auth.reset-password') }}" class="space-y-5">
        @csrf
        <input type="hidden" name="token" value="{{ $token }}">
        <input type="hidden" name="email" value="{{ $email }}">
        <div>
            <label class="block text-sm font-medium text-slate-300 mb-2">New password</label>
            <input type="password" name="password" placeholder="Min 8 chars, upper + number" required autofocus
                class="w-full px-4 py-3 rounded-xl bg-white/5 border border-white/10 text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:border-transparent transition @error('password') border-red-500/50 @enderror">
            @error('password')<p class="mt-2 text-sm text-red-400">{{ $message }}</p>@enderror
        </div>
        <div>
            <label class="block text-sm font-medium text-slate-300 mb-2">Confirm new password</label>
            <input type="password" name="password_confirmation" placeholder="••••••••" required
                class="w-full px-4 py-3 rounded-xl bg-white/5 border border-white/10 text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:border-transparent transition">
        </div>
        @error('token')<div class="p-3 rounded-xl bg-red-500/10 border border-red-500/20"><p class="text-sm text-red-400">{{ $message }}</p></div>@enderror
        <button type="submit" class="w-full py-3 px-4 bg-brand-500 hover:bg-brand-600 text-white font-semibold rounded-xl transition shadow-lg shadow-brand-500/25">
            Reset password
        </button>
    </form>
@endsection