@extends('clients.layout.baseT')



@section('contenu')
    <!-- Titlebar
                                                ================================================== -->
    <div id="titlebar" class="gradient">
        <div class="container">
            <div class="row">
                <div class="col-md-12">

                    {{-- <h2>Se connecter</h2> --}}

                    <!-- Breadcrumbs -->
                    {{-- <nav id="breadcrumbs" class="dark">
                        <ul>
                            <li><a href="#">Accueil</a></li>
                            <li>Log In</li>
                        </ul>
                    </nav> --}}

                </div>

                <div class="col-xl-12">
                    <div class="section-headline centered margin-top-0 margin-bottom-0">
                        <img src="{{ asset('clients/images/favicon.png') }}" alt="" style="height: 150px;width: 150px">
                    </div>
                </div>

                <div class="col-xl-12">
                    <div class="section-headline centered margin-top-0 margin-bottom-0">
                        <img src="{{ asset('clients/images/Logo.png') }}" alt="" style="height: 150px;width: 100">
                    </div>
                </div>

            </div>
        </div>
    </div>


    <!-- Page Content
                                                ================================================== -->

    <div class="container">
        <div class="col-xl-12">
            @include('clients.layout.message')
        </div>
    </div>


    <div class="container">

        <div class="row">
            <div class="col-xl-5" style="margin: 20vh auto;margin-top: 0vh">

                <div class="login-register-page">
                    <!-- Welcome Text -->
                    <div class="welcome-text">
                        <h4>Votre contribution pour sauver notre planète</h4>
                        <span>Connectez-vous en tant qu'utilisateur</span>
                    </div>

                    <!-- Form -->
                    <form method="post" action="{{ route('user.connect') }}">
                        @csrf
                        <div class="input-with-icon-left">
                            <i class="icon-material-baseline-mail-outline"></i>
                            <input type="email" class="input-text with-border" name="email" id="emailaddress"
                                placeholder="Email Address" required />
                        </div>

                        <div class="input-with-icon-left">
                            <i class="icon-material-outline-lock"></i>
                            <input type="password" class="input-text with-border" name="password" id="password"
                                placeholder="Password" required />
                        </div>
                        <button class="button full-width button-sliding-icon ripple-effect margin-top-10"
                            type="submit">Connexion <i class="icon-material-outline-arrow-right-alt"></i></button>
                    </form>
                    <div class="margin-top-20 welcome-text">
                        <a href="#" class="forgot-password">Mot de Passe Oublié ?</a>
                    </div>


                    <div class="margin-top-20 welcome-text">
                        <div class="row">
                            <div class="col-xl-4">
                                <hr>
                            </div>
                            <div class="col-xl-4">
                                <h2>Ou</h2>
                            </div>
                            <div class="col-xl-4">
                                <hr>
                            </div>
                        </div>
                    </div>

                    <div class="margin-top-20 welcome-text">
                        <a href="{{ route('user.register') }}"
                            class="button full-width button-sliding-icon ripple-effect margin-top-10">Créer un
                            compte <i class="icon-material-outline-arrow-right-alt"></i> </a>
                    </div>

                    <!-- Button -->

                    <!-- Social Login -->
                    {{-- <div class="social-login-separator"><span>or</span></div>
            <div class="social-login-buttons">
                <button class="facebook-login ripple-effect"><i class="icon-brand-facebook-f"></i> Log In via Facebook</button>
                <button class="google-login ripple-effect"><i class="icon-brand-google-plus-g"></i> Log In via Google+</button>
            </div> --}}
                </div>

            </div>
        </div>

    </div>
@endsection