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

{% block title %}JDWS - Espace Back Office{% endblock %}
{% block csslinks %}
    <style>
        .border-md {
            border-width: 2px;
        }

        .form-control:not(select) {
            padding: 1.5rem 0.5rem;
        }

        select.form-control {
            height: 52px;
            padding-left: 0.5rem;
        }

        .form-control::placeholder {
            color: #ccc;
            font-weight: bold;
            font-size: 0.9rem;
        }

        .form-control:focus {
            box-shadow: none;
        }

        body {
            background-image: url("/assets/img/landing/sad_2.png");
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-position: 45% -50%;
        }
    </style>
{% endblock %}
{% block content %}
    <div class="container">
        <div class="row py-5 mt-4 align-items-center">
            <div class="col-md-1 pr-lg-1"></div>
            <div class="col-md-4 pr-lg-4 mb-5 mb-md-0">
                <img src="/assets/img/test-back.png" alt=""
                     class="img-fluid mb-3 d-none d-md-block">
                <h1>Back Office</h1>
                <p class="font-italic text-muted mb-0">Connectez-vous pour traiter/visualiser les signalisations de
                    VBG reçues.</p>
            </div>

            <div class="col-md-6 col-lg-6 ml-auto">
                <p><h4 class="text-dark">Renseignez vos informations de connexion</h4></p>
                <form method="post" id="secure-login">
                    <input type="hidden" name="token" value="{{ csrf_token('login_token') }}">
                    {% if error %}
                        <div class="alert alert-danger">
                            <i class="fa fa-times"></i> {{ 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('logout') }}">Logout</a>
                        </div>
                    {% endif %}
                    <p class="antispam">Ne pas remplir ce champ: <input id="whoareyou" type="text" name="whoareyou" /></p>
                    <div class="row">
                        <div class="input-group col-lg-12 mb-4">
                            <div class="input-group-prepend">
                            <span class="input-group-text bg-white px-4 border-md border-right-0">
                                <i class="fa fa-envelope text-muted"></i>
                            </span>
                            </div>
                            <input id="email" type="email" required value="{{ last_username }}"
                                   name="email" placeholder="Saisir votre email.."
                                   class="form-control bg-white border-left-0 border-md">
                        </div>

                        <div class="input-group col-lg-8 mb-4">
                            <!--<div class="input-group col-lg-6 mb-4">-->
                            <div class="input-group-prepend">
                            <span class="input-group-text bg-white px-4 border-md border-right-0">
                                <i class="fa fa-lock text-muted"></i>
                            </span>
                            </div>
                            <input id="password" type="password" name="password" required
                                   placeholder="Saisir votre mot de passe.."
                                   class="form-control bg-white border-left-0 border-md">
                        </div>
                        <div class="input-group col-lg-12 mb-4">
                            <div class="input-group-prepend">
                            <span class="input-group-text bg-white px-4 border-md border-right-0">
                                <i class="fa fa-flag text-muted"></i>
                            </span>
                            </div>
                            <select id="pays" name="pays" required
                                    class="form-control custom-select bg-white border-left-0 border-md">
                                <option value="">Choisir votre pays</option>
                                {% for pays in listPays %}
                                    <option value="{{ pays.id }}">{{ pays.nom }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <input type="hidden" name="_csrf_token"
                               value="{{ csrf_token('authenticate') }}"
                        >
                        <div class="form-group col-lg-12 mx-auto mb-0">
                            <button id="btn-login" value="connexion" class="btn btn-danger btn-block py-2">
                                <span class="font-weight-bold">Connexion <i class="fas fa-sign-in-alt"></i></span>
                            </button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="col-md-1 pr-lg-1"></div>
        </div>
    </div>
{% endblock %}
{% block jslinks %}
    <script>
        $(function () {
            $('input, select').on('focus', function () {
                $(this).parent().find('.input-group-text').css('border-color', '#80bdff');
            });
            $('input, select').on('blur', function () {
                $(this).parent().find('.input-group-text').css('border-color', '#ced4da');
            });
        });
    </script>
{% endblock %}