{% extends 'base.html' %}

{% load static %}

{% block title %}Multiple File Upload{% endblock %}

{% block css %}
	<link href="{% static 'plugins/blueimp-gallery/css/blueimp-gallery.min.css' %}" rel="stylesheet" />
	<link href="{% static 'plugins/blueimp-file-upload/css/jquery.fileupload.css' %}" rel="stylesheet" />
	<link href="{% static 'plugins/blueimp-file-upload/css/jquery.fileupload-ui.css' %}" rel="stylesheet" />
{% endblock %}

{% block js %}
	<script src="{% static 'plugins/blueimp-file-upload/js/vendor/jquery.ui.widget.js' %}"></script>
	<script src="{% static 'plugins/blueimp-tmpl/js/tmpl.js' %}"></script>
	<script src="{% static 'plugins/blueimp-load-image/js/load-image.all.min.js' %}"></script>
	<script src="{% static 'plugins/blueimp-canvas-to-blob/js/canvas-to-blob.js' %}"></script>
	<script src="{% static 'plugins/blueimp-gallery/js/jquery.blueimp-gallery.min.js' %}"></script>
	<script src="{% static 'plugins/blueimp-file-upload/js/jquery.iframe-transport.js' %}"></script>
	<script src="{% static 'plugins/blueimp-file-upload/js/jquery.fileupload.js' %}"></script>
	<script src="{% static 'plugins/blueimp-file-upload/js/jquery.fileupload-process.js' %}"></script>
	<script src="{% static 'plugins/blueimp-file-upload/js/jquery.fileupload-image.js' %}"></script>
	<script src="{% static 'plugins/blueimp-file-upload/js/jquery.fileupload-audio.js' %}"></script>
	<script src="{% static 'plugins/blueimp-file-upload/js/jquery.fileupload-video.js' %}"></script>
	<script src="{% static 'plugins/blueimp-file-upload/js/jquery.fileupload-validate.js' %}"></script>
	<script src="{% static 'plugins/blueimp-file-upload/js/jquery.fileupload-ui.js' %}"></script>
	<script src="{% static 'js/demo/form-multiple-upload.demo.js' %}"></script>
	<script src="{% static 'plugins/@highlightjs/cdn-assets/highlight.min.js' %}"></script>
	<script src="{% static 'js/demo/render.highlight.js' %}"></script>
{% endblock %}

