<x-guest-layout>

    <main class="w-full max-w-md mx-auto p-6">
        <div class="mt-7 bg-white border border-gray-200 rounded-xl shadow-sm dark:bg-gray-800 dark:border-gray-700">
            <div class="p-4 sm:p-7">
                <div class="text-center">
                    <h1 class="block text-2xl font-bold text-gray-800 dark:text-white">Sign in</h1>

                </div>
                <div class="mt-5">
                    <!-- Form -->
                    <form action="{{ route('login') }}" method="POST">
                        @csrf
                        <div class="grid gap-y-4">
                            <!-- Form Group -->
                            <div>
                                <x-backend.input-label for="email" :value="__('Email')" />

                                <div class="relative">
                                    <x-backend.input-field type="email" name='email' id="email"
                                        :value="old('email')" required />
                                </div>
                                <x-backend.input-error :message="$errors->first('email')" />
                            </div>
                            <!-- End Form Group -->

                            <!-- Form Group -->
                            <div>
                                <div class="flex justify-between items-center">
                                    <x-backend.input-label for="password" :value="__('Password')" />
                                    <a class="text-sm text-blue-600 decoration-2 hover:underline font-medium dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
                                        href="#">Forgot password?</a>
                                </div>
                                <div class="relative">
                                    <x-backend.input-field type="password" name='password' id="password"
                                        :value="old('password')" />

                                </div>
                                <x-backend.input-error :message="$errors->first('password')" />
                            </div>
                            <!-- End Form Group -->

                            <!-- Checkbox -->
                            <div class="flex items-center">
                                <div class="flex">
                                    <x-backend.input-checkbox id="remember-me" name="remember-me" type="checkbox" />
                                </div>
                                <div class="ms-3">
                                    <x-backend.input-label for="remember-me" class="text-sm dark:text-white"
                                        :value="__('Remember me')" />
                                </div>
                            </div>
                            <!-- End Checkbox -->
                            <x-backend.button type="submit" class="w-full bg-blue-600 text-white" :value="__('Sign
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        in')" />

                        </div>
                    </form>
                    <!-- End Form -->
                </div>
            </div>
        </div>
    </main>

    </html>
</x-guest-layout>
