{%extends "base.html"%}

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

{%block contents%}
<h1 class="heading">upload file</h1>

<div id="explainer">
  <p>This application assumes that you are familiar with the basics of data
    verification formats and uploading procedures. If you haven't done so please
    go to this page to learn the requirements for file formats and helpful
    suggestions to enter your data in a fast and easy way.</p>

  <ol>
    <li><strong>PLEASE REVIEW YOUR DATA.</strong>Make sure your data complies
      with our system requirements. (
      <a href="{{url_for('entry.data_review')}}#data-concerns"
	 title="Details for the data expectations.">Help</a>
      )</li>
    <li><strong>UPLOAD YOUR DATA FOR DATA VERIFICATION.</strong> We accept
      <strong>.csv</strong>, <strong>.txt</strong> and <strong>.zip</strong>
      files (<a href="{{url_for('entry.data_review')}}#file-types"
	 title="Details for the data expectations.">Help</a>)</li>
  </ol>
</div>

<form action="{{url_for('entry.upload_file')}}"
      method="POST" enctype="multipart/form-data">
  <legend class="heading">upload file</legend>
  {%with messages = get_flashed_messages(with_categories=True) %}
  {%if messages %}
  <div class="alerts">
    {%for category, message in messages %}
    <span class="alert {{category}}">{{message}}</span>
    {%endfor%}
  </div>
  {%endif%}
  {%endwith%}

  <fieldset>
    <legend>file type</legend>

    <input type="radio" name="filetype" value="average" id="filetype_average"
	   required="required" class="form-col-1" />
    <label for="filetype_average" class="form-col-2">average</label>

    <input type="radio" name="filetype" value="standard-error"
	   id="filetype_standard_error" required="required"
	   class="form-col-1" />
    <label for="filetype_standard_error" class="form-col-2">
      standard error
    </label>
  </fieldset>

  <fieldset>
    <span id="no-file-error" class="alert-error" style="display: none;">
      No file selected
    </span>
    <label for="file_upload" class="form-col-1">select file</label>
    <input type="file" name="qc_text_file" id="file_upload"
	   accept="text/plain, text/tab-separated-values, application/zip"
	   class="form-col-2"/>
  </fieldset>

  <fieldset>
    <input type="submit" value="upload file" class="btn btn-main form-col-2" />
  </fieldset>
</form>

<div id="progress-indicator" class="hidden">
  <h3>Uploading file</h3>
  <p id="progress-filename">the-file</p>
  <progress id="progress-bar" value="0" max="100">
    0
  </progress>
  <p id="progress-text">Uploading 0%</p>
  <p id="progress-extra-text">Processing</p>
  <form id="frm-cancel-upload" style="border-style: none;">
    <button id="btn-cancel-upload" type="submit" class="btn btn-danger">
      Cancel
    </button>
  </form>
</div>
{%endblock%}


{%block javascript%}
<script type="text/javascript" src="static/js/upload_progress.js"></script>
<script type="text/javascript">
  setup_upload_handlers();
</script>
{%endblock%}