{% 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_user',{userpseudo:user.pseudo}) }}>Annuler</a>
    {% else %}
        <a class="btn btn-secondary" href={{ path('app_user') }}>Annuler</a>
    {% endif %}

    {% if mode=="update" and user.id>=0 %}
    <a  href="{{ path('app_user_delete',{'id':user.id}) }}"
        class="btn btn-danger float-right"
        data-method="delete"
        data-confirm="Êtes-vous sûr de vouloir supprimer cet entregistrement ?">
          Supprimer
    </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) }}
        <a class="btn btn-info" style="width:100%; margin-bottom:15px;"  onClick="ModalLoad('extraLargeModal','Avatar','{{ path('app_crop01', {"type": "avatar", "reportinput": "user_avatar" }) }}');" title='Ajouter un avatar'>Modifier</a>
    </div>

    <div class="row justify-content-md-center">
        <div class="col-md-4">
            <div class="card mb-3" style="zoom:80%">
                <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.pseudo) }}
                    {{ form_row(form.email) }}
                </div>
            </div>    

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

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

            {%if mode!="submit" %}
                <div class="card mb-3">
                    <div class="card-header">
                        <i class="fa fa-pencil-alt fa-fw"></i> Ma Page
                    </div>
                    <div class="card-body" style="zoom:80%">
                        {% if mode=="profil" %}
                        {{ render(path("app_user_config_render",{by:mode,category:"site"})) }}
                        {% else %}
                        {{ render(path("app_admin_config_render",{by:mode,category:"site",userid:user.id})) }}
                        {% endif %}
                    </div>
                </div>  

                <div class="card mb-3">
                    <div class="card-header">
                        <i class="fa fa-pencil-alt fa-fw"></i> Social
                    </div>
                    <div class="card-body" style="zoom:80%">
                        {% if mode=="profil" %}
                        {{ render(path("app_user_config_render",{by:mode,category:"social"})) }}
                        {% else %}
                        {{ render(path("app_admin_config_render",{by:mode,category:"social",userid:user.id})) }}
                        {% endif %}
                    </div>
                </div>  

                <div class="card mb-3">
                    <div class="card-header">
                        <i class="fa fa-pencil-alt fa-fw"></i> Hero
                    </div>
                    <div class="card-body" style="zoom:80%">
                        {% if mode=="profil" %}
                        {{ render(path("app_user_config_render",{by:mode,category:"hero"})) }}
                        {% else %}
                        {{ render(path("app_admin_config_render",{by:mode,category:"hero",userid:user.id})) }}
                        {% endif %}
                    </div>
                </div>

                <div class="card mb-3">
                    <div class="card-header">
                        <i class="fa fa-pencil-alt fa-fw"></i> Images
                    </div>
                    <div class="card-body" style="zoom:80%">
                        {% if mode=="profil" %}
                        {{ render(path("app_user_config_render",{by:mode,category:"image"})) }}
                        {% else %}
                        {{ render(path("app_admin_config_render",{by:mode,category:"image",userid:user.id})) }}
                        {% endif %}
                    </div>
                </div>              
            {% endif %}
        </div>

        {%if mode!="submit" %}
            <div class="col-md-8">
                <div class="card mb-3">
                    <div class="card-header">
                        <i class="fa fa-pencil-alt fa-fw"></i> Catégories d'Illustrations
                    </div>
                    <div class="card-body">
                        {% if mode=="profil" %}
                        {{ render(path("app_user_category")) }}
                        {% else %}
                        {{ render(path("app_admin_category",{by:mode,userid:user.id})) }}
                        {% endif %}
                    </div>
                </div>  

                <div class="card mb-3">
                    <div class="card-header">
                        <i class="fa fa-pencil-alt fa-fw"></i> Illustrations
                    </div>
                    <div class="card-body">
                        {% if mode=="profil" %}
                        {{ render(path("app_user_illustration")) }}
                        {% else %}
                        {{ render(path("app_admin_illustration",{by:mode,userid:user.id})) }}
                        {% endif %}
                    </div>
                </div>  
            </div>
        {% endif %}
    </div>
{{ form_end(form) }}

<div id="extraLargeModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"></h5>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            </div>
            <div class="modal-body">
                <iframe id="frameModal" frameborder=0 width="100%" height="700px"></iframe>
            </div>
        </div>
    </div>
</div>


{% 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!="/{{appAlias}}/uploads/avatar/")
            $(this).attr('src',imgSrc);
    });
{% endblock %}