@extends('auth.layout')

@section('content')
    <form method="post" action="{{ route('password.request') }}" data-disable-on-submit>
        {{ csrf_field() }}

        <input id="captcha" type="hidden" name="g-recaptcha-response" />

        <h1 class="h4 mb-2">Reset Password</h1>

        <p>Please enter your <strong>username</strong> below. We'll send a link to change your password to the e-mail address registered on your account.</p>

        <div class="mb-3">
            <div class="input-group">
                <div class="input-group-text">
                    <span class="fas fa-user fa-fw"></span>
                </div>

                <input type="text" class="form-control" id="reference" name="username" placeholder="Username" required value="{{ old('username') }}" aria-label="Username" />
            </div>
        </div>

        <div class="mb-3 d-grid gap-2">
            <button type="submit" class="btn btn-primary">
                <i class="fas fa-key me-2" aria-hidden="true"></i>
                Reset Password
            </button>

            <a href="{{ route('login') }}" class="btn btn-secondary btn-sm">
                <i class="fas fa-sign-in-alt me-2" aria-hidden="true"></i>
                Back to login
            </a>
        </div>
    </form>

    <script src="https://www.google.com/recaptcha/api.js?render=6LdusZ8UAAAAAA2DaMLR8OQtVwii0uFkUBcYBny9"></script>
    <script>
        grecaptcha.ready(function() {
            grecaptcha.execute('6LdusZ8UAAAAAA2DaMLR8OQtVwii0uFkUBcYBny9', {action: 'forgot_password'}).then(function(token) {
                $('#captcha').val(token);
            });
        });
    </script>
@stop