{% extends "modulos/dashboard/dashboard.html" %}

{% block head %}
    {{ parent() }}

    <!-- Ekko Lightbox -->
    <link rel="stylesheet" href="/assets/vendor/ekko-lightbox/ekko-lightbox.css">
{% endblock %}

{% block content %}
    <div class="content-wrapper">
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0">Producto</h1>
                    </div>
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="/productos">Productos</a></li>
                            <li class="breadcrumb-item active">Galer&iacute;a</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>

        <div class="content">
            <div id="contenedor" class="container-fluid">
                <div class="row">
                    <div class="col-12">
                        <div class="card card-primary">
                            <div class="card-header">
                                <h3 class="card-title">Galer&iacute;a de Fotos</h3>
                            </div>
                            
                            <div class="card-body">
                                <div class="row">
                                    {% for image in images %}
                                        <div class="filtr-item col-sm-2 mb-2" data-category="{{ image.marca }}" data-sort="{{ image.name }}" style="height: 150px;">
                                            <a href="{{ image.downloadurl }}" data-toggle="lightbox" data-title="{{ image.sku }} - {{ image.marca }}">
                                                <div style="width: 100%; height: 100%; background-image: url({{ image.downloadurl }}); background-size: cover; background-position: center center;"></div>
                                            </a>
                                        </div>
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascript %}
    {{ parent() }}
    
    <!-- Ekko Lightbox -->
    <script src="/assets/vendor/ekko-lightbox/ekko-lightbox.min.js"></script>
    <!-- Page specific script -->
    <script>
        $(function () {
            $(document).on('click', '[data-toggle="lightbox"]', function(event) {
                event.preventDefault();
                $(this).ekkoLightbox({
                    alwaysShowClose: true
                });
            });
        })
    </script>
{% endblock %}