{% block CSS %}

{% block CSS_BOOTSTRAP %}
{% comment %}
Bootstrap CSS Toolkit styles
{% endcomment %}
<link 
    rel="stylesheet" 
    href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"
>
{% endblock %}

{% block CSS_BLUEIMP_GALLERY %}
{% comment %}
 Blueimp Gallery styles 
{% endcomment %}
<link 
    rel="stylesheet"
    href="{{ STATIC_URL }}demo/blueimp-gallery.min.css"
>
{% endblock %}

{% block CSS_JQUERY_FILE_UPLOAD %}
{% comment %}
 CSS to style the file input field as button and adjust the Bootstrap progress bars
{% endcomment %}
<link rel="stylesheet" href="{{ STATIC_URL }}css/jquery.fileupload.css">
{% endblock %}

{% block CSS_JQUERY_FILE_UPLOAD_UI %}
{% comment %}
 CSS to style the file input field as button and adjust the Bootstrap progress bars
{% endcomment %}
<link rel="stylesheet" href="{{ STATIC_URL }}css/jquery.fileupload-ui.css">
{% comment %}
 CSS adjustments for browsers with JavaScript disabled 
{% endcomment %}
<noscript>
    <link rel="stylesheet"
    href="{{ STATIC_URL }}css/jquery.fileupload-ui-noscript.css"
    >
</noscript>
{% endblock %}


{% block CSS_HTML5_SHIM %}

    {% comment %}
     Shim to make HTML5 elements usable in older Internet Explorer versions 
    {% endcomment %}

    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js">
    </script>
    <![endif]-->

{% endblock %}
{% endblock %}


{% block UPLOAD_FORM %}

{% comment %}
 The file upload form used as target for the file upload widget 
{% endcomment %}
<form 
    id="fileupload" action="{{ upload_handler_url }}" 
    method="POST" enctype="multipart/form-data"
>

    {% csrf_token %}

    {% comment %}
     Redirect browsers with JavaScript disabled to the origin page 
    {% endcomment %}
    <noscript>
        <input type="hidden" name="redirect" value="{{ request.path }}">
    </noscript>


    {% block UPLOAD_FORM_BUTTON_BAR %}
    <div class="row fileupload-buttonbar">
    {% comment %}
     The fileupload-buttonbar contains buttons to add/delete files and
     start/cancel the upload 
    {% endcomment %}

        <div class="col-lg-7">

            {% comment %}
             The fileinput-button span is used to style the file input field as button 
            {% endcomment %}

            {% block UPLOAD_FORM_BUTTON_BAR_ADD %}
            <span class="btn btn-success fileinput-button">
                <i class="glyphicon glyphicon-plus"></i>
                <span>Add files...</span>

                        
                {% block FILE_INPUT %}
                {% comment %}
                    The file input for the upload form.
                {% endcomment %}
                <input 
                    type="file" name="files[]" multiple

                    {% if accepted_mime_types %}
                        accept = '{{ accepted_mime_types|join:"," }}'
                    {% endif %}
                >
                {% endblock %}

            </span>
            {% endblock %}

            {% block UPLOAD_FORM_BUTTON_BAR_CONTROL %}
            <button type="submit" class="btn btn-primary start">
                <i class="glyphicon glyphicon-upload"></i>
                <span>Start upload</span>
            </button>
            <button type="reset" class="btn btn-warning cancel">
                <i class="glyphicon glyphicon-ban-circle"></i>
                <span>Cancel upload</span>
            </button>
            <button type="button" class="btn btn-danger delete">
                <i class="glyphicon glyphicon-trash"></i>
                <span>Delete</span>
            </button>
            <input type="checkbox" class="toggle">
            {% endblock %}

        </div>

        {% block UPLOAD_FORM_PROGRESS_BAR %}
        {% comment %}
         The global progress information 
        {% endcomment %}
        <div class="col-lg-5 fileupload-progress fade">
            {% comment %}
             The global progress bar 
            {% endcomment %}
            <div 
                class="progress progress-striped active" 
                role="progressbar" 
                aria-valuemin="0" aria-valuemax="100"
            >
                <div class="progress-bar progress-bar-success" style="width:0%;">
                </div>
            </div>
            {% comment %}
             The extended global progress information 
            {% endcomment %}
            <div class="progress-extended">&nbsp;</div>
        </div>
        {% endblock %}

    </div>
    {% endblock %}

    {% comment %}
     The loading indicator is shown during file processing 
    {% endcomment %}

    {% block UPLOAD_FORM_LINDICATOR %}
    <div class="fileupload-loading"></div>
    <br>
    {% endblock %}

    {% block UPLOAD_FORM_LISTING %}
    {% comment %}
     The table listing the files available for upload/download 
    {% endcomment %}
    <table role="presentation" class="table table-striped">
        <tbody class="files"></tbody>
    </table>
    {% endblock %}

