{% extends '/admin/unauthenticated/layout/base.html.twig' %}
{% import '/admin/components/helpers_macro.html.twig' as helpers %}

{% block title %}
    Login
{% endblock %}

{% block content %}

    {% if error %}
        {{ helpers.alertError('Unable to authenticate the user.') }}
    {% endif %}

    <p class="login-box-msg">Sign in to start your session</p>

    <form id="form_login"
          action="{{ path('bo_login') }}"
          method="post"
          data-recaptcha-v3-site-key="{{ recaptchaV3SiteKey }}"
          novalidate
          name="form_login">
        <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
        <input type="hidden" name="g-recaptcha-response">

        <div class="form-group">
            <div class="input-group">
                <input type="email" required maxlength="255" minlength="2" name="_username" class="form-control"
                       placeholder="Email">
                <div class="input-group-append">
                    <div class="input-group-text">
                        <span class="far fa-envelope"></span>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="input-group">
                <input type="password"
                       required
                       maxlength="255"
                       minlength="2"
                       name="_password"
                       class="form-control"
                       id="loginPasswordField"
                       placeholder="Password">

                <div class="input-group-append btnTogglePassword" role="button"
                     data-password-field="#loginPasswordField"
                     data-icon="#eyeIcon">

                    <div class="input-group-text">
                        <span id="eyeIcon" class="far fa-eye-slash"></span>
                    </div>
                </div>
            </div>
        </div>

        <div class="row mb-2">
            <div class="col text-center">
                <div class="icheck-primary">
                    <input id="_remember_me" type="checkbox" name="_remember_me" checked/>
                    <label for="_remember_me">
                        Remember Me
                    </label>
                </div>
            </div>
        </div>
        <div class="row mb-2">
            <div class="col text-center">
                <button id="btnLogin" class="btn btn-primary btn-block">Sign In</button>
            </div>
        </div>
        <div class="row mb-4">
            <div class="col text-center">
                <a href="{{ path('bo_change_password_enter_email') }}">I forgot my password</a>
            </div>
        </div>
        <div class="row">
            <div class="col text-center">
                {{ helpers.recaptchaV3Description() }}
            </div>
        </div>
    </form>
{% endblock %}


{% block js %}
    {{ parent() }}

    <script src="{{ asset('/app/admin/js/unauthenticated/security/login/LoginFormValidator.js') }}"></script>
    <script src="{{ asset('/app/admin/js/unauthenticated/security/login/LoginFormPage.js') }}"></script>
    <script src="{{ asset('/app/admin/js/authenticated/layout/Common/TogglePassword.js') }}"></script>
    <script>
        (new LoginFormPage()).init();
        (new TogglePassword()).init();
    </script>
{% endblock %}