{%extends "expression-data/base.html"%}
{%from "flash_messages.html" import flash_messages%}
{%from "upload_progress_indicator.html" import upload_progress_indicator%}
{%from "populations/macro-display-population-card.html" import display_population_card%}

{%block title%}Expression Data — Upload Data{%endblock%}

{%block pagetitle%}Expression Data — Upload Data{%endblock%}

{%block contents%}
{{upload_progress_indicator()}}

<div class="row">
  <h2 class="heading">Upload Expression Data</h2>

  <p>This feature enables you to upload expression data. It expects the data to
    be in <strong>tab-separated values (TSV)</strong> files. The data should be
    a simple matrix of <em>phenotype × sample</em>, i.e. The first column is a
    list of the <em>phenotypes</em> and the first row is a list of
    <em>samples/cases</em>.</p>

  <p>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('species.populations.expression-data.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('species.populations.expression-data.data_review')}}#file-types"
	        title="Details for the data expectations.">Help</a>)</li>
  </ol>
</div>

<div class="row">
  <form action="{{url_for(
                'species.populations.expression-data.upload_file',
                species_id=species.SpeciesId,
                population_id=population.Id)}}"
        method="POST"
        enctype="multipart/form-data"
        id="frm-upload-expression-data">
    {{flash_messages("error-expr-data")}}

    <div class="form-group">
      <legend class="heading">File Type</legend>

      <div class="radio">
        <label for="filetype_average" class="form-check-label">
          <input type="radio" name="filetype" value="average" id="filetype_average"
	         required="required" class="form-check-input" />
          Average</label>
        <p class="form-text text-muted">
          <small>The averages data …</small></p>
      </div>

      <div class="radio">
        <label for="filetype_standard_error" class="form-check-label">
          <input type="radio" name="filetype" value="standard-error"
	         id="filetype_standard_error" required="required"
	         class="form-check-input" />
          Standard Error
        </label>
        <p class="form-text text-muted">
          <small>The standard errors computed from the averages …</small></p>
      </div>
    </div>

    <div class="form-group">
      <span id="no-file-error" class="alert-danger" style="display: none;">
        No file selected
      </span>
      <label for="file_upload" class="form-label">Select File</label>
      <input type="file" name="qc_text_file" id="file_upload"
	     accept="text/plain, text/tab-separated-values, application/zip"
	     class="form-control"/>
      <p class="form-text text-muted">
        <small>Select the file to upload.</small></p>
    </div>

    <button type="submit"
            class="btn btn-primary"
            data-toggle="modal"
            data-target="#upload-progress-indicator">upload file</button>
  </form>
</div>
{%endblock%}

{%block sidebarcontents%}
{{display_population_card(species, population)}}
{%endblock%}

{%block javascript%}
<script type="text/javascript" src="/static/js/upload_progress.js"></script>
<script type="text/javascript">
  function setup_formdata(form) {
      var formdata = new FormData();
      formdata.append(
	  "qc_text_file",
	  form.querySelector("input[type='file']").files[0]);
      formdata.append(
	  "filetype",
	  selected_filetype(
	      Array.from(form.querySelectorAll("input[type='radio']"))));
      return formdata;
  }

  setup_upload_handlers(
      "frm-upload-expression-data", make_data_uploader(setup_formdata));
</script>
{%endblock%}