{% block content %}
<div class="card shadow-sm login-card">
    <div class="card-header">
        <h5 class="mb-0">{% trans %}Forgot Username{% endtrans %}</h5>
    </div>
    <div class="card-body p-4">
                    {% if success %}
                        <div class="alert alert-success" role="alert">
                            {{ message|trans }}
                        </div>
                        <p class="text-center">
                            <a href="{{ base_url_prefix }}/login" class="btn btn-secondary">{% trans %}Back to Login{% endtrans %}</a>
                        </p>
                    {% else %}
                        {% if error %}
                            <div class="alert alert-danger" role="alert">
                                {{ error|trans }}
                            </div>
                        {% endif %}

                        <p>{% trans %}Enter your email address and we'll send you the username associated with this account.{% endtrans %}</p>

                        <form class="needs-validation" method="post" action="{{ base_url_prefix }}/username/forgot" novalidate>
                            <input type="hidden" name="username_recovery_token" value="{{ username_recovery_token }}">

                            <div class="mb-3">
                                <label for="email" class="form-label">{% trans %}Email Address{% endtrans %}</label>
                                <input type="email" class="form-control" id="email" name="email" required autofocus>
                                <div class="invalid-feedback">{% trans %}Please provide a valid email address{% endtrans %}</div>
                            </div>

                            {% if recaptcha_enabled %}
                                {% if recaptcha_version == 'v2' %}
                                    <div class="g-recaptcha mb-3" data-sitekey="{{ recaptcha_site_key }}"></div>
                                {% elseif recaptcha_version == 'v3' %}
                                    <input type="hidden" name="g-recaptcha-response" id="g-recaptcha-response">
                                {% endif %}
                            {% endif %}

                            <div class="d-grid">
                                <button type="submit" class="btn btn-secondary">{% trans %}Send Username{% endtrans %}</button>
                            </div>
                        </form>

                        <div class="text-center mt-3">
                            <a href="{{ base_url_prefix }}/login" class="text-decoration-none">{% trans %}Back to Login{% endtrans %}</a>
                        </div>
                    {% endif %}
    </div>
</div>

{% if recaptcha_enabled and recaptcha_version == 'v3' %}
<script src="https://www.google.com/recaptcha/api.js?render={{ recaptcha_site_key }}"></script>
<script>
    grecaptcha.ready(function() {
        grecaptcha.execute('{{ recaptcha_site_key }}', {action: 'forgot_username'}).then(function(token) {
            document.getElementById('g-recaptcha-response').value = token;
        });
    });
</script>
{% elseif recaptcha_enabled and recaptcha_version == 'v2' %}
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
{% endif %}

<script type="text/javascript">
// Bootstrap form validation
(function() {
    'use strict';
    window.addEventListener('load', function() {
        // Fetch all forms with needs-validation class
        var forms = document.getElementsByClassName('needs-validation');
        // Loop over them and prevent submission
        var validation = Array.prototype.filter.call(forms, function(form) {
            form.addEventListener('submit', function(event) {
                if (form.checkValidity() === false) {
                    event.preventDefault();
                    event.stopPropagation();
                }
                form.classList.add('was-validated');
            }, false);
        });
    }, false);
})();
</script>

{% endblock %}