@extends('layouts.guest', ['isLogin' => true])
@section('content')
    <div class="sign__box">

        <a href="#"><img src="{{ asset('img/logo.svg') }}" alt="logo"></a>
        <div class="head__">
            <h6>Sign In</h6>
        </div>
        <form action="{{ route('login') }}" method="POST">
            @csrf
            <div class="group__input required email">
                <input name="email" type="text" placeholder="Professional email">
            </div>
            <div class="group__input required password">
                <input name="password" type="password" placeholder="Password">
                <label for="">The password must contain at least 1 number, at least 1 lower case letter,
                    and at least 1 upper case letter</label>
            </div>
            @if (session('errors') && session('errors')->has('email'))
                @foreach(session('errors')->get('email') as $error)
                    @if($error === 'These credentials do not match our records.')
                        <div class="input-error">
                            Invalid username or password.
                            <a class="e-link" href="{{ route('password.request') }}">Forgot password?</a>
                        </div>
                    @else
                        <div class="input-error">
                            {{ $error }}
                        </div>
                    @endif
                @endforeach
            @endif
            <div class="group__submit">
                <button type="submit" class="regular-btn">
                    {{ __('Login') }}
                </button>
            </div>
            <div class="member">
                <p>Not a member? <a href="{{ route('register') }}">Create Account</a></p>
            </div>
        </form>

    </div>
    <style>
        p.input-error, div.input-error {
            margin: 0px;
            font-size: 12px;
            line-height: 16px;
            font-weight: 500;
            color: #FF0000;
        }

        a.e-link {
            font-size: 12px;
            line-height: 20px;
            font-weight: 600;
            color: #7BB65A;
            text-decoration: none;
            -webkit-transition: .4s ease all;
            transition: .4s ease all;
        }

        /* If you want to add a hover effect, you can do something like this */
        a.e-link:hover {
            color: #688C4A; /* This is a darker green, change to whatever color you prefer on hover */
        }

    </style>
@endsection