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

{% block title %}Se Connecter{% endblock %}

{% block content %}

<!-- section -->
<section class="my-lg-14 my-8">
    <div class="container">
        <!-- row -->
        <div class="row justify-content-center align-items-center">
            <div class="col-12 col-md-6 col-lg-4 order-lg-1 order-2">
                <!-- img -->
                <img src="{{ asset('assets/images/svg-graphics/signin-g.svg')}}" alt="" class="img-fluid" />
            </div>
            <!-- col -->
            <div class="col-12 col-md-6 offset-lg-1 col-lg-4 order-lg-2 order-1">
                <div class="mb-lg-9 mb-5">
                    <h1 class="mb-1 h2 fw-bold">Se connecter à Tahiti Best Promo ®</h1>
                    <p>Bienvenue sur notre site d'administration</p>
                </div>

                <form action="{{ path('app_login') }}" method="post">

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

                    {% if app.user %}
                    <div class="mb-3">
                        Vous êtes déjà connecté comme {{ app.user.userIdentifier }}, <a href="{{ path('app_logout') }}">Se déconnecter</a>
                    </div>
                    {% endif %}                                         

                    <div class="row g-3">
                    <!-- row -->                           
                        <div class="col-12">
                        <!-- input -->
                            <label class="form-label " for="username">Adresse mail</label>
                            <input type="email" value="{{ last_username }}" name="_username" id="username" class="form-control" autocomplete="email" required autofocus>
                            <div class="invalid-feedback">Merci de saisir votre adresse</div>
                        </div>
                        <div class="col-12">
                            <!-- input -->
                            <div class="password-field position-relative">
                                <label class="form-label " for="password">Mot de passe</label>                                
                                <div class="password-field position-relative">
                                    <input type="password" name="_password" id="password" class="form-control fakePassword" autocomplete="current-password" required>
                                    <span><i class="bi bi-eye-slash passwordToggler"></i></span>
                                    <div class="invalid-feedback">Merci de saisir votre mot de passe.</div>
                                </div>
                            </div>
                        </div>
                        <div class="d-flex justify-content-between">
                            <!-- form check -->
                            <div class="form-check">
                                <div class="checkbox mb-3">
                                    <label>
                                        <input type="checkbox" name="_remember_me"> Se rappeler de moi
                                    </label>
                                </div>                              
                            </div>
                        </div>
                        <input type="hidden" name="_csrf_token"
                        value="{{ csrf_token('authenticate') }}"
                        >                           
                        <!-- btn -->                        
                        <div class="col-12 d-grid">
                            <button class="btn btn-lg btn-primary" type="submit">
                                S'identifier
                            </button>                              
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>

{% block javascript %}
      <script src="{{ asset('assets/js/vendors/password.js') }}"></script>
      <script src="{{ asset('assets/js/vendors/validation.js') }}"></script>    
{% endblock %}
{#
    <form method="post">
        {% if error %}
            <div class="alert alert-danger">{{ error.messageKey|trans(error.messageData, 'security') }}</div>
        {% endif %}

        {% if app.user %}
            <div class="mb-3">
                You are logged in as {{ app.user.userIdentifier }}, <a href="{{ path('app_logout') }}">Logout</a>
            </div>
        {% endif %}

        <h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
        <label for="username">Email</label>
        <input type="email" value="{{ last_username }}" name="_username" id="username" class="form-control" autocomplete="email" required autofocus>
        <label for="password">Password</label>
        <input type="password" name="_password" id="password" class="form-control" autocomplete="current-password" required>

        <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-primary" type="submit">
            Sign in
        </button>
    </form>#}
{% endblock %}