@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('register') }}">
                    @csrf
                    @if(!empty(env('APP_LOGO', '')))
                        <div class="col-xs-12 hidden-xs">
                            <img src="{{ env('APP_LOGO') }}" style="max-width: 80%; max-height: 50px; height: auto; width: auto">
                        </div>
                        <div class="col-xs-12 hidden-lg hidden-md hidden-sm">
                            <img src="{{ env('APP_LOGO') }}" style="max-width: 80%; max-height: 50px; height: auto; width: auto; filter: brightness(0)">
                        </div>
                    @else
                        <h2 class="text-center">{{ env('APP_NAME', 'ThemePark') }}</h2>
                    @endif
                    @if($errors->any())

                        <div class="alert alert-danger" role="alert">
                            {{ __($errors->first()) }}
                            <a class="close" data-dismiss="alert" aria-label="close">&times;</a>
                        </div>

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

                    <label class="col-xs-12">
                        Email:
                        <input id="email" type="email" class="form-input" name="email" value="{{ old('email') }}" placeholder="my.mail@example.com" required autocomplete="email" autofocus>
                    </label>

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

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

                    <div class="col-xs-12">
                        <button class="btn btn-custom" style="width: 100%">{{ __('Register') }}</button>
                        <p style="margin-top: 1rem">Already have an account, <a href="{{ route('login') }}">{{ __('Login') }} </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

@section('javascript')
<script>
    window.onload = () => {
        const passInput = document.getElementById('password_confirmation');
        passInput.onpaste = (e) => {
            e.preventDefault();
        };
    };
</script>
@endsection