{% load sekizai_tags thumbnail cms_qe_filters %}

{% addtoblock "js" %}
    <script type="text/javascript">
        //<![CDATA[
        jQuery(document).ready(function ($) {
            {# Add (download) source when click on preview #}
            $(".cmsplugin_filer_folder_image").click(function (e) {
                id = e.currentTarget.getAttribute("data-id");
                src = e.currentTarget.getAttribute("data-src");
                $("#" + id + "_img").attr("src", src);
            });
        });
        //]]>
    </script>
{% endaddtoblock %}

{#For modals in gallery#}
{% addtoblock "css" %}
    <style>
        .modal-body > .img-responsive {
            display: block;
            margin-left: auto;
            margin-right: auto;
        }
    </style>
{% endaddtoblock "css" %}

<div class="row">
    {% for image in folder_images %}
        {# prefix for id in format "cmsplugin_filer_folder_{plugin_id}_{image_id}" #}
        {% with "cmsplugin_filer_folder_"|add_str:object.id|add_str:"_"|add_str:forloop.counter as id_prefix %}
            {# Preview #}
            <div class="col-xs-6 col-sm-4 col-lg-3">
                <div class="thumbnail">
                    <a class="cmsplugin_filer_folder_image"
                       href="#"
                            {#For modal opening:#}
                       data-toggle="modal"
                       data-target="#{{ id_prefix }}_modal"
                            {#For downloading big image:#}
                       data-id="{{ id_prefix }}"
                       data-src="{{ image.url }}"
                    >

                        <img src="{% thumbnail image.file 460x308 crop="True" %}"
                             alt="{{ image.label }}">
                    </a>
                </div>
            </div>

            {# Modal with big image #}
            <div class="modal fade bs-example-modal-lg"
                 id="{{ id_prefix }}_modal"
                 tabindex="-1"
                 role="dialog">
                <div class="modal-dialog modal-lg" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                            <h4 class="modal-title">{{ image.label }}</h4>
                        </div>
                        <div class="modal-body">
                            <img class="img-responsive "
                                 alt="{{ image.label }}"
                                 style="{% if image.height > image.width %} height{% else %} width{% endif %}:800px"
                                 id="{{ id_prefix }}_img"
                            >
                            <hr>
                            <p>{{ image.default_caption }}</p>
                        </div>
                    </div>
                </div>
            </div>
        {% endwith %}
    {% endfor %}
</div>
