@extends('layouts.login')
@section('title', 'Mot de passe oublié')   
@section('content')
<div class="row justify-content-center align-items-center" style="height: 100vh">
    
    <div class="col-md-8">

        <div class="card card-body border-0 p-0 border-radius-0 shadow-sm">
            <div class="row justify-content-center align-items-center" style="height: 100%">

                <div class="col-md-6 mb-3 px-5">     
                    <div class="row mb-4">
                        <div class="col-md-6 d-flex align-items-center">
                            <img class="img-fluid" src="{{ asset('images/tfv-logo.png') }}" alt="tfv">
                        </div>
                        <div class="col-md-6 d-flex align-items-center">
                            <img class="img-fluid" src="{{ asset('images/soprop-logo.png') }}" alt="soprop">
                        </div>
                    </div>
                    
                    <form class="form-signin" method="POST" action="{{ route('password.email') }}">
                        @csrf
                        <p class="mb-3 text-center text-muted small">
                            Vous avez oublié votre mot de passe ? Pas de problème. Indiquez-nous votre adresse électronique et nous vous enverrons un lien de réinitialisation du mot de passe qui vous permettra d'en choisir un nouveau.
                        </p>
                        
                        <div class="form-floating mb-3">
                            <input type="email" class="form-control" id="email" name="email" placeholder="johndoe@site.ab" required autofocus>
                            <label for="email">Adresse Email</label>
                            @error('email')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                        
                        <button class="btn btn-primary w-100 mt-3" type="submit">
                            Envoyer Le Lien de réinitialisation
                        </button>  
                        
                    </form>
                </div>  

                <div class="col-md-6 p-0 overflow-hidden d-none d-lg-block" style="height: 65vh;">
                    <img style="height: 100%; width: 100%; object-fit: cover; object-position: center" src="{{ asset('images/home-banner-2.jpeg') }}" alt="Home banner">
                </div>
            </div>
        </div>        
        
    </div>
</div>
@endsection