@extends('layouts.auth')

@section('content')
    <!-- Header -->
    <div class="mb-3 text-center">
        <a class="fw-bold fs-1" href="/">
            <img src="{{url('/')}}/media/logo.png" class="img-fluid mx-auto">
        </a>
        <p class="text-uppercase fw-bold fs-sm text-muted">Se connecter!</p>
    </div>
    <!-- END Header -->
    <div class="row g-0 justify-content-center">
        <div class="col-sm-8 col-xl-6">
            <form class="js-validation-signin"  method="POST" action="{{ route('login') }}" novalidate="novalidate">
                @csrf

                <div class="mb-3">
                    <input id="email" type="email" class="form-control @error('email') is-invalid @enderror"
                           name="email" value="{{ old('email') }}" required autocomplete="email" autofocus placeholder="Email">

                    @error('email')
                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                    @enderror
                </div>

                <div class="mb-3">
                    <input id="password" type="password"
                           class="form-control @error('password') is-invalid @enderror" name="password"
                           required autocomplete="current-password" placeholder="Mot de passe">

                    @error('password')
                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                    @enderror
                </div>

                <div class="mb-5">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" name="remember" id="remember"
                                {{ old('remember') ? 'checked' : '' }}>

                        <label class="form-check-label" for="remember">
                            Se souvenir de moi
                        </label>
                    </div>
                </div>
                <button type="submit" class="btn w-100 btn-lg btn-hero btn-primary mb-3">Connexion
                </button>
                <p class="text-center">
                    <a href="/forgot-password" class="text-black">
                        <i class="fa fa-key opacity-50 me-1"></i> Mot de passe oublié  ?
                    </a>
                </p>
                <div class="mb-4">
                    <p class="mt-3 mb-0 d-lg-flex justify-content-lg-between text-center">
                        <a class="btn btn-sm btn-alt-secondary d-block d-lg-inline-block m-2" href="/">
                            <i class="fa fa-rotate-back opacity-50 me-1"></i> Revenir à MyX
                        </a>
                    </p>
                </div>
            </form>
        </div>
    </div>
@endsection