{% extends "frontend/base.html.twig" %}

{% block titulo %}Edición de la cuenta{% endblock %}

{% block stylesheet %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ SITE_URL }}css/jquery.plupload.queue.css" />
{% endblock stylesheet %}

{% block twoOne %}      

    <section class="container"> 
        
        <h2>Edición de la cuenta</h2>           
        
        <form method="post" action="{{ url('profile') }}" class="form">
            <fieldset>
                <label>Nombre de usuario:</label>
                <input disabled name="username" type="text" value="{{ user.username }}">
            </fieldset>

            <fieldset>
                <label>Nombre:</label>
                <input name="first_name" type="text" value="{{ user.first_name }}">
            </fieldset>

            <fieldset>
                <label>Apellido:</label>
                <input name="last_name" type="text" value="{{ user.last_name }}">
            </fieldset>

            <fieldset>
                <label>Email: </label><em class="required">*</em>
                <input name="email" type="text" value="{{ user.email }}">
            </fieldset>

            <fieldset>
                <label>Sitio web: </label>
                <input name="website" type="text" value="{{ user.website }}">
            </fieldset>

            <fieldset>    
                <input class="button bGreen" value="Actualizar" type="submit">
            </fieldset>
        </form>
        
        <div id="html5_uploader">You browser doesn't support native upload. Try Firefox 3 or Safari 4.</div>

    {% for k,v in user %}    
        {{ k }} => {{ v }}<br />    
    {% endfor %}                  

    </section>
            
{% endblock twoOne %}

{% block twoTwo %}        
    {{ parent() }}
    <div class="box" style="overflow:hidden;">
        <h3>Imágenes de tu perfil</h3>
        <p style="padding:4px 20px;">Si tienes más de una foto y no indicas cual es la foto principal, la primera foto será la foto principal de tu cuenta.</p>
        {# family_id:3 -> User  source_id:x -> id del usuario #}
        {{ render("image","backend","renderImages",{'parent':'user','parent_id':user.user_id}) }} 
    </div>    
{% endblock twoTwo %}
    
{% block javascript %}
    
    {{ parent() }}
    
    <script>
    
    $('document').ready(function(){
    
        $("#html5_uploader").pluploadQueue({
            // General settings
            runtimes : 'html5',
            url : '{{ url('backend-image-upload',{'parent':'user','parent_id':user.user_id,'categories_id':91}) }}',
            max_file_size : '10mb',
            chunk_size : '1mb',
            unique_names : true,
            dragdrop : true,
            filters : [
                {title : "Image files", extensions : "jpg,jpeg,gif,png"},
            ],
            init : {
                StateChanged: function(up) {
                    if (up.files.length === (up.total.uploaded + up.total.failed)) {
                        //location.href = ''; //recarga la página cuando ha cargado todas las fotos
                    }
                },
            }            
        });
    
    });
    
    </script>
    
{% endblock javascript %}