@extends('layouts.app')

@section('content')
<section class="section">
    <div class="container container-sm" style="max-width:520px">
        <div class="panel" style="padding:32px">
            <h1 style="font-size:1.5rem">Nouveau mot de passe</h1>
            <p class="muted small" style="margin:8px 0 22px">Choisissez un mot de passe que vous n'utilisez nulle part ailleurs.</p>

            <form method="post" action="{{ url('/mot-de-passe-reinitialiser') }}" class="stack">
                @csrf
                <input type="hidden" name="token" value="{{ $token }}">

                <div class="field-group">
                    <label class="label" for="email">Adresse e-mail</label>
                    <div class="input-icon">
                        <x-icon name="mail"/>
                        <input class="input @error('email') is-invalid @enderror" id="email" type="email" name="email"
                               value="{{ old('email', $email) }}" required autocomplete="email">
                    </div>
                    @error('email')<span class="field-error">{{ $message }}</span>@enderror
                </div>

                <div class="field-group">
                    <label class="label" for="password">Nouveau mot de passe</label>
                    <div class="input-icon">
                        <x-icon name="lock"/>
                        <input class="input @error('password') is-invalid @enderror" id="password" type="password"
                               name="password" required autofocus autocomplete="new-password">
                    </div>
                    <span class="hint">8 caractères minimum, dont un chiffre, une minuscule et une majuscule.</span>
                    @error('password')<span class="field-error">{{ $message }}</span>@enderror
                </div>

                <div class="field-group">
                    <label class="label" for="password_confirmation">Confirmer</label>
                    <div class="input-icon">
                        <x-icon name="lock"/>
                        <input class="input" id="password_confirmation" type="password"
                               name="password_confirmation" required autocomplete="new-password">
                    </div>
                </div>

                <button class="btn btn-primary btn-lg btn-block" type="submit">Enregistrer le mot de passe</button>
            </form>
        </div>
    </div>
</section>
@endsection