@extends('layouts.app')

@section('content')
<div class="bg-orange-200 mx-auto h-screen flex justify-center items-center">
    <div class="w-96 m-auto bg-orange-400 rounded p-4 mt-10 shadow-xl">
        <div class="text-3xl font-bold text-center mb-4">{{ __('Login') }}</div>
        <form method="POST" action="{{ route('login') }}">
            @csrf

            <label for="email" class="mb-2 font-bold uppercase">{{ __('E-Mail') }}</label>
            <div class="mb-4">
                <input id="email" type="email" class="w-full border-2 border-orange-500 focus:border-orange-700 rounded p-2 @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email" autofocus>
                @error('email')
                <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
                @enderror
            </div>

            <label for="password" class="mb-2 font-bold uppercase">{{ __('Password') }}</label>
            <div class="mb-4">
                <input id="password" type="password" class="w-full border-2 border-orange-500 focus:border-orange-700 rounded p-2 @error('password') is-invalid @enderror" name="password" required autocomplete="current-password">

                @error('password')
                <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
                @enderror
            </div>

            <div class="mb-4">
                <input type="checkbox" name="remember" id="remember" {{ old('remember') ? 'checked' : '' }}>

                <label for="remember" class="inline">
                    {{ __('Remember Me') }}
                </label>
            </div>

            <div class="flex justify-between">
                <button type="submit" class="btn-primary">
                    {{ __('Login') }}
                </button>
                @if (Route::has('password.request'))
                    <a class="btn-secondary" href="{{ route('password.request') }}">
                        {{ __('Forgot Your Password?') }}
                    </a>
                @endif
            </div>
        </form>
    </div>
</div>
@endsection
