{% extends '_partials/base-login.html.twig' %}

{% block title %}Log in!{% endblock %}

{% block body %}
    <div class="d-flex justify-content-center align-items-center" style="height: 100vh;">
        <div class="container">
            <div class="card col-12 col-md-6 col-lg-8 col-xl-4 m-auto">
                <div class="card-body">
                    <form method="post">

                       <div class="w-100">
                           <div class="m-auto" style="width: 100px;">
                               <img src="{{ icon(app.request.attributes.get('instance')) }}" height="100"
                                    alt="{{ app.request.attributes.get('instance') | capitalize }}">
                           </div>
                       </div>

                        {% if error %}
                            <div class="mt-5 alert alert-danger">{{ error.messageKey|trans(error.messageData, 'security') }}</div>
                        {% endif %}

                        <label for="inputEmail">Email</label>

                        <input type="email" value="{{ last_username }}" name="email" id="inputEmail" class="form-control"
                               required autofocus>

                        <div class="mt-3">
                            <label for="inputPassword">Password</label>
                        </div>

                        <input type="password" name="password" id="inputPassword" class="form-control" required>


                        <input type="hidden" name="_csrf_token"
                               value="{{ csrf_token('authenticate') }}">


                        <div class="my-5">
                            <label class="checkbox checkbox-outline checkbox-outline-2x checkbox-primary" for="remember_me">
                                <input id="remember_me" type="checkbox" name="remember_me">
                                <span></span>&nbsp;Remember me
                            </label>
                        </div>

                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <button class="btn btn-primary btn-pill btn-lg" type="submit">
                                    Sign in
                                </button>
                            </div>

                            <div class="text-center">
                                <a class="btn btn-outline-primary btn-pill btn-lg" href="{{ path('register') }}">Register</a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

        </div>
    </div>
{% endblock %}