{{-- <x-guest-layout>
    <form method="POST" action="{{ route('register') }}">
        @csrf

        <!-- Name -->
        <div>
            <x-input-label for="name" :value="__('Name')" />
            <x-text-input id="name" class="block mt-1 w-full" type="text" name="name" :value="old('name')" required
                autofocus autocomplete="name" />
            <x-input-error :messages="$errors->get('name')" class="mt-2" />
        </div>

        <!-- Email Address -->
        <div class="mt-4">
            <x-input-label for="email" :value="__('Email')" />
            <x-text-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email')" required
                autocomplete="username" />
            <x-input-error :messages="$errors->get('email')" class="mt-2" />
        </div>

        <!-- Password -->
        <div class="mt-4">
            <x-input-label for="password" :value="__('Password')" />

            <x-text-input id="password" class="block mt-1 w-full" type="password" name="password" required
                autocomplete="new-password" />

            <x-input-error :messages="$errors->get('password')" class="mt-2" />
        </div>

        <!-- Confirm Password -->
        <div class="mt-4">
            <x-input-label for="password_confirmation" :value="__('Confirm Password')" />

            <x-text-input id="password_confirmation" class="block mt-1 w-full" type="password"
                name="password_confirmation" required autocomplete="new-password" />

            <x-input-error :messages="$errors->get('password_confirmation')" class="mt-2" />
        </div>

        <div class="flex items-center justify-end mt-4">
            <a class="underline text-sm text-gray-600 hover:text-gray-900 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                href="{{ route('login') }}">
                {{ __('Already registered?') }}
            </a>

            <x-primary-button class="ml-4">
                {{ __('Register') }}
            </x-primary-button>
        </div>
    </form>
</x-guest-layout> --}}
<x-guest-layout>
    <div class="container">
        <div class="row">
            <div class="col-xl-4 col-lg-5 col-md-7 d-flex flex-column mx-lg-0 mx-auto">
                <div class="card card-plain">
                    <div class="card-header pb-0 text-left">
                        <h4 class="font-weight-bolder">Inscription</h4>
                        <p class="mb-0">Entrer votre Email et mot de passe pour vous inscrire</p>
                    </div>
                    <div class="card-body pb-3">
                        <form method="POST" action="{{ route('register') }}">
                            @csrf
                            <label>Nom</label>
                            <div class="mb-3">
                                <input type="text" class="form-control" placeholder="Nom" aria-label="Name" name="name"
                                    value="{{old('name')}}" required autofocus autocomplete="name">
                                <x-input-error :messages="$errors->get('name')" class="mt-2" />
                            </div>
                            <label>Email</label>
                            <div class="mb-3">
                                <input type="email" class="form-control" placeholder="Email" aria-label="Email"
                                    name="email" value="{{old('email')}}" required autocomplete="username">
                                <x-input-error :messages="$errors->get('email')" class="mt-2" />
                            </div>
                            <label>Mot de passe</label>
                            <div class="mb-3">
                                <input type="password" class="form-control" placeholder="Mot de passe"
                                    aria-label="Password" name="password" required autocomplete="new-password">
                                <x-input-error :messages="$errors->get('password')" class="mt-2" />
                            </div>
                            <!-- Confirm Password -->
                            <label>Confirmation de mot de passe</label>
                            <div class="mb-3">
                                <input type="password" id="password_confirmation" class="form-control"
                                    name="password_confirmation" required autocomplete="new-password" />
                                <x-input-error :messages="$errors->get('password_confirmation')" class="mt-2" />
                            </div>

                            <div class="form-check form-check-info text-left">
                                <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" checked>
                                <label class="form-check-label" for="flexCheckDefault">
                                    J'accepte les <a href="../../../pages/privacy.html"
                                        class="text-dark font-weight-bolder">conditions générales</a>
                                </label>
                            </div>
                            <div class="text-center">
                                <button type="submit"
                                    class="btn bg-gradient-primary w-100 mt-4 mb-0">Inscription</button>
                            </div>
                        </form>
                    </div>
                    <div class="card-footer text-center pt-0 px-sm-4 px-1">
                        <p class="mb-4 mx-auto">
                            Vous avez déjà un compte ?
                            <a href="{{route('login')}}"
                                class="text-primary text-gradient font-weight-bold">Connexion</a>
                        </p>
                    </div>
                </div>
            </div>
            <div
                class="col-6 d-lg-flex d-none h-100 my-auto pe-0 position-absolute top-0 end-0 text-center justify-content-center flex-column">
                <div
                    class="position-relative bg-gradient-primary h-100 m-3 px-7 border-radius-lg d-flex flex-column justify-content-center">
                    <img src="{{asset('img/shapes/pattern-lines.svg')}}" alt="pattern-lines"
                        class="position-absolute opacity-4 start-0">
                    <div class="position-relative">
                        <img class="max-width-500 w-100 position-relative z-index-2"
                            src="{{asset('img/illustrations/rocket-white.png')}}" alt="rocket">
                    </div>
                    <h4 class="mt-5 text-white font-weight-bolder">Votre voyage commence ici</h4>
                    <p class="text-white">De même qu'il faut une entreprise pour soutenir un produit, il faut une
                        communauté pour soutenir un protocole.</p>
                </div>
            </div>
        </div>
    </div>
</x-guest-layout>