{% trans_default_domain 'FOSUserBundle' %}
<div class="card">
    <div class="card-header container">
        <div class="row">
            <div class="col-md-6 align-self-center">
                <img src="{{ asset('img/kubota/kpp-logo-light.png') }}" class="w-100">
            </div>
            <div class="col-md-6">
                <div class="white-text text-center py-0">
                    <h3><strong>{{ 'Sign in'|trans }}</strong></h3>
                    <p class="mb-0">{{ 'Please, input yours credentials or login with your Google account'|trans }}</p>
                </div>
            </div>
        </div>

    </div>

    {% if error %}
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            {{ error.messageKey|trans(error.messageData, 'security') }}
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
            </button>
        </div>
    {% endif %}

    <div class="card-body px-lg-5 pt-0">
        <form id="login_form" action="{{ path("fos_user_security_check") }}" method="post" class="md-form text-center login">

                {% if csrf_token %}
                    <input type="hidden" name="_csrf_token" value="{{ csrf_token }}" />
                {% endif %}

                <div class="md-form text-left">
                    <input class="form-control" type="text" id="username" name="_username" value="{{ last_username }}" required="required" autocomplete="username" />
                    <label class="bmd-label-floating" for="username">{{ 'Username or email'|trans }}</label>
                </div>

                <div class="md-form text-left">
                    <input class="form-control" type="password" id="password" name="_password" required="required" autocomplete="current-password" />
                    <label class="bmd-label-floating" for="password">{{ 'security.login.password'|trans }}</label>
                </div>

                <div class="d-flex justify-content-around">
                    <div class="form-check">
                        <input type="checkbox" id="remember_me" name="_remember_me" value="on" class="form-check-input"/>
                        <label class="form-check-label" for="remember_me">{{ 'security.login.remember_me'|trans }}</label>
                    </div>
                    <div>
                        <a href="{{ path('fos_user_resetting_request') }}">{{ 'Forgot your password?'|trans }}</a>
                    </div>
                </div>


                <div class="g-recaptcha" data-sitekey="6LejOp4UAAAAADTa60ttynXoep5sE3zgKVoEhsOF"></div>

                <button class="btn btn-outline-info btn-rounded btn-block my-4 waves-effect z-depth-0" type="submit" id="_submit" name="_submit" value="{{ 'security.login.submit'|trans }}" >
                    <span class="button_content"><strong>{{ 'LOGIN'|trans }}</strong></span>
                </button>

                <p>{{ 'Not a member?'|trans }}
                    <a href="{{ path('fos_user_registration_register') }}">{{ 'Register'|trans }}</a>
                </p>
                
                <button class="btn btn-danger btn-rounded google" type="button" id="_submit" name="_submit" value="{{ 'security.login.submit'|trans }}" />
                    <i class="fab fa-google"></i><span>   {{ 'Sign in with Google'|trans }}</span>
                </button>

        </form>
    </div>
</div>