</form>
{% endblock %}




{% block MODAL_GALLERY %}
<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls" data-filter=":even">
    <div class="slides"></div>
    <h3 class="title"></h3>
    <a class="prev">&larr;</a>
    <a class="next">&rarr;</a>
    <a class="close">x</a>
    <a class="play-pause"></a>
    <ol class="indicator"></ol>
</div>
{% endblock %}



{% block JS_TEMPLATES %}
{% comment %}
 The template to display files available for upload 
{% endcomment %}

{% block JS_UPLOAD_TEMPLATE %}
<script id="template-upload" type="text/x-tmpl">
{{ JQ_OPEN }} for (var i=0, file; file=o.files[i]; i++) { {{ JQ_CLOSE }}
    <tr class="template-upload fade">
        <td>
            <span class="preview"></span>
        </td>
        <td>
            <p class="name">{{ JQ_OPEN }}=file.name{{ JQ_CLOSE }}</p>
            <strong class="error text-danger"></strong>
        </td>
        <td>
            <p class="size">Processing...</p>
            <div class="progress progress-striped active" role="progressbar"
                    aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
                <div class="progress-bar progress-bar-success" style="width:0%;"></div>
            </div>
        </td>
        <td>
            {{ JQ_OPEN }} if (!i && !o.options.autoUpload) { {{ JQ_CLOSE }}
                <button class="btn btn-primary start" disabled>
                    <i class="glyphicon glyphicon-upload"></i>
                    <span>Start</span>
                </button>
            {{ JQ_OPEN }} } {{ JQ_CLOSE }}
            {{ JQ_OPEN }} if (!i) { {{ JQ_CLOSE }}
                <button class="btn btn-warning cancel">
                    <i class="glyphicon glyphicon-ban-circle"></i>
                    <span>Cancel</span>
                </button>
            {{ JQ_OPEN }} } {{ JQ_CLOSE }}
        </td>
    </tr>
{{ JQ_OPEN }} } {{ JQ_CLOSE }}
</script>
{% endblock %}


{% block JS_DOWNLOAD_TEMPLATE %}
{% comment %}
 The template to display files available for download 
{% endcomment %}

<script id="template-download" type="text/x-tmpl">
{{ JQ_OPEN }} for (var i=0, file; file=o.files[i]; i++) { {{ JQ_CLOSE }}
    <tr class="template-download fade">
        <td>
            <span class="preview">
                {{ JQ_OPEN }} if (file.thumbnailUrl) { {{ JQ_CLOSE }}
                    <a href="{{ JQ_OPEN }}=file.url{{ JQ_CLOSE }}"
                     title="{{ JQ_OPEN }}=file.name{{ JQ_CLOSE }}"
                     download="{{ JQ_OPEN }}=file.name{{ JQ_CLOSE }}"
                     data-gallery><img src="{{ JQ_OPEN }}=file.thumbnailUrl{{ JQ_CLOSE }}"
                    ></a>
                {{ JQ_OPEN }} } {{ JQ_CLOSE }}
            </span>
        </td>
        <td>
            <p class="name">
                {{ JQ_OPEN }} if (file.url) { {{ JQ_CLOSE }}
                    <a href="{{ JQ_OPEN }}=file.url{{ JQ_CLOSE }}"
                     title="{{ JQ_OPEN }}=file.name{{ JQ_CLOSE }}"
                     download="{{ JQ_OPEN }}=file.name{{ JQ_CLOSE }}"
                     {{ JQ_OPEN }}=file.thumbnailUrl?'data-gallery':''{{ JQ_CLOSE }}>
                     {{ JQ_OPEN }}=file.name{{ JQ_CLOSE }}
                    </a>
                {{ JQ_OPEN }} } else { {{ JQ_CLOSE }}
                    <span>{{ JQ_OPEN }}=file.name{{ JQ_CLOSE }}</span>
                {{ JQ_OPEN }} } {{ JQ_CLOSE }}
            </p>
            {{ JQ_OPEN }} if (file.error) { {{ JQ_CLOSE }}
                <div><span class="label label-danger">Error</span> {{ JQ_OPEN }}=file.error{{ JQ_CLOSE }}</div>
            {{ JQ_OPEN }} } {{ JQ_CLOSE }}
        </td>
        <td>
            <span class="size">{{ JQ_OPEN }}=o.formatFileSize(file.size){{ JQ_CLOSE }}</span>
        </td>
        <td>
            {{ JQ_OPEN }} if (file.deleteUrl) { {{ JQ_CLOSE }}
                <button class="btn btn-danger delete" 
                        data-type="{{ JQ_OPEN }}=file.deleteType{{ JQ_CLOSE }}"
                        data-data='{ "csrfmiddlewaretoken" : "{{ csrf_token }}" }'
                        data-url="{{ JQ_OPEN }}=file.deleteUrl{{ JQ_CLOSE }}"
                        {{ JQ_OPEN }} if (file.deleteWithCredentials) { %} 
                            data-xhr-fields='{"withCredentials":true}'{% } 
                        {{ JQ_CLOSE }}>
                    <i class="glyphicon glyphicon-trash"></i>
                    <span>Delete</span>
                </button>
                <input type="checkbox" name="delete" value="1" class="toggle">
            {{ JQ_OPEN }} } else { {{ JQ_CLOSE }}
                <button class="btn btn-warning cancel">
                    <i class="glyphicon glyphicon-ban-circle"></i>
                    <span>Cancel</span>
                </button>
            {{ JQ_OPEN }} } {{ JQ_CLOSE }}
        </td>
    </tr>
{{ JQ_OPEN }} } {{ JQ_CLOSE }}
</script>
{% endblock %}
{% endblock %}


{% block JS_SCRIPTS %}
{% block JS_JQUERY %}
{% comment %}
 jQuery 
{% endcomment %}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
{% endblock %}

{% block JS_JQUERY_UI_WIDGET %}
{% comment %}
 The jQuery UI widget factory, can be omitted if jQuery UI is already included 
{% endcomment %}
<script src="{{ STATIC_URL }}js/vendor/jquery.ui.widget.js"></script>
{% endblock %}

{% block JS_TEMPLATES_PLUGIN %}
{% comment %}
 The Templates plugin is included to render the upload/download listings 
{% endcomment %}
<script src="{{ STATIC_URL }}demo/tmpl.min.js"></script>
{% endblock %}

{% block JS_LOAD_IMAGE %}
{% comment %}
 The Load Image plugin is included for the preview images and image resizing functionality 
{% endcomment %}
<script src="{{ STATIC_URL }}demo/load-image.min.js"></script>
{% endblock %}

{% block JS_CANVAS_TO_BLOB %}
{% comment %}
 The Canvas to Blob plugin is included for image resizing functionality 
{% endcomment %}
<script src="{{ STATIC_URL }}demo/canvas-to-blob.min.js"></script>
{% endblock %}

{% block JS_BOOTSTRAP %}
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
{% endblock %}

{% block JS_BLUEIMP_GALLERY %}
<script src="{{ STATIC_URL }}demo/jquery.blueimp-gallery.min.js"></script>
{% endblock %}

{% block JS_BOOTSTRAP_IFRAME_TRANSPORT %}
{% comment %}
 The Iframe Transport is required for browsers without support for XHR file uploads 
{% endcomment %}
<script src="{{ STATIC_URL }}js/jquery.iframe-transport.js"></script>
{% endblock %}

{% block JS_JQUERY_FILE_UPLOAD %}
{% comment %}
 The basic File Upload plugin 
{% endcomment %}
<script src="{{ STATIC_URL }}js/jquery.fileupload.js"></script>
{% endblock %}

{% block JS_JQUERY_FILE_UPLOAD_FP %}
{% comment %}
 The File Upload file processing plugin 
{% endcomment %}
<script src="{{ STATIC_URL }}js/jquery.fileupload-process.js"></script>
{% endblock %}


{% block JS_JQUERY_FILE_UPLOAD_IMAGE %}
{%comment%}
The File Upload image preview & resize plugin
{%endcomment%}
<script src="{{ STATIC_URL }}js/jquery.fileupload-image.js"></script>
{% endblock %}


{% block JS_JQUERY_FILE_UPLOAD_AUDIO %}
{%comment%}
The File Upload audio preview plugin
{%endcomment%}
<script src="{{ STATIC_URL }}js/jquery.fileupload-audio.js"></script>
{% endblock %}


{% block JS_JQUERY_FILE_UPLOAD_VIDEO %}
{%comment%}
The File Upload video preview plugin
{%endcomment%}
<script src="{{ STATIC_URL }}js/jquery.fileupload-video.js"></script>
{% endblock %}


{% block JS_JQUERY_FILE_UPLOAD_VALIDATE %}
{%comment%}
The File Upload validation plugin
{%endcomment%}
<script src="{{ STATIC_URL }}js/jquery.fileupload-validate.js"></script>
{% endblock %}


{% block JS_JQUERY_FILEUPLOAD_UI %}
{% comment %}
 The File Upload user interface plugin 
{% endcomment %}
<script src="{{ STATIC_URL }}js/jquery.fileupload-ui.js"></script>
{% endblock %}

{% comment %}
 The main application script 
{% endcomment %}

<script type="text/javascript">
    $( function() {
        'use strict';

        {% comment %}
        Initialize the jQuery File Upload widget.

        Default options are defined by the package, 
        however users may extend and define their 
        own options.
        {% endcomment %}

        {% block JS_INIT %}

        $('#fileupload').fileupload({

            formData: [
                { name: "csrfmiddlewaretoken", value: "{{ csrf_token }}"}
            ],


            {% block JS_OPTS %}
            sequentialUploads: true
            {% endblock %}

        });
        {% endblock %}


        {% block JS_FORM %}

        {% comment %}
        Load existing files.
        {% endcomment %}

        $('#fileupload').addClass('fileupload-processing');
        $.ajax({
            {% comment %}
            Uncomment the following to send cross-domain cookies:
            {% endcomment %}
            //xhrFields: {withCredentials: true},
            url: $('#fileupload').fileupload('option', 'url'),
            dataType: 'json',
            context: $('#fileupload')[0]
        }).always(function () {
            $(this).removeClass('fileupload-processing');
        }).done(function (result) {
            $(this).fileupload('option', 'done')
                .call(this, $.Event('done'), {result: result});
        });
        {% endblock %}

    });
</script>

{% block JS_XDR_TRANSPORT %}
{% comment %}
 The XDomainRequest Transport is included for cross-domain file deletion for IE8+ 
{% endcomment %}

<!--[if gte IE 8]>
<script src="{{ STATIC_URL }}js/cors/jquery.xdr-transport.js"></script>
<![endif]-->
{% endblock %}

{% endblock %}
