@extends('layouts.auth')

@section('content')

<div class="container">
    <div class="w-full max-w-xs mx-auto mt-16 text-center">
        <a href="/">
            <img src="{{ asset('img/logo_accueil.png') }}" alt="waaye" class="h-16 text-grey mb-3 self-center">
        </a>
        <form method="POST" action="{{ route('password.update') }}" class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4 text-left">
            @csrf
            <input type="hidden" name="token" value="{{ $token }}">
            <div class="mb-4">
                <label class="block text-grey-darker text-sm font-bold mb-2" for="email">
                    Email
                </label>
                <input class="shadow appearance-none border {{ $errors->has('email') ? 'border-red' : '' }} rounded w-full py-2 px-3 text-grey-darker leading-tight focus:outline-none" id="email" type="email" placeholder="Login" name="email" value="{{ old('email') }}" required autocomplete="email" autofocus>
            </div>
            <div class="mb-4">
                <label class="block text-grey-darker text-sm font-bold mb-2" for="password">
                    Mot de passe
                </label>
                <input class="shadow appearance-none border {{ $errors->has('password') ? 'border-red' : '' }} rounded w-full py-2 px-3 text-grey-darker leading-tight focus:outline-none" id="password" type="password" placeholder="Mot de passe" name="password" required>
            </div>
            <div class="mb-4">
                <label class="block text-grey-darker text-sm font-bold mb-2" for="password-confirm">
                    Confirmer le mot de passe
                </label>
                <input class="shadow appearance-none border {{ $errors->has('password-confirm') ? 'border-red' : '' }} rounded w-full py-2 px-3 text-grey-darker leading-tight focus:outline-none" id="password-confirm" type="password" placeholder="Réinitialiser le mot de passe" name="password_confirmation" required>
            </div>
            <div class="mb-3">
                <ul class="list-reset">
                    @if ($errors->has('email'))
                        <li class="text-red text-xs italic">{{ $errors->first('email') }}</li>
                    @endif
                    @if ($errors->has('password'))
                        <li class="text-red text-xs italic">{{ $errors->first('password') }}</li>
                    @endif
                </ul>
            </div>

            <div class="flex items-center justify-between">
                <button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="submit">
                    Réinitialiser le mot de passe
                </button>
            </div>
        </form>
    </div>
</div>
@endsection