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

{% block title %}Sign Up!{% endblock %}

{% block body %}


    {% include '/loader/loader.html.twig' %}
    <div id="Login" class="Page">
        {% for message in app.flashes('error') %}
            <div class="alert alert-danger" style="margin:20px;">
                {{ message |raw }}
            </div>
        {% endfor %}
        <div class="container-fluid">
            <div class="row">
                <div class="loginPresent col-lg-9 col-md-6 col-sm-12 h-100">
                    <h3 class="w-100 text-center font-size-large black pt-5 pb-5">Bienvenue sur l'espace de gestion
                        Syma'Nagement</h3>
                    <div style="height: 30%">
                        <div class="row">
                            <div class="col-lg-6 col-md-6 col-sm-12">
                                <div>Some text</div>
                                <div>Sub text</div>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-12 h-100">
                                <img src="https://via.placeholder.com/800x300.png" class="h-100"/>
                            </div>
                        </div>
                    </div>
                    <div style="height: 30%">
                        <div class="row">
                            <div class="col-lg-6 col-md-6 col-sm-12 h-100">
                                <img src="https://via.placeholder.com/800x300.png" class="h-100"/>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-12">
                                <div>Some text</div>
                                <div>Sub text</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="loginConnect col-lg-3 col-md-6 col-sm-12">
                    <div class="center-vertical">
                        <div class="h-auto">
                            <h3 class="w-100 text-center font-size-large black pt-5 pb-3">
                                Syma'Nagement
                            </h3>
                            <div class="text-center black ml-auto mr-auto pb-3 w-100" style="">
                                <p>Pour vous connecter, remplissez les</p>
                                <p>champs ci-dessous :</p>
                            </div>
                            <div class="container ml-auto mr-auto" style="width: 90%">
                                <form class="form-horizontal form-simple" action="{{ path('app_login') }}" method="post"
                                      novalidate>
                                    <div class="form-group mb-50">
                                        <label class="text-bold-600" for="exampleInputEmail1">Adresse Email</label>
                                        <input type="text" class="form-control form-control-lg" name="user-email"
                                               id="user-email" placeholder="Email" required/>
                                    </div>
                                    <div class="form-group">
                                        <label class="text-bold-600"
                                               for="exampleInputPassword1">Mot de passe</label>
                                        <input type="password" class="form-control form-control-lg" name="user-password"
                                               id="user-password"
                                               placeholder="Mot de passe" required>
                                    </div>
                                    <div class="form-group d-flex flex-md-row flex-column justify-content-between align-items-center pb-3">
                                        <div class="text-left">
                                            <div class="checkbox checkbox-sm">
                                                <input type="checkbox" class="form-check-input"
                                                       id="exampleCheck1">
                                                <label class="checkboxsmall" for="exampleCheck1"><small>Rester
                                                        connecté</small>
                                                </label>
                                            </div>
                                        </div>
                                        <div class="text-right"><a href="{{ path("app_forgot_password_request") }}"
                                                                   class="card-link"><small>Mot de passe oublié</small></a>
                                        </div>
                                    </div>
                                    <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
                                    <button type="submit"
                                            class="btn btn-primary glow position-relative float-right">
                                        Se connecter
                                        <i id="icon-arrow" class="bx bx-right-arrow-alt"></i>
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

{% endblock %}

{% block javascripts %}

    <script>
        function displayOn() {
            document.getElementById("loader").style.display = "none";
            document.getElementById("Login").style.display = "flex";
        }

        $(document).ready(function () {
            displayOn();
        });
    </script>

{% endblock %}