@extends('layouts.auth')

@section('content')
    <div class="max-w-464-px mx-auto w-100">
        <div>
            <a href="/" class="mb-40 max-w-290-px">
                <img src="{{ asset('assets/images/logo.png') }}" alt="">
            </a>
            <h4 class="mb-12">Se Connecter</h4>
            <p class="mb-32 text-secondary-light text-lg">Prêt à tout dechirer !</p>
        </div>
        @if (session('status'))
            <div class="alert alert-success" role="alert">
                {{ session('status') }}
            </div>
        @endif
        <form method="POST" action="{{ route('login') }}">
            @csrf
            <div class="icon-field mb-16">
                        <span class="icon top-50 translate-middle-y">
                            <iconify-icon icon="mage:email"></iconify-icon>
                        </span>
                <input id="email" type="email" class="form-control h-56-px bg-neutral-50 radius-12 @error('email') is-invalid @enderror"
                       name="email" value="{{ old('email') }}" required autocomplete="email" placeholder="Email" autofocus>
            </div>
            @error('email')
            <span class="alert alert-danger bg-danger-100 text-danger-600 border-danger-100 px-24 py-11 text-lg radius-8 d-flex align-items-center justify-content-between" role="alert">
                <strong>{{ $message }}</strong>
            </span>
            @enderror
            <div class="position-relative mb-20">
                <div class="icon-field">
                            <span class="icon top-50 translate-middle-y">
                                <iconify-icon icon="solar:lock-password-outline"></iconify-icon>
                            </span>
                    <input id="password" type="password"
                           class="form-control h-56-px bg-neutral-50 radius-12 @error('password') is-invalid @enderror" name="password "
                           required autocomplete="current-password">
                </div>
                <span class="toggle-password ri-eye-line cursor-pointer position-absolute end-0 top-50 translate-middle-y me-16 text-secondary-light" data-toggle="#your-password"></span>
            </div>
            @error('password')
            <span class="alert alert-danger bg-danger-100 text-danger-600 border-danger-100 px-24 py-11 text-lg radius-8 d-flex align-items-center justify-content-between" role="alert">
                <strong>{{ $message }}</strong>
            </span>
            @enderror
            <div class="">
                <div class="d-flex justify-content-between gap-2">
                    <div class="form-check style-check d-flex align-items-center">
                        <input class="form-check-input border border-neutral-300" type="checkbox" name="remember" id="remember" {{ old('remember') ? 'checked' : '' }}>
                        <label class="form-check-label" for="remember">Se seouvenir de moi </label>
                    </div>
                </div>
            </div>

            <button type="submit" class="btn btn-primary text-sm btn-sm px-12 py-16 w-100 radius-12 mt-32"> Connexion</button>

        </form>
    </div>
@endsection