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

{% block title %}{{ 'btn.login'|trans }}{% endblock %}
{% block javascripts %}
{{ parent() }}
<script src="https://accounts.google.com/gsi/client" async defer></script>
{% endblock %}
{% block body %}
<form method="post" class="form d-grid gap-2 col-10 mx-auto">
    {% if error %}
    <div class="alert alert-danger">{{ error.messageKey|trans(error.messageData, 'security') }}</div>
    {% endif %}

    {% if app.user %}
    <div class="mb-3">
       {{ 'security.logged_in_as'|trans }}  {{ app.user.userIdentifier }}, <a href="{{ path('app_logout') }}">{{ 'btn.logout'|trans }}</a>
    </div>
    {% endif %}

    <h1 class="text-primary">{{ "title.login"|trans }}</h1>
    <label for="username">{{ "form.label.email"|trans }}</label>
    <input type="email" value="{{ last_username }}" name="_username" id="username" class="form-control"
        autocomplete="email" required autofocus>
    <label for="password">{{ "form.label.password"|trans }}</label>
    <input type="password" name="_password" id="password" class="form-control" autocomplete="current-password" required>


    <input type="hidden" name="_csrf_token" data-controller="csrf-protection" 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">
        <input type="checkbox" name="_remember_me" id="_remember_me">
        <label for="_remember_me">{{ 'form.remember_me'|trans }}</label>
    </div>


    <a href="{{path('app_password_forgot')}}" class="text-dark my-4"><small class=" px-4">{{
            "btn.forgotPwd"|trans
            }}</small></a>
    <div class="d-grid gap-4">
        <button class="btn btn-primary col-6 rounded-4 mx-auto" type="submit">
            {{ "btn.signIn"|trans }}
        </button>
        <p class="text-center">{{ 'social.or_connect'|trans }}</p>
        <div class="g_id_signin d-flex justify-content-center" data-type="standard" data-shape="pill"
            data-theme="outline" data-text="signin_with" data-size="large" data-logo_alignment="center"
            data-width="400">
        </div>

    </div>
</form>
<div class="position-fixed bottom-0 w-100 mb-4 pb-4">
    <div class="col-10 mx-auto d-flex">
        <a href="{{path('app_register')}}" class="btn btn-light  w-100">{{ "btn.register"|trans }}</a>
        <a href="{{path('app_login')}}" class="btn btn-light active w-100">{{ "btn.login"|trans }}</a>
    </div>
</div>
<div id="g_id_onload" data-client_id="{{ googleAppId }}" data-context="signin" data-ux_mode="popup"
    data-login_uri="{{path('app_g_login')}}" data-auto_prompt="false">
</div>

{% endblock %}