@extends('layouts.auth')

@section('content')
    <div class="mb-6">
        <h1 class="text-2xl font-semibold tracking-tight text-white">Choose a new password</h1>
        <p class="mt-2 text-sm text-slate-400">Your new password must be at least eight characters.</p>
    </div>

    @if ($errors->any())
        <div class="mb-5 rounded-xl border border-rose-300/20 bg-rose-300/10 px-4 py-3 text-sm text-rose-200">{{ $errors->first() }}</div>
    @endif

    <form action="{{ route('password.update') }}" method="POST" class="space-y-5">
        @csrf
        <input type="hidden" name="token" value="{{ request()->route('token') }}">
        <div>
            <label for="email" class="text-sm font-medium text-slate-200">Email</label>
            <input id="email" name="email" type="email" value="{{ request()->email ?: old('email') }}" required autofocus autocomplete="email" class="mt-2 w-full rounded-xl border border-white/10 bg-slate-950/70 px-4 py-3 text-sm text-white outline-none focus:border-cyan-300/60 focus:ring-2 focus:ring-cyan-300/20">
        </div>
        <div>
            <label for="password" class="text-sm font-medium text-slate-200">New password</label>
            <input id="password" name="password" type="password" required autocomplete="new-password" class="mt-2 w-full rounded-xl border border-white/10 bg-slate-950/70 px-4 py-3 text-sm text-white outline-none focus:border-cyan-300/60 focus:ring-2 focus:ring-cyan-300/20">
        </div>
        <div>
            <label for="password_confirmation" class="text-sm font-medium text-slate-200">Confirm password</label>
            <input id="password_confirmation" name="password_confirmation" type="password" required autocomplete="new-password" class="mt-2 w-full rounded-xl border border-white/10 bg-slate-950/70 px-4 py-3 text-sm text-white outline-none focus:border-cyan-300/60 focus:ring-2 focus:ring-cyan-300/20">
        </div>
        <button type="submit" class="w-full rounded-xl bg-cyan-400 px-4 py-3 font-semibold text-slate-950 transition hover:bg-cyan-300">Reset password</button>
    </form>
@endsection