{% block content %}
	<!-- BEGIN breadcrumb -->
	<ol class="breadcrumb float-xl-end">
		<li class="breadcrumb-item"><a href="javascript:;">Home</a></li>
		<li class="breadcrumb-item"><a href="javascript:;">Form Stuff</a></li>
		<li class="breadcrumb-item active">Multiple File Upload</li>
	</ol>
	<!-- END breadcrumb -->
	<!-- BEGIN page-header -->
	<h1 class="page-header">Multiple File Upload <small>header small text goes here...</small></h1>
	<!-- END page-header -->
	
	<!-- BEGIN form-file-upload -->
	<form id="fileupload" action="{% static 'plugins/jquery-file-upload/server/php/' %}" method="POST" enctype="multipart/form-data">
		<!-- BEGIN panel -->
		<div class="panel panel-inverse">
			<!-- BEGIN panel-heading -->
			<div class="panel-heading">
				<h4 class="panel-title">
					jQuery File Upload
					<b class="badge d-inline-flex align-items-center p-0 ms-1">
						<i class="fa fa-circle fa-fw fs-6px text-blue me-1"></i> 
						<i class="fa fa-circle fa-fw fs-6px text-cyan me-1"></i>
						<i class="fa fa-circle fa-fw fs-6px text-teal"></i>
					</b>
				</h4>
				<div class="panel-heading-btn">
					<a href="javascript:;" class="btn btn-xs btn-icon btn-default" data-toggle="panel-expand"><i class="fa fa-expand"></i></a>
					<a href="javascript:;" class="btn btn-xs btn-icon btn-success" data-toggle="panel-reload"><i class="fa fa-redo"></i></a>
					<a href="javascript:;" class="btn btn-xs btn-icon btn-warning" data-toggle="panel-collapse"><i class="fa fa-minus"></i></a>
					<a href="javascript:;" class="btn btn-xs btn-icon btn-danger" data-toggle="panel-remove"><i class="fa fa-times"></i></a>
				</div>
			</div>
			<!-- END panel-heading -->
			<div class="alert alert-primary rounded-0 d-flex align-items-center mb-0">
				<div class="fs-24px w-80px text-center">
					<i class="fa fa-lightbulb fa-2x"></i>
				</div>
				<div class="flex-1 ms-3">
					<h4>Demo Notes</h4>
					<ul class="ps-3 mb-1">
						<li>The maximum file size for uploads in this demo is <strong>5 MB</strong> (default file size is unlimited).</li>
						<li>Only image files (<strong>JPG, GIF, PNG</strong>) are allowed in this demo (by default there is no file type restriction).</li>
						<li>Uploaded files will be deleted automatically after <strong>5 minutes</strong> (demo setting).</li>
					</ul>
				</div>
			</div>
			<!-- BEGIN panel-body -->
			<div class="panel-body">			
				<div class="row fileupload-buttonbar">
					<div class="col-xl-7">
						<span class="btn btn-primary fileinput-button me-1">
							<i class="fa fa-fw fa-plus"></i>
							<span>Add files...</span>
							<input type="file" name="files[]" multiple>
						</span>
						<button type="submit" class="btn btn-primary start me-1">
							<i class="fa fa-fw fa-upload"></i>
							<span>Start upload</span>
						</button>
						<button type="reset" class="btn btn-default cancel me-1">
							<i class="fa fa-fw fa-ban"></i>
							<span>Cancel upload</span>
						</button>
						<button type="button" class="btn btn-default delete me-1">
							<i class="fa fa-fw fa-trash"></i>
							<span>Delete</span>
						</button>
						<!-- The global file processing state -->
						<span class="fileupload-process"></span>
					</div>
					<!-- The global progress state -->
					<div class="col-xl-5 fileupload-progress fade d-none d-xl-block">
						<!-- The global progress bar -->
						<div class="progress progress-striped active">
							<div class="progress-bar progress-bar-success" style="width:0%;"></div>
						</div>
						<!-- The extended global progress state -->
						<div class="progress-extended">&nbsp;</div>
					</div>
				</div>
			</div>
			<!-- END panel-body -->
			<!-- BEGIN table -->
			<div class="table-responsive">
				<table class="table table-panel text-nowrap mb-0">
					<thead>
						<tr>
							<th width="10%">PREVIEW</th>
							<th>FILE INFO</th>
							<th>UPLOAD PROGRESS</th>
							<th width="1%"></th>
						</tr>
					</thead>
					<tbody class="files">
						<tr data-id="empty">
							<td colspan="4" class="text-center text-gray-500 py-30px">
								<div class="mb-10px"><i class="fa fa-file fa-3x"></i></div>
								<div class="fw-bold">No file selected</div>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
			<!-- END table -->
			<!-- BEGIN hljs-wrapper -->
			<div class="hljs-wrapper rounded-0 rounded-bottom">
				<pre><code class="html" data-url="{% static 'data/form-multiple-upload/code-1.json' %}"></code></pre>
			</div>
			<!-- END hljs-wrapper -->
		</div>
		<!-- END panel -->
	</form>
	<!-- END form-file-upload -->
{% endblock %}

