{# NEEDED VARS #}
{% 
set tplv = { 
    'id':                   item.id,
    'parent':               parent, 
    'parentId':             parent_id,
    'dragWebservice':       dragWebservice,
    'order':                loop.index,    
    'title':                item.title,
    'createAt':             item.create_at,
    'fileName':             item.filename,
    'description':          item.description,
    'priority':             item.priority,
    'imageWidth':           item.image_info.width,
    'imageHeight':          item.image_info.height,
    'imageSize':            item.file_size,
    'editableWebservice':   url('backend-image-editable'),
    'deleteWebservice':     url('backend-image-delete'),
} 
%}

<article
    class="boxImage"
    data-image_id="{{ tplv.id }}"
    data-parent="{{ tplv.parent }}"
    data-parent_id="{{ tplv.parentId }}"
    data-drag-webservice="{{ tplv.dragWebservice }}"     
    draggable="{{ tplv.draggable == 'true' ? 'true' : 'false' }}" 
    data-order="{{ tplv.order }}
    ">
    
    {# TITLE #}
    <a 
        href="#" 
        class="editable title" 
        id="title" 
        data-type="text" 
        data-pk="{{ tplv.id }}" 
        data-url="{{ tplv.editableWebservice }}" 
        data-title="Edita el título"
        >
        {{ tplv.title }}
    </a>
    
    {# IMAGE FANCYBOX #}
    <a class="fancybox-various" rel="gallery1" href="{{ IMAGES_URL }}uploads/{{ tplv.createAt | date('Y') }}/{{ tplv.createAt | date('m') }}/{{ tplv.createAt | date('d') }}/large/{{ tplv.fileName }}" alt='{{ tplv.title }}' >
        {# IMAGE #}
        <img 
            class="image tooltip" 
            title="{{ tplv.description }}" 
            src="{{ IMAGES_URL }}uploads/{{ tplv.createAt | date('Y') }}/{{ tplv.createAt | date('m') }}/{{ tplv.createAt | date('d') }}/medium/{{ tplv.fileName }}" 
            width="200" 
            height="200" 
            alt="{{ tplv.title }}" 
            />
    </a>
    {# CATEGORIES #}
    <div class="categories">
        {{ render("category","frontend","widgetCategoryPost",{'parent':tplv.parent,'parent_id':tplv.id}) }}
    </div>
    
    {% if template == 'blog' %}
        {# INSERT IMAGE INTO CKEDITOR TEXTAREA #}
        <div class="sizes">
            <a 
                class="insert" 
                title="Insertar imagen pequeña" 
                href="#" 
                data-image="<img src='{{ IMAGES_URL }}uploads/{{ tplv.createAt | date('Y') }}/{{ tplv.createAt | date('m') }}/{{ tplv.createAt | date('d') }}/small/{{ tplv.fileName }}' width='80' height='80' alt='{{ tplv.title }}' />" 
                >
                S
            </a>                    
            <a 
                class="insert" 
                title="Insertar imagen mediana" 
                href="#" 
                data-image="<img src='{{ IMAGES_URL }}uploads/{{ tplv.createAt | date('Y') }}/{{ tplv.createAt | date('m') }}/{{ tplv.createAt | date('d') }}/medium/{{ tplv.fileName }}' width='200' height='200' alt='{{ tplv.title }}' />"
                >
                M
            </a>                    
            <a 
                class="insert" 
                title="Insertar imagen grande" 
                href="#" 
                data-image="<img src='{{ IMAGES_URL }}uploads/{{ tplv.createAt | date('Y') }}/{{ tplv.createAt | date('m') }}/{{ tplv.createAt | date('d') }}/large/{{ tplv.fileName }}' alt='{{ tplv.title }}' />"
                >
                L
            </a>     
            <a class="delete" title="Eliminar imagen" href="#" data-image_id="{{ tplv.id }}" data-webservice="{{ tplv.deleteWebservice }}" >
                <img src="{{ IMAGES_URL }}delete.png" width="16" height="14" alt="Eliminar imagen" />
            </a>                 
        </div>    
    {% else %}
        <div class="sizes">  
            <a class="delete" title="Eliminar imagen" href="#" data-image_id="{{ tplv.id }}" data-webservice="{{ tplv.deleteWebservice }}" >
                <img src="{{ IMAGES_URL }}delete.png" width="16" height="14" alt="Eliminar imagen" />
            </a>   
            <a 
                class="fancybox-edit-image" 
                href="#editor" 
                data-width="{{ tplv.imageWidth }}"
                data-height="{{ tplv.imageHeight }}"
                data-create-at="{{ tplv.createAt }}"
                data-image="{{ IMAGES_URL }}uploads/{{ tplv.createAt | date('Y') }}/{{ tplv.createAt | date('m') }}/{{ tplv.createAt | date('d') }}/source/{{ tplv.fileName }}"
                data-filename="{{ tplv.fileName }}"
            >
                Edit
            </a>                
        </div>               
    {% endif %}
        Filename:
        <a href="#" 
           class="editable filename" 
           id="filename" 
           data-type="text" 
           data-pk="{{ tplv.id }}" 
           data-url="{{ tplv.editableWebservice }}" 
           data-filename="{{ tplv.fileName }}"
           data-create-at="{{ tplv.createAt }}"
           data-title="Edita el nombre físico de la imagen"
           >
            {{ tplv.fileName }}
        </a><br />
        Fecha:
        <a href="#" 
           class="editable"
           style="font-size:12px;padding:3px 0;display:inline-block"
           id="create_at" 
           data-type="text" 
           data-pk="{{ tplv.id }}" 
           data-url="{{ tplv.editableWebservice }}" 
           data-filename="{{ tplv.fileName }}"
           data-create-at="{{ tplv.createAt }}"
           data-title="Edita la fecha"
           >
            {{ tplv.createAt }}
        </a>        
        <ul class="imageFileInfo">
            <li>{{ tplv.imageWidth }} x {{ tplv.imageHeight }} · {{ formatBytes(tplv.imageSize) }}</li>
            {% if tplv.imageWidth > 1500 and tplv.imageHeight > 1500 %}
                <li class="stars">
                    <span class="glyphicon glyphicon-star"></span>
                    <span class="glyphicon glyphicon-star"></span>
                    <span class="glyphicon glyphicon-star"></span>
                </li>
            {% elseif tplv.imageWidth > 1000 and tplv.imageHeight > 1000 %}
                <li class="stars">
                    <span class="glyphicon glyphicon-star"></span>
                    <span class="glyphicon glyphicon-star"></span>
                </li>
            {% elseif tplv.imageWidth > 500 and tplv.imageHeight > 500 %}
                <li class="stars">
                    <span class="glyphicon glyphicon-star"></span>
                </li>                            
            {% endif %}                        
        </ul>        
</article>