{% extends "admin/base_site.html" %}

<!-- LOADING -->
{% load i18n l10n fb_tags admin_static %}
{% load url from future %}

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

<!-- JAVASCRIPTS -->
{% block extrahead %}
    {{ block.super }}
    <script type="text/javascript" src="{% static "admin/js/jquery.min.js" %}"></script>
    <script type="text/javascript" src="{% static "admin/js/jquery.init.js" %}"></script>
    <script type="text/javascript" src="../../jsi18n/"></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 "filebrowser:fb_do_upload" %}',

                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|unlocalize }},
                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); }
            });
        });
    })(django.jQuery);
    </script>
{% endblock %}

<!-- COLTYPE/BODYCLASS -->
{% block bodyclass %}change-form filebrowser{% if query.pop %} popup{% endif %}{% endblock %}
{% block coltype %}flex{% endblock %}

<!-- BREADCRUMBS -->
{% block breadcrumbs %}{% include "filebrowser/include/breadcrumbs.html" %}{% endblock %}

<!-- CONTENT -->
{% block content %}
<div class="container-flexible">
    <div class="form-container">
        <form>
            <fieldset class="module aligned">
            <div class="form-row" id="file-uploader">
                <noscript>
                    {% trans "Please enable Javascript to upload files." %}
                </noscript>
            </div>
            <div style="padding: 6px 20px; text-align: right">
                {% for item in breadcrumbs %}
                    {% if forloop.last %}
                        <strong><a href="{% url 'filebrowser:fb_browse' %}{% query_string "" "q,dir,filename,p" %}&amp;dir={{ item.1|urlencode }}">{% trans "Back" %}</a></strong>
                    {% endif %}
                {% empty %}
                    <strong><a href="{% url 'filebrowser:fb_browse' %}{% query_string "" "q,dir,filename,p" %}&amp;dir={{ item.1|urlencode }}">{% trans "Back" %}</a></strong>
                {% endfor %}
            </div>
            </fieldset>
            <fieldset class="module collapse closed">
                <h2 class="collapse-handler">{% trans "Help" %}</h2>
                <div class="form-row">
                    {% for extension in settings_var.EXTENSIONS.items %}
                        {% if forloop.first %}<label class="required">{% trans "Allowed" %}:</label><br />{% endif %}
                        {% ifnotequal extension.0 'Folder' %}
                            {{ extension.0|safe }} ({{ extension.1|join:", "|safe }})<br />
                        {% endifnotequal %}
                    {% endfor %}
                </div>
                <div class="form-row">
                    <label class="required">{% trans "Max. Filesize" %}:</label>
                    {{ settings_var.MAX_UPLOAD_SIZE|filesizeformat }}
                </div>
                {% if settings_var.NORMALIZE_FILENAME or settings_var.CONVERT_FILENAME %}
                    <div class="form-row">
                        <p>
                            {% if settings_var.NORMALIZE_FILENAME %}
                                {% trans "The Name will be normalized by converting or stripping all non-standard characters." %} <br />
                            {% endif %}
                            {% if settings_var.CONVERT_FILENAME %}
                                {% trans "The Name will be converted to lowercase. Spaces will be replaced with underscores." %}
                            {% endif %}
                        </p>
                    </div>
                {% endif %}
            </fieldset>
        </form>
    </div>
</div>
{% endblock %}