{% extends "@FOSUser/layout.html.twig" %}
{% trans_default_domain 'FOSUserBundle' %}

{% block stylesheets %}

    {{ parent() }}

    <style>
        label {
            margin-bottom: 0px;
        }

        .connect_ms a {
            text-decoration: underline;
        }

        .connect_ms p {
            font-size: 11.3px !important;
        }
    </style>

{% endblock %}

{% block title %}
    Authentification
{% endblock %}

{% block fos_user_width %}login-bloc{% endblock fos_user_width %}

{% block fos_user_title %}
    Sign-in

{% endblock fos_user_title %}

{% block fos_user_content %}

    <div>

        <form id="fos_user_login_form" class="fos_user_login_form"
              action="{{ path("fos_user_security_check") }}"
              method="post">
            <label class=" mt-2" ><b style="color:#002e5f">Enter your @mail and password</b></label>
            {% if csrf_token %}
                <input type="hidden" name="_csrf_token" value="{{ csrf_token }}"/>
            {% endif %}

            <div class="mb-3">
                <label class="sr-only">{{ 'security.login.username'|trans }}</label>
                <input type="text" id="username" name="_username"
                       class="form-control check-input check-input-required"
                       placeholder="{{ 'security.login.username'|trans }}"
                       autocomplete="username"
                >
                <div class="alert-validation-field alert_username"></div>
            </div>

            <div class="mb-2">
                <label class="sr-only">{{ 'security.login.password'|trans }}</label>
                <div class="input-group show-hide-password">
                    <input type="password" id="password" name="_password"
                           class="form-control check-input check-input-required"
                           placeholder="{{ 'security.login.password'|trans }}"
                           autocomplete="current-password"
                    >
                    <div class="input-group-append">
                        <span class="input-group-text pointer toggle-password-action"><i
                                    class="fas fa-eye-slash"></i></span>
                    </div>
                </div>
                <div class="alert-validation-field alert_password"></div>
            </div>
            <div class="row mb-2 mb-sm-4 bloc-pw">
                <div class="col-sm-6 col-md-6 col-lg-6 col-xl-6">
                    <label class="small">
                        <input class="checkbox_animated" type="checkbox" id="remember_me" name="_remember_me">
                        {{ 'security.login.remember_me'|trans }}</label>
                </div>

                {#<div class="col-sm-6 col-md-6 col-lg-6 col-xl-6 small reset-pw">#}
                    {#<a href="{{ path('fos_user_resetting_request') }}">  Mot de passe oublié ?</a>#}
                {#</div>#}
            </div>
            <div class="extra_bloc mb-3">
            </div>

            <div class="mb-2 text-center">
                <button class="btn btn-primary validate-btn submit-form-login w-100"
                        type="button">{{ 'security.login.submit'|trans }}</button>
            </div>
        </form>
    </div>

{% endblock fos_user_content %}

{% block javascripts %}

    {{ parent() }}

    <script>
        $(document).on("click", ".fos_user_login_form .submit-form-login", function () {
            if (verifyRequiredFieldsAlert()) {
                $('.fos_user_login_form').submit();
            }
        });

        $(document).on('click', '.toggle-password-action', function() {
            $(this).find('i').toggleClass("fa-eye fa-eye-slash");
            var input = $("#password");
            if (input.attr("type") === "password") {
                input.attr("type", "text");
            } else {
                input.attr("type", "password");
            }
        });

    </script>

{% endblock %}