@extends('layouts.guest')

@section('title', 'Set new password')

@section('content')
    <div class="mb-7">
        <p class="text-xs font-medium uppercase tracking-widest text-muted-foreground">Account recovery</p>
        <h2 class="mt-2 text-2xl font-semibold tracking-tight text-foreground">Choose a new password</h2>
        <p class="mt-2 text-sm text-muted-foreground">Create a strong password you have not used for this account before.</p>
    </div>

    <form method="POST" action="{{ route('password.update') }}" class="space-y-5">
        @csrf
        <input type="hidden" name="token" value="{{ $token }}">

        <div>
            <label for="email" class="mf-field-label">Email address</label>
            <input id="email" name="email" type="email" value="{{ old('email', $email) }}" autocomplete="email" required class="mf-input @error('email') is-invalid @enderror">
            @error('email')<p class="mf-field-error">{{ $message }}</p>@enderror
        </div>

        <div>
            <label for="password" class="mf-field-label">New password</label>
            <input id="password" name="password" type="password" autocomplete="new-password" autofocus required class="mf-input @error('password') is-invalid @enderror" placeholder="Minimum 8 characters">
            @error('password')<p class="mf-field-error">{{ $message }}</p>@enderror
        </div>

        <div>
            <label for="password_confirmation" class="mf-field-label">Confirm new password</label>
            <input id="password_confirmation" name="password_confirmation" type="password" autocomplete="new-password" required class="mf-input" placeholder="Repeat your new password">
        </div>

        <button type="submit" class="mf-btn mf-btn-primary h-10 w-full">Update password</button>
    </form>
@endsection
