@extends('components.main')
@section('title')-Login @endsection
@section('custom-style')

<style>
    body {
        position: relative;
        min-height: 100vh;
        padding-bottom: 13%
    }

    footer {
        /* position: relative; */
        position: absolute;
        bottom: 0px;
        rigth: 0px;
        width: 100%;
    }
    @media screen and (max-width: 800px){
        footer{
            position: relative;
            bottom: -110px
        }
    }
    @media screen and (max-width: 1100px){
        footer{
            position: relative;
            bottom: -140px
        }
    }
</style>
@endsection
@section('content')
<section class="login">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-10">
                <div class="row align-items-center">
                    <div class="col-md-6">
                        <img src="{{ asset('main_site/img/character.png') }}" alt="">
                    </div>

                    <div class="col-md-6">
                        <div class="login-form">
                            <h1>@lang('buttons.login')</h1>
                            <form action="{{ route('login.post') }}" method="POST">
                                @csrf
                                <div class="row">
                                    <div class="col-md-12">
                                        <input type="email" name="email" id="" placeholder="@lang('forms.email')"
                                            value="{{ old('email') }}">
                                        @error('email')
                                        <div style="text-align: center">

                                            <small style="color: red">{{ $message }}</small>
                                        </div>
                                        @enderror
                                    </div>
                                    <div class="col-md-12">
                                        <input type="password" name="password" id=""
                                            placeholder="@lang('forms.password')">
                                        @error('password')
                                        <div style="text-align: center">

                                            <small style="color: red">{{ $message }}</small>
                                        </div>
                                        @enderror
                                    </div>

                                    <div class="col-6">
                                        <input type="checkbox" id="remember" name="remember" value="1">
                                        <label for="remember">@lang('forms.remember_me')</label>
                                    </div>

                                    <div class="col-6">
                                        <a href="{{ route('forget.password') }}"
                                            class="forget">@lang('forms.forget_password')</a>
                                    </div>
                                    <div class="col-12">

                                        @include('components.responses')
                                    </div>
                                    <div class="col-md-12">
                                        <button type="submit">@lang('buttons.login')</button>
                                    </div>

                                    <div class="col-md-12">
                                        <a href="{{ route('signUp') }}" class="signup">@lang('buttons.sign_up')</a>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection