{%extends "base.html"%}
{%from "flash_messages.html" import flash_all_messages%}
{%from "upload_progress_indicator.html" import upload_progress_indicator%}

{%block title%}Upload R/qtl2 Bundle{%endblock%}

{%block contents%}
<h2 class="heading">Upload R/qtl2 Bundle</h2>

{{upload_progress_indicator()}}

<form id="frm-upload-rqtl2-bundle"
      action="{{url_for('upload.rqtl2.upload_rqtl2_bundle',
	      species_id=species.SpeciesId,
	      population_id=population.InbredSetId)}}"
      method="POST"
      enctype="multipart/form-data">
  <input type="hidden" name="species_id" value="{{species.SpeciesId}}" />
  <input type="hidden" name="population_id"
	 value="{{population.InbredSetId}}" />

  {{flash_all_messages()}}

  <fieldset>
    <legend>file upload</legend>
    <label for="file-rqtl2-bundle">R/qtl2 bundle</label>
    <input type="file" id="file-rqtl2-bundle" name="rqtl2_bundle_file"
	   accept="application/zip, .zip"
	   required="required" />
    <span class="form-input-help"><p>Provide a valid R/qtl2 zip file here. In
      particular, ensure your zip bundle contains exactly one control file and
      the corresponding files mentioned in the control file.</p>
      <p>The control file can be either a YAML or JSON file. <em>ALL</em> other
	data files in the zip bundle should be CSV files.</p>
      <p>See the
	<a href="https://kbroman.org/qtl2/assets/vignettes/input_files.html"
	   target="_blank">
	  R/qtl2 file format specifications</a> for more details.</p></span>
  </fieldset>
  <fieldset>
    <input type="submit"
	   value="upload R/qtl2 bundle"
	   class="btn btn-main form-col-2" />
  </fieldset>
</form>

{%endblock%}

{%block javascript%}
<script type="text/javascript" src="/static/js/upload_progress.js"></script>
<script type="text/javascript">
  setup_upload_handlers(
      "frm-upload-rqtl2-bundle", make_data_uploader(
	  function (form) {
	      var formdata = new FormData();
	      formdata.append(
		  "species_id",
		  form.querySelector('input[name="species_id"]').value);
	      formdata.append(
		  "population_id",
		  form.querySelector('input[name="population_id"]').value);
	      formdata.append(
		  "rqtl2_bundle_file",
		  form.querySelector("#file-rqtl2-bundle").files[0]);
	      return formdata;
	  }));
</script>
{%endblock%}