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

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

{% set page = page > 0 ? page : 1 %}

{%
    set filters = {
        'today':'Hoy',
        'yesterday':'Ayer',
        'last_days':'Últimos días',
        'last_items':'Últimas imágenes',
        'active_items':'Imágenes activas',
        'category_90':'Imágenes de la categoría Blog',
        'category_91':'Imágenes de la categoría User',
        'category_92':'Imágenes de la categoría Catálogo',
        'category_93':'Imágenes de la categoría Categorías',
        'category_94':'Imágenes de la categoría Páginas',
        'category_95':'Imágenes de la categoría Slider',        
    } 
%}

{% block titulo %}Backend Imágenes{% endblock %}

{% block lang %}{% endblock lang %}

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

{% block bread %}
    
    {{ breadCrumbs | raw }} 
    
    <form method="post" class="form" action="{{ url('backend-image') }}">
        <ul class="filters">       
            <li>
                <fieldset>
                    <p class="head">Filtro por fecha de registro (Create at)</p>            
                    <input type="text" id="from" name="date_start" value="{{ date_start ? date_start | date('d-m-Y') : '' }}" placeholder="Fecha inicio rango" />
                    <input type="text" id="to" name="date_end" value="{{ date_end ? date_end | date('d-m-Y') : '' }}" placeholder="Fecha fin rango" />
                </fieldset>
                <fieldset>
                    <p class="head">Buscador</p>
                    <input type="text" name="search" value="{{ search }}" placeholder="Texto a buscar" />                    
                </fieldset>
                <fieldset>
                    <p class="head">Filtro predefinido</p>
                    <select name="filter_predefined">                    
                        <option value="">selecciona...</option>
                        <optgroup label="Por fecha de registro">
                            <option {{ filter_predefined == 'today' ? 'selected="selected"' : '' }} value="today">Hoy</option>
                            <option {{ filter_predefined == 'yesterday' ? 'selected="selected"' : '' }} value="yesterday">Ayer</option>
                            <option {{ filter_predefined == 'last_days' ? 'selected="selected"' : '' }} value="last_days">Últimos días</option>
                        </optgroup>
                        <optgroup label="Por familia">
                            {% for category in imageCategories %}
                                <option {{ filter_predefined == 'category_' ~ category.id ? 'selected="selected"' : '' }} value="category_{{ category.id }}">{{ category.name_es }}</option>
                            {% endfor %}
                        </optgroup>                    
                    </select> 
                </fieldset>
                <fieldset>
                    <p class="head">&nbsp;</p>
                    <input type="submit" value="Filtrar" class="button bGreen" />
                    {% if date_start or date_end or search or filter_predefined %}
                        <input type="submit" name="reset" value="Reset" class="button bRed" />
                    {% endif %}                     
                </fieldset>
            </li>
            <li>
                <h3><span class="counterT">{{ numTotalItems }}</span> Imágenes</h3>            
            </li>
        </ul> 
    </form>
    
{% endblock bread %}

{% block twoOne %}   
    
    <article class="dinamic">
        <div style="float: none">
            {% if date_start or date_end or search or filter_predefined %}
                <strong>Filtros: </strong>
            {% endif %}
            {% if (date_start or date_end) and filter_predefined not in 'today,yesterday' %}
                <span>Entre el {{ dateFormat(date_start) }} y el {{ dateFormat(date_end) }}</span>
            {% endif %}
            {% if search %}
                <span>{{ search }}</span>
            {% endif %}
            {% if filter_predefined is not empty and filter_predefined in 
                'today,yesterday,last_items,active_items,category_90,category_91,category_92,category_93,category_94,category_95,category_96' %}
                <span>{{ filters[filter_predefined] }}</span>
            {% elseif filter_predefined is not empty %}   
                <span>{{ filter_predefined }}</span>
            {% endif %}                          
                
            <h2><b class="counterS">{{ numItems }}</b> imágenes seleccionadas</h2>
        </div>
    </article>

    <section id="wrapperImagesBackend" class="mainbar imageGrill">
        {% for item in items %}
            {% include '@image/backend/includes/box.html.twig' %}
        {% endfor %}
    </section>
    
    <br clear="all" />
    
    {{ paginador | raw }}                 
    
{% endblock twoOne %}    
    
{% block twoTwo %}   

    <fieldset class="category_upload">
        <label>Categoría asociada al cargador de fotos: </label>
        <select name="category_upload">                    
            <option value="">Selecciona una categoría...</option>
            {% for category in imageCategories %}
                <option value="{{ category.id }}">{{ category.name_es }}</option>
            {% endfor %}
        </select>     
    </fieldset>
    <div id="html5_uploader">You browser doesn't support native upload. Try Firefox 3 or Safari 4.</div>
    
{% endblock twoTwo %}
         
    
{% block javascript %}
    
    {{ parent() }}
    {# jquery-ui-1.10.3.custom.min.js YA SE INSERTA EN EL ARCHIVO BASE; REVISAR PORQUE NO FUNCIONA SI NO SE INSERTA AQUI #}
    <script src="{{ SITE_URL }}js/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script>
    
    <script>
    
    $(function(){       
    
        // CARGADOR DE FOTOS HTML5        
        url = '{{ url('backend-image-upload') }}';
        categories_id = 90;
        prepend_url = '{{ url('backend-image-render-box') }}';
        prepend_div_class = 'imageGrill';
        draggable = parent = parent_id = reload = false;
        template = '';
    
        $('select[name=category_upload]').on('change', function() {
            categories_id = this.value;
            html5uploader(url, categories_id, prepend_url, prepend_div_class, parent, parent_id, draggable, reload, template);
        });    
    
        html5uploader(url, categories_id, prepend_url, prepend_div_class, parent, parent_id, draggable, reload, template);
    
    });
    
    </script>
    
{% endblock javascript %}