@extends('layouts.vpm-auth')

@section('title', 'Reset Password')

@section('content')
<p class="vpm-auth-ref__footer" style="margin:0 0 8px;text-align:center;width:100%;">
    Choose a new password for your account.
</p>

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

    <x-vpm.auth-field
        name="email"
        label="Email"
        type="email"
        icon="email"
        :value="$email"
        :required="true"
        autocomplete="email"
        :autofocus="true"
    />

    <x-vpm.auth-field
        name="password"
        label="New password"
        type="password"
        :toggle="true"
        :required="true"
        autocomplete="new-password"
        :minlength="8"
        hint="At least 8 characters."
        hintId="reset-password-hint"
    />

    <x-vpm.auth-field
        name="password_confirmation"
        label="Confirm password"
        type="password"
        :toggle="true"
        :required="true"
        autocomplete="new-password"
    />

    <button type="submit" class="vpm-auth-ref__submit" data-loading-label="Updating password…">
        Reset password
    </button>
</form>

<p class="vpm-auth-ref__footer">
    <a href="{{ route('login') }}" class="vpm-auth-ref__link">Back to Sign In</a>
</p>
@endsection