{% extends "layout/base.html" %}
{% block content %}
<section id="main-content" class="main-content pad-60">
    <div class="container">
        <div class="row">
            <!--columna de productos-->
            <div class="col-md-9">
            	<div id="primary" class="content-area">
                    <main id="main" class="site-main" role="main">                    
                		<div class="row">
                            {% if productos|length > 0 %}
                            	{% for producto in productos %}
                                    <article class="post post--preview col-md-4 col-xs-6">                                    
                                    	<header class="entry-header">
                                        	{% if (producto.imagen|length) %}
                                                <div class="post-thumbnail">                                            	
                                                    <img class="img-responsive" src="{{ producto.imagen['listado'] }}" alt="{{ producto.nombre }}">
                                                    <div class="thumb-hover">
                                                        <div class="thumb-icon">
                                                            <a href="{{producto.url}}"><i class="fa fa-link"></i></a>
                                                        </div>
                                                    </div>
                                                </div>
                                            {% endif %}
                                            
                                            <h3 class="article-title"><a href="{{producto.url}}">{{producto.nombre}}</a></h3>
                                        </header> <!-- /.entry-header -->
                                    </article> <!-- end article -->            
                            	{% endfor %}
                            {% endif %}
                		</div><!--/row-->
                	</main>
                </div><!--/primary-->
                
                {% if productos %}
                    <div class="text-center" id="pagination"></div>
                {% else %}
                    <div class="alert alert-danger fade in">
                        <h4>No hay resultados</h4>
                        <p>No se han encontrado productos publicadas o con la búsqueda realizada</p>
                    </div>
                {% endif %}
            </div><!--/col-->
            
            <!--columna de banners-->
            <div class="col-md-3">
               	{# {% include 'layout/buscador.html' %} #}
                {% include "macros/arbol-categorias.html" %}
            </div><!--/col-->
        </div><!--/row-->
    </div><!--/container-->
</section>
{% endblock %}

{% block javascript %}
	{% include 'layout/paginador.html' %}
{% endblock %}