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

{% block body %}
    <div class="container">
        <h1 class="login--title">Identification</h1>

        {% if errors %}
            <div class="login--error--msg w-50">{{ errors.messageKey|trans(errors.messageData, 'security') }}</div>
        {% endif %}

        {{ form_start(form) }}
        <div class="form-login">


            <div class="group-login">

                {{ form_widget(form.matricule) }}
                <span class="highlight"></span><span class="bar"></span>
                {{ form_label(form.matricule,'matricule', {
                    'label_attr': {'class':'label-login'}
                }) }}
                {{ form_errors(form.matricule) }}
            </div>

            <div class="group-login">

                {{ form_widget(form.username) }}
                <span class="highlight"></span><span class="bar"></span>
                {{ form_label(form.username,'username', {
                    'label_attr': {'class':'label-login'}
                }) }}
                {{ form_errors(form.username) }}
            </div>

            <div class="group-login">
                {{ form_widget(form.password) }}
                <span class="highlight"></span><span class="bar"></span>
                {{ form_label(form.password,'password', {
                    'label_attr': {'class':'label-login'}
                }) }}
                {{ form_errors(form.password) }}
            </div>

            <div class="group-login">

                {{ form_widget(form.submit) }}
                {{ form_label(form.submit) }}
                <span class="ripplesCircle"></span></div>


            {{ form_end(form) }}
        </div>

    </div>

    {{ errors }}

{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>


        $(window, document, undefined).ready(function () {

            $('input').blur(function () {
                let $this = $(this);
                if ($this.val())
                    $this.addClass('used');
                else
                    $this.removeClass('used');
            });

            let $ripples = $('.ripples');

            $ripples.on('click.Ripples', function (e) {

                let $this = $(this);
                let $offset = $this.parent().offset();
                let $circle = $this.find('.ripplesCircle');

                let x = e.pageX - $offset.left;
                let y = e.pageY - $offset.top;

                $circle.css({
                    top: y + 'px',
                    left: x + 'px'
                });

                $this.addClass('is-active');

            });

            $('.input-matricule').change(function () {
                let matricule = $('.input-matricule').val();
                $.ajax({
                    url: '{{ path('username_loginform') }}',
                    type: 'POST',
                    dataType: 'json',
                    data: {'matricule': matricule},
                    success: function (data) {
                        let username = eval(data['username']);
                        $('.input-username').val(username);
                    }
                })

            });
        });
    </script>

{% endblock %}