{% block galeria %}
<div id="carrusel-imagenes-{{galeria.id}}">
    <div class="portfolio-list clearfix">
        <div class="portfolio-outer clearfix">
            <div class="controls clearfix pull-right">
                <button data-slide="prev" href="#carrusel-img" class="arrows"><i class="fa fa-chevron-left"></i></button>
                <button data-slide="next" href="#carrusel-img" class="arrows"><i class="fa fa-chevron-right"></i></button>
            </div>
        </div>
        <div class="carousel slide" id="carrusel-img">
            <div class="carousel-inner">
                {% for imagen in galeria.imagenes %} 
                {% if( (loop.index - 1)  % galeria.columnas == 0) %} 
                {% set abrir = 1 %}
                <div class="item row-fluid {% if loop.first %}active{% endif %}">
                    {% endif %}
                    <div class="col-md-{{ galeria.num_cols }}">
                        <div class="thumbnail">
                            <div class="caption">
                                <h4>{{ imagen.titulo }}</h4>
                                <p>{{ imagen.descripcion|raw }}</p>
                                <p><a href="{{ imagen['listado'] }}" class="label label-danger" rel="tooltip" title="Ampliar Imagen">Ampliar</a></p>
                            </div>
                            <img src="{{ imagen['listado'] }}" alt="{{ imagen.titulo }}">
                        </div>
                    </div>
                    {% if((loop.index - 1) % galeria.columnas == galeria.limite) %}
                    {% set abrir = 0 %}
                </div>
                {% endif %}
                {% if loop.last == true %}
                {% if abrir == 1 %}
            </div>
            {% endif %}
            {% endif %}	
            {% endfor %}
        </div>
    </div>
</div>
</div>
<div id="blueimp-carrusel-{{galeria.id}}" class="blueimp-gallery blueimp-gallery-controls">
    <div class="slides">
    </div>
    <h3 class="title"></h3>
    <a class="prev">‹</a>
    <a class="next">›</a>
    <a class="close">×</a>
    <a class="play-pause"></a>
    <ol class="indicator">
    </ol>
</div>
<script src="../common/js/modulos/galerias.js"></script>
<script>
    $(document).ready(function(e) {
        settings = {
            'div_links': 'carrusel-imagenes-{{galeria.id}}',
            'galeria_container': '#blueimp-carrusel-{{galeria.id}}'
        }
        Galerias.InitCarrusel(settings);
    });
</script>

{% endblock galeria %}