@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('password.update') }}">
                    @csrf
                    <input type="hidden" name="token" value="{{ $token }}">

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

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

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

                    <div class="col-xs-12">
                        <button class="btn btn-custom" style="width: 100%">{{ __('Reset Password') }}</button>
                    </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