@extends('layouts.auth')

@section('title')
    Se connecter
@endsection

@section('content')
<div class="col-12 col-lg-6 col-xl-8 d-none d-lg-block">
    <!-- Photo -->
    <div class="bg-cover h-100 min-vh-100" style="background-image: url(./static/photos/bg-b.jpg)"></div>
</div>
<div class="col-12 col-lg-6 col-xl-4 border-top-wide border-primary d-flex flex-column justify-content-center">
    <div class="container container-tight my-5 px-lg-5">
    <div class="text-center mb-4">
        <a href="#" class="navbar-brand navbar-brand-autodark"><img src="./static/logo.png" alt=""></a>
    </div>
    
    <form action="{{ route('login') }}" method="post" autocomplete="off" novalidate>
        @csrf
        <div class="mb-3">
            <label class="form-label">Email</label>
            <input type="email" class="form-control @error('email') is-invalid @enderror" name="email"
                value="{{ old('email') }}" placeholder="vous@email.com" autocomplete="off">
            @error('email')
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>
        <div class="mb-2">
            <label class="form-label">
                Mot de passe
                <span class="form-label-description">
                    <a href="#" class="text-teal">Mot de passe oublié</a>
                </span>
            </label>
            <div class="input-group input-group-flat">
                <input type="password" class="form-control @error('password') is-invalid @enderror" name="password" placeholder="Votre mot de passe"  autocomplete="off">
                @error('password')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
                <span class="input-group-text">
                <a href="#" class="link-secondary" title="Show password" data-bs-toggle="tooltip">
                    <!-- Download SVG icon from http://tabler-icons.io/i/eye -->
                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" /><path d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6" /></svg>
                </a>
                </span>
            </div>
        </div>
        <div class="mb-2">
            <label class="form-check">
                <input type="checkbox" class="form-check-input"/>
                <span class="form-check-label text-teal">Se souvenir de moi</span>
            </label>
        </div>
        {{--<div class="card bg-teal text-white mt-5">
            <div class="card-body d-flex justify-content-between">
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" id="inlineRadio1" name="is-admin" value=1>
                    <label class="form-check-label" for="inlineRadio1">Administrateur</label>
                  </div>
                  <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" id="inlineRadio2" name="is-admin" value=0>
                    <label class="form-check-label" for="inlineRadio2">Utilisateur</label>
                </div>
            </div>
        </div>--}}
        <div class="form-footer my-3">
            <button type="submit" class="btn btn-dark w-100">Se connecter</button>
        </div>
    </form>
    <div class="text-center text-muted">
        Nouveau sur la plateforme? <a href="{{ route('register') }}" class="text-teal" tabindex="-1">S'inscrire</a>
    </div>
    </div>
</div>
@endsection