{% extends "files/base.html" %}
{% load file_tags %}
{% load styled_forms %}
{% load i18n %}

{% block title %}{{ block.super }}Add{% endblock %}

{% block extra_head %}
{{ block.super }}
<link rel="stylesheet" href="{{ STATIC_URL }}css/files.css">
<link rel="stylesheet" href="{{ STATIC_URL }}jqueryupload/css/jquery.fileupload-ui.css">
<link rel="stylesheet" href="{{ STATIC_URL }}jqueryupload/css/style.css">
<script type="text/javascript" src="{{ STATIC_URL }}js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="{{ TINYMCE_JS_URL }}"></script>

{% endblock %}

{% block body %}
<div class="t">

    {% file_nav request.user %}

    <h1>{% trans "Add Files" %}</h1>

    <div class="file-wrap">
        <form id="fileupload" action="{% url file.bulk_add %}" method="post" enctype="multipart/form-data">{% csrf_token %}
            <input type="file" name="files"  multiple />
    	    
    	    <div id="formset-container">
    	        {% if file_formset.total_form_count > 0 %}
    	        <input type="submit" value="Update Files" />
    	        <h2>Files</h2>
    	        {% endif %}
    	        {{ file_formset.management_form }}
                {% for file_form in file_formset.forms %}
                    {% if not forloop.first %}
                        <hr/>
                    {% endif %}
                    <div class="edit-wrap">
                        {{ file_form.id }}
        
                        {% for error in file_form.errors %}
                            <li><strong>{{ error|escape }}</strong></li>
                        {% endfor %}
        
                        {{ file_form|styled_form }}
                    </div>
                {% endfor %}
    	    </div>

        </form>

    </div>

</div>
{% endblock %}

{% block extra_body %}
{{ block.super }}
<script type="text/javascript" src="{{ STATIC_URL }}jqueryupload/js/vendor/jquery.ui.widget.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}jqueryupload/js/jquery.iframe-transport.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}jqueryupload/js/jquery.fileupload.js"></script>
<script language="javascript" type="text/javascript">
	$(function () {
		$('#fileupload').fileupload({
			dataType: 'json',
			progressall: function(e, data) {
                var progress = parseInt(data.loaded / data.total * 100, 10);
                $('#formset-container').html(progress + '% done.');
			}
		});
	});
</script>
{% endblock %}