{% block outter_content %}
	<!-- The blueimp Gallery widget -->
	<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls" data-filter=":even">
		<div class="slides"></div>
		<h3 class="title"></h3>
		<a class="prev">‹</a>
		<a class="next">›</a>
		<a class="close">×</a>
		<a class="play-pause"></a>
		<ol class="indicator"></ol>
	</div>
	
	{% verbatim %}
		<!-- The template to display files available for upload -->
		<script id="template-upload" type="text/x-tmpl">
			{% for (var i=0, file; file=o.files[i]; i++) { %}
			<tr class="template-upload fade show">
				<td>
					<span class="preview"></span>
				</td>
				<td>
					<div class="bg-light rounded p-3 mb-2">
						<dl class="mb-0">
							<dt class="text-dark">File Name:</dt>
							<dd class="name">{%=file.name%}</dd>
							<hr />
							<dt class="text-dark mt-10px">File Size:</dt>
							<dd class="size mb-0">Processing...</dd>
						</dl>
					</div>
					<strong class="error text-danger h-auto d-block text-left"></strong>
				</td>
				<td>
					<dl>
						<dt class="text-dark mt-3px">Progress:</dt>
						<dd class="mt-5px">
							<div class="progress progress-sm progress-striped active rounded-pill"><div class="progress-bar progress-bar-primary" style="width:0%; min-width: 40px;">0%</div></div>
						</dd>
					</dl>
				</td>
				<td nowrap>
					{% if (!i && !o.options.autoUpload) { %}
						<button class="btn btn-primary start w-100px pe-20px mb-2 d-block" disabled>
							<i class="fa fa-upload fa-fw text-dark"></i>
							<span>Start</span>
						</button>
					{% } %}
					{% if (!i) { %}
						<button class="btn btn-default cancel w-100px pe-20px d-block">
							<i class="fa fa-trash fa-fw text-muted"></i>
							<span>Cancel</span>
						</button>
					{% } %}
				</td>
			</tr>
			{% } %}
		</script>
		
		<!-- The template to display files available for download -->
		<script id="template-download" type="text/x-tmpl">
			{% for (var i=0, file; file=o.files[i]; i++) { %}
				<tr class="template-download fade show">
					<td width="1%">
						<span class="preview">
							{% if (file.thumbnailUrl) { %}
								<a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" data-gallery><img src="{%=file.thumbnailUrl%}" class="rounded"></a>
							{% } else { %}
								<div class="bg-light text-center fs-20px" style="width: 80px; height: 80px; line-height: 80px; border-radius: 6px;">
									<i class="fa fa-file-image fa-lg text-gray-500"></i>
								</div>
							{% } %}
						</span>
					</td>
					<td>
						<div class="bg-light p-3 mb-2">
							<dl class="mb-0">
								<dt class="text-dark">File Name:</dt>
								<dd class="name">
									{% if (file.url) { %}
										<a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" {%=file.thumbnailUrl?'data-gallery':''%}>{%=file.name%}</a>
									{% } else { %}
										<span>{%=file.name%}</span>
									{% } %}
								</dd>
								<hr />
								<dt class="text-dark mt-10px">File Size:</dt>
								<dd class="size mb-0">{%=o.formatFileSize(file.size)%}</dd>
							</dl>
							{% if (file.error) { %}
								<hr />
								<div><span class="badge bg-danger me-1">ERROR</span> {%=file.error%}</div>
							{% } %}
						</div>
					</td>
					<td></td>
					<td>
						{% if (file.deleteUrl) { %}
							<button class="btn btn-danger delete w-100px mb-2 pe-20px" data-type="{%=file.deleteType%}" data-url="{%=file.deleteUrl%}"{% if (file.deleteWithCredentials) { %} data-xhr-fields='{"withCredentials":true}'{% } %}>
								<i class="fa fa-trash float-start fa-fw text-dark mt-2px"></i>
								<span>Delete</span>
							</button>
							<input type="checkbox" name="delete" value="1" class="toggle">
						{% } else { %}
							<button class="btn btn-default cancel w-100px me-3px pe-20px">
								<i class="fa fa-trash float-start fa-fw text-muted mt-2px"></i>
								<span>Cancel</span>
							</button>
						{% } %}
					</td>
				</tr>
			{% } %}
		</script>
	{% endverbatim %}
{% endblock %}