{% 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 %}

{% block CSS_EXTRA %}
{% 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 UPLOAD_FORM_BUTTON_BAR_ADD_FILE_INPUT %}
                {% comment %}
                    UPLOAD_FORM_BUTTON_BAR_ADD_FILE_INPUT and FILE_INPUT
                    control the same block. 

                    FILE_INPUT is the original and shorter block name that has
                    been kept to function as a convenient alias as well as to
                    allow backward-compatibility with dependent projects. 
                    
                    Note: Only one should be overriden in the inheriting templates.
                {% endcomment %}
                {% 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 %}
                {% endblock %}

            </span>

            {% block UPLOAD_FORM_BUTTON_BAR_ADD_EXTRA %}
            {% endblock %}

            {% 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 %}

            {% block UPLOAD_FORM_BUTTON_BAR_EXTRA %}
            {% 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 %}

    {% block UPLOAD_FORM_EXTRA %}
    {% 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">

        {% block JS_UPLOAD_TEMPLATE_PREVIEW %}
        <td>
            <span class="preview"></span>
        </td>
        {% endblock %}

        {% block JS_UPLOAD_TEMPLATE_UPLOAD %}
        <td>
            <p class="name">{{ JQ_OPEN }}=file.name{{ JQ_CLOSE }}</p>
            <strong class="error text-danger"></strong>
        </td>
        {% endblock %}

        {% block JS_UPLOAD_TEMPLATE_PROGRESSBAR %}
        <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>
        {% endblock %}

        {% block JS_UPLOAD_TEMPLATE_CONTROLS %}
        <td>
            {% block JS_UPLOAD_TEMPLATE_START %}
            {{ 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 }}
            {% endblock %}

            {% block JS_UPLOAD_TEMPLATE_CANCEL %}
            {{ 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 }}
            {% endblock %}
        </td>
        {% endblock %}

    </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">

        {% block JS_DOWNLOAD_TEMPLATE_ERROR %}
        <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>
        {% endblock %}

        {% block JS_DOWNLOAD_TEMPLATE_DOWNLOAD %}
        <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>
        {% endblock %}

        {% block JS_DOWNLOAD_TEMPLATE_FSIZE %}
        <td>
            <span class="size">{{ JQ_OPEN }}=o.formatFileSize(file.size){{ JQ_CLOSE }}</span>
        </td>
        {% endblock %}

        {% block JS_DOWNLOAD_TEMPLATE_DELETE %}
        <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>
        {% endblock %}
    </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 %}

        {% comment %}
        In order to support both CSRF tokens and extra form inputs,
        the upload form (assumed to have an id of "fileupload") is serialized
        to produce an array. This array is then updated with the csrf_token.

        The contents of the array are then sent as form data to the upload
        handling Django view.
        {% endcomment %}

        var formData = $('#fileupload').serializeArray();
        formData.push( 
            { name: "csrfmiddlewaretoken", value: "{{ csrf_token }}" }
        );

        $('#fileupload').fileupload({

            formData: formData,

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

        });
        {% 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 %}

{% block JS_EXTRA %}
{% endblock %}


{% endblock %}
