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

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

{% block body %}

    <div id="loader">
        <div class="loader"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
    </div>
    <div id="Login" class="content-body h-100 w-100"><!-- login page start -->
        {% for message in app.flashes('error') %}
            <div class="alert alert-danger" style="margin:20px;">
                {{ message |raw }}
            </div>
        {% endfor %}
        <section class="row flexbox-container h-100 w-100">
            <div class="col-xl-4 col-mid-4 col-11 center-vertical ml-auto mr-auto">
                <div class="card bg-authentication mb-0">
                    <div class="row m-0 w-100">
                        <!-- register section left -->
                        <div class="col-md-12 col-12 px-0 ml-auto mr-auto">
                            <div class="card disable-rounded-right mb-0 p-2 h-100 d-flex justify-content-center">
                                <div class="card-header pb-1">
                                    <div class="card-title">
                                        <h4 class="text-center mb-2 inscription_title">Syma Group</h4>
                                    </div>
                                </div>

                                <div class="card-content">
                                    <div class="card-body">
                                        <div class="text-left inscription_subTitle pb-2">
                                            <span>Inscription</span>
                                        </div>
                                        {{ form_start(form) }}
                                        <div class="my-custom-class-for-errors">
                                            {{ form_errors(form) }}
                                        </div>
                                        <div class="form-group mb-2">
                                            {{ form_row(form.email) }}
                                        </div>
                                        <div class="form-group mb-2">
                                            {{ form_row(form.password) }}
                                        </div>
                                        <div class="form-group mb-2">
                                            {{ form_row(form.firstname) }}
                                        </div>
                                        <div class="form-group mb-2">
                                            {{ form_row(form.lastname) }}
                                        </div>
                                        <div class="form-group mb-2">
                                            {{ form_row(form.save) }}
                                        </div>
                                        {{ form_end(form) }}
                                        <hr>
                                        <div class="text-center">
                                            <small class="mr-25">Vous avez déjà un compte?</small>
                                            <a href="{{ path('app_login') }}">
                                                <small>Se connecter</small>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </section>
        <!-- register section endss -->
    </div>

{% endblock %}
{% block javascripts %}

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

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

{% endblock %}