{% extends "@index/base.html.twig" %}

{% set page_id = 'backend' %}
{% set noindex = true %}
{% set oneColumn = true %}

{% block titulo %}Blog backend editor{% endblock %}

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

{% block bread %}
    {{ breadCrumbs | raw }}
{% endblock bread %}

{% block lang %}{% endblock lang %}
    
{% block oneOne %}     
    
    {% if item.id %}
        <form method="post" action="{{ url('backend-blog-edit',{'id':item.id}) }}" class="form">
    {% else %}
        <form method="post" action="{{ url('backend-blog-create') }}" class="form">
    {% endif %}              
                
        <section class="editor">
            
            {% if SESSION.langs %}
                {# TITLE #}
                <h2>Título</h2>
                <div class="tabs">
                    <ul>
                        {% for k,lang in SESSION.langs %}
                             <li><a href="#title-{{ k }}">{{ lang }}</a></li>
                        {% endfor %}
                    </ul>

                    {% for k,lang in SESSION.langs %}
                        <div id="title-{{ k }}">
                            <fieldset>
                                <input type="text" value="{{ k == SESSION.default_lang ? item.title : attribute(item, 'title_'~k ) }}" name="{{ k == SESSION.default_lang ? 'title' : 'title_'~k }}" placeholder="Título en {{ lang }}" />
                            </fieldset>                    
                        </div>
                    {% endfor %}                        
                </div> 
                {# SLUG #}
                <h2>Slug</h2>
                <div class="tabs">
                    <ul>
                        {% for k,lang in SESSION.langs %}
                             <li><a href="#slug-{{ k }}">{{ lang }}</a></li>
                        {% endfor %}
                    </ul>

                    {% for k,lang in SESSION.langs %}
                        <div id="slug-{{ k }}">
                            <fieldset>
                                <p>El slug se genera automáticamente si se deja en blanco</p>
                                <input type="text" value="{{ k == SESSION.default_lang ? item.slug : attribute(item, 'slug_'~k ) }}" name="{{ k == SESSION.default_lang ? 'slug' : 'slug_'~k }}" placeholder="Slug en {{ lang }}" />
                            </fieldset>                     
                        </div>
                    {% endfor %}                        
                </div>      
                {# DESCRIPCION #}
                <h2>Descripción</h2>
                <div class="tabs">
                    <ul>
                        {% for k,lang in SESSION.langs %}
                             <li><a href="#description-{{ k }}">{{ lang }}</a></li>
                        {% endfor %}
                    </ul>

                    {% for k,lang in SESSION.langs %}
                        <div id="description-{{ k }}">
                            <fieldset>
                                <textarea class="ckeditor" cols="80" id="{{ k == SESSION.default_lang ? 'description' : 'description|'~k }}" name="{{ k == SESSION.default_lang ? 'description' : 'description_'~k }}" placeholder="Descripción en {{ lang }}" rows="10">
                                    {{ k == SESSION.default_lang ? item.description : attribute(item, 'description_'~k ) }}
                                </textarea>
                            </fieldset>                      
                        </div>
                    {% endfor %}                        
                </div>  
                {# RESUMEN #}
                <h2>Sumario</h2>
                <div class="tabs">
                    <ul>
                        {% for k,lang in SESSION.langs %}
                             <li><a href="#summary-{{ k }}">{{ lang }}</a></li>
                        {% endfor %}
                    </ul>

                    {% for k,lang in SESSION.langs %}
                        <div id="summary-{{ k }}">
                            <fieldset>
                                <textarea cols="80" id="summary" name="{{ k == SESSION.default_lang ? 'summary' : 'summary_'~k }}" placeholder="Resumen en {{ lang }}" rows="4">
                                    {{ k == SESSION.default_lang ? item.summary : attribute(item, 'summary_'~k ) }}
                                </textarea>
                            </fieldset>                     
                        </div>
                    {% endfor %}                        
                </div>                
            {% else %}
                {# TITLE #}
                <fieldset>
                    <label>Título</label>                
                    <input type="text" name="title" value="{{ item.title }}" />
                </fieldset>
                {# SLUG #}
                <fieldset>
                    <label>Slug</label>
                    <p>El slug se genera automáticamente si se deja en blanco</p>
                    <input type="text" name="slug" value="{{ item.slug }}" />
                </fieldset>         
                {# DESCRIPCION #}
                <fieldset>
                    <label>Descripción</label>
                    <textarea class="ckeditor" cols="80" id="description" name="description" rows="10">
                        {{ item.description }}
                    </textarea>
                </fieldset>                  
                {# RESUMEN #}
                <fieldset>
                    <label>Sumario</label>
                    <textarea class="ckeditor" cols="80" id="summary" name="summary" rows="10">
                        {{ item.summary }}
                    </textarea>
                </fieldset>                  
            {% endif %}                                 

            {# Videos relacionados #}
            {{ render("widgets","relationShip","widgetRelationShipBackend",{'parent':'blog','parent_id':item.id} ) }}
                
        </section>
       
        <aside class="editor">

            <div class="box publishDate">
                <h3>Publicación</h3>
                <fieldset>
                    <label>Fecha de publicación</label>
                    <input type="text" id="datepicker" name="date_publish" value="{{ item.date_publish | date('d-m-Y H:i') }}" />
                    {% if item.id is not empty %}
                        {% if item.state == 0 %}
                            <p class="pending">Publicación desactivada</p>
                        {% elseif item.visibility == 0 %}
                            <p class="pending">Publicación privada</p>                        
                        {% elseif item.date_publish > 'now' | date('Y-m-d H:i:s') %}
                            <p class="pending">Publicación prevista dentro de {{ dateDiff(item.date_publish, date('now')) }}</p>
                        {% else %}
                            <p class="published">Publicado hace {{ dateDiff(item.date_publish, date('now')) }}</p>
                        {% endif %}
                    {% endif %}
                </fieldset>
                <button class="bGreen">{{ item.id ? 'Actualizar' : 'Publicar'}}</button>
            </div>
                
            <div class="box">
                <h3>Opciones de publicación</h3>                
                
                <p class="field switch">
                    <input type="hidden" name="visibility" value="{{ item.id is empty ? 1 : item.visibility }}" />
                    <label class="cb-enable{{ item.visibility or item.id is empty ? " selected" : "" }}">
                        <span>Sí</span>
                    </label>
                    <label class="cb-disable{{ item.visibility ? "" : " selected" }}">
                        <span>No</span>
                    </label>
                    <span style="padding-left:10px;">Entrada pública (no = privada)</span>
                </p>
                
                <p class="field switch">
                    <input type="hidden" name="persistence" value="{{ item.id is empty ? 0 : item.persistence }}" />
                    <label class="cb-enable{{ item.persistence ? " selected" : "" }}">
                        <span>Sí</span>
                    </label>
                    <label class="cb-disable{{ item.persistence ? "" : " selected" }}">
                        <span>No</span>
                    </label>            
                    <span style="padding-left:10px;">Mantener en la home</span>
                </p> 
                
                <p class="field switch">
                    <input type="hidden" name="allow_comments" value="{{ item.id is empty ? 1 : item.allow_comments }}" />
                    <label class="cb-enable{{ item.allow_comments or item.id is empty ? " selected" : "" }}">
                        <span>Sí</span>
                    </label>
                    <label class="cb-disable{{ item.allow_comments ? "" : " selected" }}">
                        <span>No</span>
                    </label>            
                    <span style="padding-left:10px;">Permitir comentarios</span>
                </p>     
                
                <p class="field switch">
                    <input type="hidden" name="allow_guests_comments" value="{{ item.id is empty ? 1 : item.allow_guests_comments }}" />
                    <label class="cb-enable{{ item.allow_guests_comments or item.id is empty ? " selected" : "" }}">
                        <span>Sí</span>
                    </label>
                    <label class="cb-disable{{ item.allow_guests_comments ? "" : " selected" }}">
                        <span>No</span>
                    </label>            
                    <span style="padding-left:10px;">Permitir comentarios de usuarios sin registrar</span>
                </p>                
                
                <p class="field switch">
                    <input type="hidden" name="state" value="{{ item.id is empty ? 1 : item.state }}" />
                    <label class="cb-enable{{ item.state or item.id is empty ? " selected" : "" }}">
                        <span>Sí</span>
                    </label>
                    <label class="cb-disable{{ item.state ? "" : " selected" }}">
                        <span>No</span>
                    </label>            
                    <span style="padding-left:10px;">Publicación activada</span>
                </p>                

            </div>                     
            
            <div class="box">
                <h3>Etiquetas</h3>
                {{ render("widgets","tags","widgetBackend",{'parent': 'blog','parent_id': item.id} ) }}
            </div>
            
            </form>                      
            
            
            <div class="box" style="overflow:hidden;">
                <h3>Imágenes</h3>
                <div class="tabs">
                    <ul>
                        <li><a href="#tabs-libreria">Librería</a></li>
                        <li><a href="#tabs-images">Imágenes asociadas/portada</a></li>
                        <li><a href="#tabs-upload">Cargador</a></li>
                    </ul>
                    <div id="tabs-libreria">
                        <p>
                            Todas las imágenes.<br />
                            Imágenes disponibles para introducir en el contenido de la noticia. Sitúa el cursor sobre la imagen y pulsa sobre el tamaño que quieras insertar
                        </p>
                        {{ render("image","backend","renderImages",{'draggable': false }) }}
                    </div>
                    <div id="tabs-images">
                        <p>
                            Imágenes vinculadas a esta entrada, pero que también están disponibles para el resto de entradas. Puedes ordenarlas
                            arrastrando las miniaturas una sobre otras. La primera será la imagen portada.
                        </p>
                        {# draggable activado requiere de parent y parent_id definido #}
                        {{ render("image","backend","renderImages",{'parent':'blog','parent_id': item.id, 'draggable': true }) }}
                    </div>                        
                    <div id="tabs-upload">     
                        <section class="renderImages"></section>
                        <div id="html5_uploader">You browser doesn't support native upload. Try Firefox 3 or Safari 4.</div>
                    </div>
                </div>                                  
            </div>                  
                
            <div class="box blog" style="overflow:hidden;">
                <h3>Categorías</h3>
                {# family_id = 4 > blog (categoriesFamily) #}
                {{ render("category","backend","widgetCategoryBackend",{'family_id':4,'parent': 'blog','parent_id': item.id}) }}
            </div>                         
               
            <div class="box">
                <h3>Comentarios</h3>
                {{ render("comment","backend","widgetRenderComments",{'parent': 'blog','parent_id': item.id} ) }}
            </div>                   
                
        </aside>
    

{% endblock oneOne %}
    
{% block javascript %}

    {{ parent() }}
    <script src="{{ SITE_URL }}js/ckeditor_standard/ckeditor.js"></script>
    <script src="{{ SITE_URL }}js/jquery-ui-1.10.3.custom.min.js"></script>
    <script src="{{ SITE_URL }}js/jquery-ui-timepicker-addon.js"></script>
    <script src="{{ SITE_URL }}js/drag-and-drop.js"></script>
    
    <script>
        
        $(function() {
            
            $( ".tabs" ).tabs();
            
            //http://jqueryui.com/datepicker/
            //http://trentrichardson.com/examples/timepicker/
            $( "#datepicker" ).datetimepicker({
                dayNamesMin: [ "Do", "Lu", "Ma", "Mi", "Ju", "Vi", "Sa" ],
                monthNames: [ "Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre" ],
                firstDay: 1,
                dateFormat: "dd-mm-yy",
                changeMonth: true,
                changeYear: true,
                numberOfMonths: 1,
                showOtherMonths: true,
                selectOtherMonths: true,
                onClose: function(dateText, inst) {
                    //alert(dateText);
                },                
            });
            
            
            $(".cb-enable").click(function(){
                var parent = $(this).parents('.switch');
                $('.cb-disable',parent).removeClass('selected');
                $(this).addClass('selected');
                $(parent).find('input').val(1);
            });
            $(".cb-disable").click(function(){
                var parent = $(this).parents('.switch');
                $('.cb-enable',parent).removeClass('selected');
                $(this).addClass('selected');
                $(parent).find('input').val(0);
            });            

        // CARGADOR DE FOTOS HTML5
        
        url = '{{ url('backend-image-upload') }}';
        categories_id = 90;
        prepend_url = '{{ url('backend-image-render-box') }}';
        prepend_div_class = 'renderImages';
        draggable = false;
        parent = 'blog';
        parent_id = {{ item.id }};
    
        $('select[name=category_upload]').on('change', function() {
            categories_id = this.value;
            html5uploader(url, categories_id, prepend_url, prepend_div_class, parent, parent_id, draggable);
        });    
    
        html5uploader(url, categories_id, prepend_url, prepend_div_class, parent, parent_id, draggable);
            
        });
        
    </script>    
    
{% endblock javascript %}