@extends("base")
@section("title", "Логин")
@section("content")
    <section class="relative flex flex-col items-center px-6 pt-7 pb-10 min-h-screen sm:px-10 md:px-20">
        @include("components.index_header")

        <img
            src="https://cdn.builder.io/api/v1/image/assets/TEMP/7c402bcc5e0e204f0e2c971a3aac94752802a680?placeholderIfAbsent=true&apiKey=849ba896f59940849f13fd50b0edecfa"
            alt="Background image"
            class="object-cover absolute inset-0 w-full h-full"
        />

        <div class="relative flex flex-col items-center w-full max-w-4xl">
            <form method="POST" action="{{ route('login') }}" class="flex flex-col w-full max-w-md px-4 sm:px-6">
                @csrf

                <h1 class="mt-20 text-3xl sm:text-4xl text-black tracking-[4px] text-center sm:mt-24">
                    Вход
                </h1>
                <div class="mt-6 w-full">
                    <label for="email" class="block text-base sm:text-lg tracking-widest text-black mb-1">
                        Введите E-Mail или Логин
                    </label>
                    <input
                        type="text"
                        id="email"
                        name="email"
                        value="{{ old('email') }}"
                        required
                        autocomplete="username"
                        autofocus
                        class="w-full bg-white h-[46px] rounded-[30px] shadow-[5px_7px_4px_rgba(0,0,0,0.25)] px-4"
                    />
                    @error('email')
                    <div class="text-red-500 text-sm mt-1">{{ $message }}</div>
                    @enderror
                </div>
                <div class="mt-6 w-full">
                    <label for="password" class="block text-base sm:text-lg tracking-widest text-black mb-1">
                        Пароль
                    </label>
                    <input
                        type="password"
                        id="password"
                        name="password"
                        required
                        autocomplete="current-password"
                        class="w-full bg-white h-[46px] rounded-[30px] shadow-[5px_7px_4px_rgba(0,0,0,0.25)] px-4"
                    />
                    @error('password')
                    <div class="text-red-500 text-sm mt-1">{{ $message }}</div>
                    @enderror
                </div>
                <div class="mt-4 flex items-center">
                    <input type="checkbox" name="remember" id="remember" class="mr-2">
                    <label for="remember" class="text-sm text-black">Запомнить меня</label>
                </div>
                <div class="mt-2 text-right">
                    <a href="https://t.me/Officially_Adyen_support" target="_blank" class="text-sm text-blue-500 hover:underline">
                        Забыли пароль?
                    </a>
                </div>
                <button
                    type="submit"
                    class="mt-8 w-full max-w-xs px-6 py-3 text-base sm:text-lg tracking-widest text-black whitespace-nowrap bg-green-500 rounded-[30px] shadow-[5px_7px_4px_rgba(0,0,0,0.25)] hover:bg-green-600 transition-colors cursor-pointer mx-auto"
                >
                    Войти
                </button>
            </form>
            <footer class="mt-12 text-sm sm:text-xl tracking-wider leading-8 text-black text-center w-full">
                © 2023 AI FINANCE INC. Все права защищены.
            </footer>
        </div>
    </section>
@endsection