@extends('layouts.form')

@section('body')
<div class="login-page">
    <div class="login-text">
        @component('components.title')
        @endcomponent
    </div>
    <div class="login-body">
        <div>
            <form method="post" action="{{ route('login') }}">
                @csrf
                @if($errors->any())

                    <div class="alert alert-danger" role="alert">
                        {{ __('Invalid Username or Password') }}
                        <a class="close" data-dismiss="alert" aria-label="close">&times;</a>
                    </div>

                @endif
                <label class="col-xs-12">
                    Username:
                    <input id="uuid" type="text" class="form-input" name="uuid" value="{{ old('username') }}" placeholder="IOByte" required autocomplete="username" autofocus>
                </label>

                <label class="col-xs-12">
                    Password:
                    <input id="password" type="password" class="form-input" name="password" placeholder="••••••••••" required autocomplete="current-password">
                </label>

                <div class="col-xs-12">
                    <button class="btn btn-custom" style="width: 100%">{{ __('Login') }}</button>
                    <p style="margin-top: 1rem">No account yet, <a href="{{ route('register') }}">{{ __('Register one') }} </a>or,
                        <br>Did you <a href="{{ route('password.request') }}">{{ __('forget your password') }}</a>?</p>
                </div>
            </form>
        </div>

        <div class="login-footer">
            <span>Copyright &copy; 2019-{{ date('Y') }} <a href="https://www.iobyte.nl/"><img src="{{ asset('assets/img/logo.png') }}" alt="IOByte"></a>. All rights reserved.</span>
        </div>
    </div>
</div>
@endsection
