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

{% block contentPane %}
    <div class="tab-content tab-sliding border-0 p-0" data-swipe="right">

        <div class="tab-pane active show mh-100 px-3 px-lg-0 pb-3" id="id-tab-login">
            <!-- show this in desktop -->
            <div class="d-none d-lg-block col-md-6 offset-md-3 mt-lg-4 px-0 text-center">
                <img src="{{ asset('img/logo.png') }}" width="50px"><br/><br/>
                <h3 class="text-dark-tp4 pb-1 bold">ARA Planner</h3>
            </div>

            <!-- show this in mobile device -->
            <div class="d-lg-none text-secondary-m1 my-4 text-center">
                <a href="html/dashboard.html">
                    <i class="fa fa-leaf text-success-m2 text-200 mb-4"></i>
                </a>
                <h1 class="text-170">
                    <span class="text-blue-d1">
                        ARA Planner
                    </span>
                </h1>
                Welcome back
            </div>

            <form autocomplete="off" class="form-row mt-4" method="post">
                {% if error %}
                    <div class="alert alert-danger" style="width: 100%;text-align: center;">{{ error.messageKey|trans(error.messageData, 'security') }}</div>
                {% endif %}

                {% if app.user %}
                    <div class="mb-3">
                        You are logged in as {{ app.user.username }}, <a href="{{ path('app_logout') }}">Logout</a>
                    </div>
                {% endif %}
                <div class="form-group col-sm-10 offset-sm-1 col-md-8 offset-md-2 col-lg-6 offset-lg-3">
                    <div class="d-flex align-items-center input-floating-label text-blue brc-blue-m2">
                        <input type="email" value="{{ last_username }}" name="email" id="inputEmail" class="form-control pr-4 shadow-none" />
                        <i class="fa fa-user text-grey-m2 ml-n4"></i>
                        <label class="floating-label text-grey-l1 ml-n3" for="id-login-username">
                            Email
                        </label>
                    </div>
                </div>


                <div class="form-group col-sm-10 offset-sm-1 col-md-8 offset-md-2 col-lg-6 offset-lg-3 mt-2 mt-md-1">
                    <div class="d-flex align-items-center input-floating-label text-blue brc-blue-m2">
                        <input type="password" name="password" id="inputPassword" class="form-control pr-4 shadow-none" />
                        <i class="fa fa-key text-grey-m2 ml-n4"></i>
                        <label class="floating-label text-grey-l1 ml-n3" for="id-login-password">
                            Mot de passe
                        </label>
                    </div>
                </div>
                <div class="col-sm-10 offset-sm-1 col-md-8 offset-md-2 col-lg-6 offset-lg-3 text-left text-md-left mt-n2 mb-2">
                    <a href="#" id="show-password" class="text-80">
                        Afficher le mot de passe en clair
                    </a>
                </div>
                <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
                <hr/>

                <div class="form-group col-sm-10 offset-sm-1 col-md-8 offset-md-2 col-lg-6 offset-lg-3">
                    <!--<label class="d-inline-block mb-0 text-dark-l1 mb-3">
                        <input type="checkbox" class="mr-1" id="id-remember-me" />
                        Se rappeler de moi
                    </label>-->

                    <button type="submit" class="btn btn-primary btn-block px-4 btn-bold mt-2 mb-4">
                        Connexion
                    </button>
                </div>
            </form>
        </div>

    </div>
{% endblock %}

{% block javascripts %}
    <script type="text/javascript">
        jQuery(function ($) {
            $(document).ready(function () {
                $('#show-password').click(function() {
                    if($('#inputPassword').prop('type') == 'password') {
                        //Si c'est un input type password
                        $('#inputPassword').prop('type','text');
                    } else {
                        //Sinon
                        $('#inputPassword').prop('type','password');
                    }
                });
            });
        });
    </script>
{% endblock %}