{% extends "base_manage.html" %}
{% set active_page = 'upload' %}

{% block head %}
<script type="text/javascript" src="{{ url_for('static', filename='js/scripts_upload.js') }}?ver={{version}}"></script>
{% endblock %}

{% block title %}loader{% endblock %}

{% block options %}
<fieldset>
<div class="row">
	<div class="col-md-12">
		<legend>File Upload
			<p class="file-spec"> Max. file size: {{ MAX_FILE_SIZE_INT }} {{ MAX_FILE_SIZE_UNITS}}B -- Formats Supported: .txt, .html, .xml and .sgml
			<i class="fa fa-question-circle lexos-tooltip-trigger" style="margin-left:8px;cursor:pointer;font-size:18px;" data-html="true" data-toggle="tooltip" data-placement="right" data-container="body" title="" data-original-title="Upload times may vary, depending on internet speeds. If the upload seems to hang, try uploading smaller files. If you are uploading many files, try uploading them in small batches."></i>
			</p>
			<p class="file-spec">Or use <a href="{{ url_for("scrape") }}">web scraper</a> (alpha) instead.</p>
		</legend>
	</div>
</div>
<div class="row">
		<div class="col-md-2">
			<div class="row">
                <input type="hidden" id="MAX_FILE_SIZE_INT" name="MAX_FILE_SIZE_INT" value={{MAX_FILE_SIZE_INT}} />
                <input type="hidden"  id="MAX_FILE_SIZE_UNITS" name="MAX_FILE_SIZE_UNITS" title={{MAX_FILE_SIZE_UNITS}} />
				<input type="hidden" id="MAX_FILE_SIZE" name="MAX_FILE_SIZE" value={{MAX_FILE_SIZE}} />
                <div class="inputWrapper">

                    <input type="file" id="fileselect" name="fileselect[]" multiple="multiple"/>
                </div>

				<button id="uploadbrowse" class="bttn" type="button"><i class="fa fa-folder-open-o"></i><span>Browse</span></button>
			</div>

			<div class="row">
	 			<div class="progress-div">
					<p id="progress">Ready For Files To Upload</p>
					<div id="progress-bar"></div>
				</div>
			</div>
		</div>

		<div class="col-md-10">
			<div id="dragndrop">Or drop files here</div>
		</div>
</div>
</fieldset>
{% endblock %}

{% block previews %}
<div class="row">
	<div class="col-md-12">
		<script type="text/template" id="file-preview-template">
			<div class="uploadedfilespreivewwrapper">
				<legend class="file-name"></legend>
				<span class="file-information">File Type: <span class="file-type"></span>; Size: <span class="file-size"></span> </span>
			</div>
		</script>
	</div>
</div>
{% endblock %}