{% extends '@PimUser/layout.html.twig' %}

{% block bodyClass %}AknLogin{% endblock %}

{% block content %}
    <form action="{{ path('pim_user_reset_send_email') }}" method="post" class="Form">
        <div class="InputGroup">
            <div class="InputBlock">
                <label class="InputLabel" for="username">{{ 'pim_user.user.login.username_or_email'|trans }}</label>
                <input class="InputText" type="text" id="username" name="username" required="required" autofocus="autofocus"/>
            </div>
            <div class="CancelPasswordReset">
                <a href="{{ path('pim_user_security_login') }}" class="AknLogin-link cancel">{{ 'pim_common.cancel'|trans }}</a>
            </div>
        </div>
        <button type="submit" class="AknButton AknButton--apply" id="_submit">
            {{- 'pim_user.user.login.request'|trans -}}
        </button>
    </form>
{% endblock %}

{% block deferred_javascript %}
    {{ parent() }}
    <script type="text/javascript" nonce="{{ js_nonce() }}">
      (function () {
        const username = document.getElementById('username');
        const submit = document.getElementById('_submit');
        const form = document.querySelector('form.Form');

        initPimLoginForm([username], submit, form);
      })();
    </script>
{% endblock %}