{% load i18n %}

{{ form.images }}
{{ form.errors }}

<div data-role="images-container">

    <div data-role="drop-files-section" class="dropzone drop-section">
        <div class="dz-default dz-message">{% trans 'Drag files here' %}</div>
    </div>

    <div class="drop-section" data-role="drop-link-section">
        <div style="margin-top: 30px">
            {% trans 'Drag images here' %}
        </div>
    </div>

    <div class="clearfix"></div>

    <div style="padding: 10px 0">
        <i class="fa fa-info-circle"></i>
        {% blocktrans %}
            To
            <span class="label label-danger">remove</span>
            photo press
        {% endblocktrans %}
        <span class="label label-primary">CTRL</span> +
        <span class="label label-primary">ALT</span>
        {% trans 'and double click the photo' %}
    </div>
    <div class="files" data-role="files"></div>

</div>

{{ form.media }}

<script>
    Dropzone.autoDiscover = false;

    (function ($) {
        $(document).ready(function () {
            new FileManager({
                $select: $('#{{ form.images.auto_id }}'),
                uploadUrl: '{{ form.upload_url }}',
                initial: {{ form.serialized_images|safe }}
            });
        });
    })(django.jQuery);
</script>