{% extends "front/default/base.html.twig" %}

{% trans_default_domain 'front_customer' %}

{% set seoTitle = "Connexion à votre espace client"|trans %}
{% set seoNoIndex = false %}

{% block stylesheets %}

    {{ parent() }}

    <!-- Page stylesheet -->
    {{ encore_entry_link_tags('front-default-customer', null, 'front_default') }}

{% endblock %}

{% block javascripts %}

    {{ parent() }}

    <!-- Page javascript -->
    {% for file in encore_entry_js_files('front-default-customer', 'front_default') %}
        <script src="{{ asset(file) }}" defer></script>
    {% endfor %}

{% endblock %}

{% block body %}

    {{ website|newZone({
        'title': 'Espace client'|trans,
        'seo': null,
        'position': 1,
        'fullSize': true,
        'blocks': { (1): {'titleheader': { 'titleForce': 1 } }}
    }) }}

    <div class="container pt-5 pb-5">

        {% if is_granted('ROLE_ADMIN') %}
            {% include 'admin/include/alert.html.twig' with {"alert": "info", "message": "Vous êtes déjà connecté comme administrateur. Pour changer d'utilisateur, veuillez sélectionner un compte dans le commutateur."|trans} only %}
        {% else %}

            <form id="login-form" class="form-horizontal" action="{{ path('costumer_login') }}" method="POST" novalidate="novalidate">

                <div class="form-group">
                    <input type="text"
                           value="{{ last_username }}"
                           name="login"
                           class="form-control"
                           placeholder="{{ "Nom d'utilisateur"|trans }}"
                           autocomplete="off"
                           required autofocus />
                </div>

                <div class="form-group">
                    <input type="password"
                           name="password"
                           class="form-control"
                           placeholder="{{ 'Mot de passe'|trans }}"
                           autocomplete="off" required />
                </div>

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

                <div class="row mb-4">
                    <div class="col-sm-6 text-center text-sm-left">
                        <div class="form-group m-0">
                            <div class="custom-control custom-checkbox d-inline-block">
                                <label>
                                    <input type="checkbox" name="_remember_me" class="custom-control-input" checked>
                                    <label class="custom-control-label" for="remember_me">{{ 'Se rappler de moi'|trans }}</label>
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6 text-center text-sm-right">
                        <a href="{{ path("security_front_password_request", {"_locale": app.request.locale}) }}" id="to-recover" class="text-dark">
                            <small class="text-italic">{{ 'Mot de passe oublié ?'|trans }}</small>
                        </a>
                    </div>
                </div>

                {% if error %}
                    {% include 'security/includes/alert.html.twig' with {"type": 'danger', "message": error.messageKey|trans(error.messageData, 'security')} only %}
                {% endif %}

                {% include "security/includes/flashbag.html.twig" %}

                <button class="btn btn-lg btn-secondary btn-block text-uppercase" type="submit">{{ 'Se connecter'|trans }}</button>

            </form>

        {% endif %}

    </div>

{% endblock %}