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

{% block body %}
{{ form_start(form) }}
    <h1 class="page-header">
    {% if mode=="update" %}
    Modification UTILISATEUR
    {% elseif mode=="submit" %}
    Création UTILISATEUR
    {% elseif mode=="profil" %}
    Profil UTILISATEUR
    {% endif %}
    </h1>

    {{ form_widget(form.submit) }} 
    
    {% if mode=="profil" %}
        <a class="btn btn-secondary" href={{ path('app_home') }}>Annuler</a>
    {% else %}
        <a class="btn btn-secondary" href={{ path('app_user') }}>Annuler</a>
    {% endif %}

    <br><br>

    {% if app.session.flashbag.has('error') %}
        <div class='alert alert-danger' style='margin: 5px 0px'>
            <strong>Erreur</strong><br>
            {% for flashMessage in app.session.flashbag.get('error') %}
                {{ flashMessage }}<br>
            {% endfor %}
        </div>
    {% endif %}

    {% if app.session.flashbag.has('notice') %}
        <div class='alert alert-info' style='margin: 5px 0px'>
            <strong>Information</strong><br>
            {% for flashMessage in app.session.flashbag.get('notice') %}
                {{ flashMessage }}<br>
            {% endfor %}
        </div>
    {% endif %}

    <div style="width:90px; margin:auto;">
        {% set avatar= "noavatar.png" %}
        {% if user.avatar %}
            {% set avatar= user.avatar %}
        {% endif %}
        <img id="user_avatar_img" src="{{ avatar|urlavatar }}" class="avatar big" >
        {{ form_widget(form.avatar) }}
        <bouton class="btn btn-info" style="width:100%; margin-bottom:15px;"  onClick="ModalLoad('mymodallarge','Avatar','{{ path('app_crop01', {"type": "avatar", "reportinput": "#user_avatar" }) }}');" title='Ajouter un avatar'>Modifier</bouton>
    </div>

    <div class="row justify-content-md-center">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <i class="fa fa-pencil-alt fa-fw"></i> Informations
                </div>

                <div class="card-body">
                    {{ form_row(form.username) }}
                    {% if form.password is defined %}
                        {{ form_row(form.password) }}
                    {%endif%}
                    {{ form_row(form.lastname) }}
                    {{ form_row(form.firstname) }}
                    {{ form_row(form.email) }}
                    {{ form_row(form.apikey) }}
                </div>
            </div>    
        </div>

        {% if form.roles is defined %}
        <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <i class="fa fa-pencil-alt fa-fw"></i> Organisation
                    </div>

                        <div class="card-body">
                            {{ form_row(form.groups) }}
                            {{ form_row(form.roles) }}
                        </div>
                </div>    
        </div>
        {%endif%}
    </div>
{{ form_end(form) }}

{% endblock %}

{% block localjavascript %}
    $(document).ready(function() {
        $("#user_password_first").val("");
        $("#user_login").focus();
    });

    $("#user_avatar_img").on('load', function() {

    })
    $("#user_avatar_img").on('error', function(){
        var imgSrc = $(this).attr('src');
        if(imgSrc!="{{ asset("uploads/avatar/") }}")
            $(this).attr('src',imgSrc);
    });
{% endblock %}