@extends('layouts.auth')

@section('content')
    <div class="mb-6">
        <h1 class="text-2xl font-semibold tracking-tight text-white">Reset your password</h1>
        <p class="mt-2 text-sm leading-6 text-slate-400">Enter your email and we will send you a link to choose a new password.</p>
    </div>

    @if (session('status'))
        <div class="mb-5 rounded-xl border border-emerald-300/20 bg-emerald-300/10 px-4 py-3 text-sm text-emerald-200">{{ session('status') }}</div>
    @endif
    @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.email') }}" method="POST" class="space-y-5">
        @csrf
        <div>
            <label for="email" class="text-sm font-medium text-slate-200">Email</label>
            <input id="email" name="email" type="email" value="{{ 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>
        <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">Email reset link</button>
    </form>

    <p class="mt-6 text-center text-sm text-slate-500"><a href="{{ route('login') }}" class="text-cyan-300 hover:text-cyan-200">Back to login</a></p>
@endsection