{% extends "admin/base_site.html" %}
{% load i18n admin_static admin_list admin_urls %}
{% load fb_tags %}
{% load url from future %}

{% block extrastyle %}
    {{ block.super }}
    <link rel="stylesheet" type="text/css" href="{{ settings_var.URL_FILEBROWSER_MEDIA }}css/suit-filebrowser.css" />
{% endblock %}

{% block extrahead %}
    {{ block.super }}
    <script type="text/javascript" src="../../jsi18n/"></script>
    <script type="text/javascript" src="{% static "admin/js/core.js" %}"></script>
    <script type="text/javascript" src="{{ settings_var.URL_FILEBROWSER_MEDIA }}js/fileuploader.js"></script>

    <script type="text/javascript">

        (function($){
        $(document).ready(function() {
            var uploader = new qq.FileUploader({
                element: $('#file-uploader').get(0),
                action: '{% url 'fb_do_upload' %}',

                template: '<div class="qq-uploader">' +
                    '<div class="qq-upload-drop-area"><span>{% trans "Drop files here to upload" %}</span></div>' +
                    '<div class="qq-upload-button">{% trans "Upload a file" %}</div>' +
                    '<ul class="qq-upload-list"></ul>' +
                '</div>',

                fileTemplate: '<li>' +
                    '<span class="qq-upload-file"></span>' +
                    '<span class="qq-upload-spinner"></span>' +
                    '<span class="qq-upload-size"></span>' +
                    '<a class="qq-upload-cancel" href="#">{% trans "Cancel" %}</a>' +
                    '<span class="qq-upload-failed-text">{% trans "Failed" %}</span>' +
                    '<div class="progress-bar"><div class="content"></div></div>' +
                '</li>',

                params: { 'csrf_token': '{{ csrf_token }}',
                          'csrf_name': 'csrfmiddlewaretoken',
                          'csrf_xname': 'X-CSRFToken',
                          'folder': '{{ query.dir|escapejs }}', },

                sizeLimit: {{ settings_var.MAX_UPLOAD_SIZE }},
                minSizeLimit: 0,
                debug: false,
                // messages
                messages: {
                    typeError: "{% trans "{file} has invalid extension. Only {extensions} are allowed." %}",
                    sizeError: "{% trans "{file} is too large, maximum file size is {sizeLimit}." %}",
                    minSizeError: "{% trans "{file} is too small, minimum file size is {minSizeLimit}." %}",
                    emptyError: "{% trans "{file} is empty, please select files again without it." %}",
                    onLeave: "{% trans "The files are being uploaded, if you leave now the upload will be cancelled." %}"
                },

                getItem: function(id) {
                    var items = $(this.element).find('.qq-upload-list li').get();
                    var item = items.pop();

                    while (typeof item != "undefined") {
                        if (item.qqFileId == id) {
                            return $(item);
                        }
                        item = items.pop();
                    }
                },
                onProgress: function(id, fileName, loaded, total){
                    var bar = this.getItem(id).find('.progress-bar .content');
                    var new_width = '' + (loaded/total * 100) + '%';
                    bar.css('width', new_width);
                },
                onComplete: function(id, fileName, resp){
                    // if (resp.success) {
                    //     this.getItem(id).fadeOut('slow');
                    // }
                },
                showMessage: function(message){ alert(message); }
            });
        });
    })(jQuery.noConflict());
    </script>
{% endblock %}

{% block coltype %}colM{% endblock %}

{% block bodyclass %}change-form{% endblock %}

{% block breadcrumbs %}
    {% include "suit/include/breadcrumbs.html" %}
{% endblock %}

{% block content %}
    <div id="content-main" class="inner-two-columns">
        <form class="form-horizontal" method='post'>
            {% csrf_token %}
            <div class="inner-right-column">
                <div class="box save-box">
                    <div class="submit-row clearfix">
                        <a href="javascript:window.history.back();" style="min-height: 20px; width: 130px;" class="btn btn-high btn-info">{% trans 'Go' %}</a>
                        <!-- <input type="submit" value="{% trans 'Submit' %}" class="btn btn-high btn-info" />
                        <input type="button" value="{% trans "Clear Queue" %}" class="btn btn-high btn-info" name="clear"/> -->
                    </div>
                </div>
            </div>
            <div class="inner-center-column">
                <div class="tab-content tab-content-main">
                    <fieldset class="module aligned">
                        <div class="control-group">
                            <div class="control-label">
                                <label class="required" for="id_file">{% trans "Select a file." %}</label>
                            </div>
                            <div class="controls">
                                {# <input type="File" id="id_file" class="btn btn-info"/> #}
                                <div class="grp-row" id="file-uploader">
                                    <noscript>
                                        {% trans "Please enable Javascript to upload files." %}
                                    </noscript>
                                </div>
                                {% for extension in settings_var.EXTENSIONS.items %}
                                <span class="help-block">

                                        {% ifnotequal extension.0 'Folder' %}
                                            <strong>{% if forloop.first %}{% trans "Allowed" %}:{% else %}&nbsp;{% endif %}</strong>
                                            <p>{{ extension.0|safe }} ({{ extension.1|join:", "|safe }})</p>
                                        {% endifnotequal %}

                                </span>
                                {% endfor %}
                                <br>
                                <span class="help-block">
                                    <strong>{% trans "Max. Filesize" %}:</strong>
                                    <p>{{ settings_var.MAX_UPLOAD_SIZE|filesizeformat }}</p>
                                </span>
                                {% if settings_var.CONVERT_FILENAME %}
                                    <br>
                                    <span class="help-block">
                                        <strong>{% trans "The Name will be converted to lowercase. Spaces will be replaced with underscores." %}</strong>
                                    </span>
                                {% endif %}
                            </div>
                        </div>
                    </fieldset>
                </div>
            </div>
        </form>
    </div>
{% endblock %}