{% extends 'layout.html.twig' %}

{% block styles_pc %}
{{ parent }}
<style>
    #login_div { max-width: 60%; }
</style>
{% endblock %}

{% block content %}
<!-- Login div -->
 <div id="login_div" class="row mx-auto shadow-sm bg-body-primary rounded">
    <!-- Login div first col -->
    <div class="col col-12 col-md-6">
        <img src="{{ asset('assets/images/zf_image_3.png') }}" class="img-fluid">
    </div>
    <!-- \ Login div first col -->
    <!-- Login div second col -->
    <div class="col col-12 col-md-6">
        <div class="d-flex align-items-center" style="height: 100%;">
            <form action="" class="w-100">
                {% if error %}
                    <div class="alert alert-danger">{{ error.messageKey|trans(error.messageData, 'security') }}</div>
                {% endif %}
                <h3 class="mb-3 text-center">Ingresar</h3>
                <div class="form-group mb-3">
                    <input type="email" value="{{ last_username }}" name="_username" id="username" class="form-control" autocomplete="email" required>
                </div>
                <div class="form-group mb-3">
                    <input type="password" name="_password" id="password" class="form-control" autocomplete="current-password" required>
                </div>
                <div class="d-grid mb-2">
                    <button class="btn btn-dark btn-lg">Entrar</button>
                </div>
                <input type="hidden" name="_csrf_token"
                    value="{{ csrf_token('authenticate') }}"
                >
                {#
                    Uncomment this section and add a remember_me option below your firewall to activate remember me functionality.
                    See https://symfony.com/doc/current/security/remember_me.html

                    <div class="checkbox mb-3">
                        <label>
                            <input type="checkbox" name="_remember_me"> Remember me
                        </label>
                    </div>
                #}
            </form>
        </div>
    </div>
    <!-- \ Login div second col -->
 </div>
<!-- \ Login div -->
{% endblock %}