<html lang="en">{% load upload_tags %}
<!--
/*
 * jQuery File Upload Plugin Demo 6.8
 * https://github.com/blueimp/jQuery-File-Upload
 *
 * Copyright 2010, Sebastian Tschan
 * https://blueimp.net
 *
 * Licensed under the MIT license:
 * http://www.opensource.org/licenses/MIT
 */
// -->
<head>
    <meta charset="utf-8">
    <title>Django Jquery File Upload Example</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <!-- Bootstrap CSS Toolkit styles -->
    <link rel="stylesheet" href="{{ STATIC_URL }}css/bootstrap.min.css">
    <!-- Generic page styles -->
    <link rel="stylesheet" href="{{ STATIC_URL }}css/style.css">
    <!-- Bootstrap styles for responsive website layout, supporting different screen sizes -->
    <link rel="stylesheet" href="{{ STATIC_URL }}css/bootstrap-responsive.min.css">
    <!-- CSS to style the file input field as button and adjust the Bootstrap progress bars -->
    <link rel="stylesheet" href="{{ STATIC_URL }}css/bootstrap-image-gallery.min.css">
    <link rel="stylesheet" href="{{ STATIC_URL }}css/jquery.fileupload-ui.css">
    <!-- Shim to make HTML5 elements usable in older Internet Explorer versions -->
    <!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
      	{% for pic in pics %}
      		<img src="/media/{{pic.file}}" heigh="100" width="100"/>
		{% endfor %}
    <div class="navbar navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container">
                <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </a>
                <a class="brand" href="https://github.com/sigurdga/django-jquery-file-upload">Django jQuery File Upload</a>
                <div class="nav-collapse">
                    <ul class="nav">
                        <li class="active"><a href="#">Demo</a></li>
                        <li><a href="https://github.com/sigurdga/django-jquery-file-upload">Source Code</a></li>
                        <li><a href="https://github.com/blueimp/jQuery-File-Upload/wiki">Documentation</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="page-header">
            <h1>Django Jquery File Upload Demo</h1>
        </div>
        <form id="fileupload" method="post" action="./add/" enctype="multipart/form-data">{% csrf_token %}
            <div class="row fileupload-buttonbar">
                <div class="span7">
                    <span class="btn btn-primary fileinput-button">
                        <i class="icon-plus icon-white"></i>
                        <span>Add files...</span>
                        <input type="file" name="file" multiple>
                    </span>
                    <button type="submit" class="btn btn-success start">
                        <i class="icon-upload icon-white"></i>
                        <span>Start upload</span>
                    </button>
                    <button type="reset" class="btn btn-warning cancel">
                        <i class="icon-ban-circle icon-white"></i>
                        <span>Cancel upload</span>
                    </button>
                    <button type="button" class="btn btn-danger delete">
                        <i class="icon-trash icon-white"></i>
                        <span>Delete files</span>
                    </button>
                    <input type="checkbox" class="toggle">
                </div>
                <div class="span5 fileupload-progress fade">
                    <div class="progress progress-success progres-striped active">
                        <div class="bar" style="width:0%"></div>
                    </div>
                    <div class="progress-extended">&nbsp;</div>
                </div>
            </div>
            <div class="fileupload-loading"></div>
            <table class="table table-striped"><tbody class="files" data-toggle="modal-gallery" data-target="#modal-gallery"></tbody></table>
        </form>
        <div class="fileupload-content">
            <table class="files"></table>
            <div class="fileupload-progressbar"></div>
        </div>
    </div>
    <!-- modal-gallery is the modal dialog used for the image gallery -->
    <div id="modal-gallery" class="modal modal-gallery hide fade" data-filter=":odd">
        <div class="modal-header">
            <a class="close" data-dismiss="modal">&times;</a>
            <h3 class="modal-title"></h3>
        </div>
        <div class="modal-body"><div class="modal-image"></div></div>
        <div class="modal-footer">
            <a class="btn modal-download" target="_blank">
                <i class="icon-download"></i>
                <span>Download</span>
            </a>
            <a class="btn btn-success modal-play modal-slideshow" data-slideshow="5000">
                <i class="icon-play icon-white"></i>
                <span>Slideshow</span>
            </a>
            <a class="btn btn-info modal-prev">
                <i class="icon-arrow-left icon-white"></i>
                <span>Previous</span>
            </a>
            <a class="btn btn-primary modal-next">
                <span>Next</span>
                <i class="icon-arrow-right icon-white"></i>
            </a>
        </div>
    </div>
    {% upload_js %}
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="{{ STATIC_URL }}js/jquery.ui.widget.js"></script>
    <script src="{{ STATIC_URL }}js/tmpl.min.js"></script>
    <script src="{{ STATIC_URL }}js/load-image.min.js"></script>
    <script src="{{ STATIC_URL }}js/canvas-to-blob.min.js"></script>
    <script src="{{ STATIC_URL }}js/bootstrap.min.js"></script>
    <script src="{{ STATIC_URL }}js/bootstrap-image-gallery.min.js"></script>
    <script src="{{ STATIC_URL }}js/jquery.iframe-transport.js"></script>
    <script src="{{ STATIC_URL }}js/jquery.fileupload.js"></script>
    <script src="{{ STATIC_URL }}js/jquery.fileupload-fp.js"></script>
    <script src="{{ STATIC_URL }}js/jquery.fileupload-ui.js"></script>
    <script src="{{ STATIC_URL }}js/locale.js"></script>
    <script src="{{ STATIC_URL }}js/main.js"></script>
</body>
</html>
