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

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

{% block body %}

<style>
body { background-color: #fff; }
body .example-wrapper { width: 500px; max-width: 90%;}
body .example-wrapper label {font-weight: 300; display: flex;align-items: center; gap: 10px;}
body .example-wrapper .illustration {text-align:center; padding:0 0 20px; font-size:100px; color:#2980ef;}
body .example-wrapper .login-form input { padding-left: 60px;}
body .example-wrapper .login-form .field-wrapper { position: relative}
body .example-wrapper .login-form .field-wrapper .icon { position: absolute;left: 0;top: 21px;color: #ffffff;font-size: 22px; background-color: #000;padding: 0 10px; height: 33px; border-radius: 5px 0 0 5px; border: 1px solid #ced4da; border-right:none; line-height:33px;}

</style>

    <div class="example-wrapper">

        <h1 class=" text-center mb-5">Einloggen</h1>

        {% if app.user %}
            <div class="mb-3 ">
                Du bist eingeloggt als {{ app.user.userIdentifier }}, <a href="{{ path('app_logout') }}">Abmelden</a>
            </div>
        {% else %}

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

            <div class="login-form border-left-warning">

                <form method="post">

                    {# <div class="illustration"><i class="bi bi-person-bounding-box"></i></div> #}

                    <div class="field-wrapper">
                        <label for="inputEmail">Email</label>
                        <i class="icon ion-ios-email-outline"></i>
                        <input type="email" value="{{ last_username }}" name="email" id="inputEmail" class="form-control" autocomplete="email" required autofocus>
                    </div>    

                    <div class="field-wrapper">
                        <label for="inputPassword">Password</label>
                        <i class="icon ion-ios-locked-outline"></i>                        
                        <input type="password" name="password" id="inputPassword" class="form-control" autocomplete="current-password" required>
                    </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>

                    <button class="btn btn-lg btn-success signup-btn" type="submit">
                        Login
                    </button>

                </form>

            </div> 

        {% endif %}

    </div> 

{% endblock %}