{%extends "phenotypes/add-phenotypes-base.html"%}
{%from "flash_messages.html" import flash_all_messages%}
{%from "macro-table-pagination.html" import table_pagination%}
{%from "phenotypes/macro-display-pheno-dataset-card.html" import display_pheno_dataset_card%}

{%block title%}Phenotypes{%endblock%}

{%block pagetitle%}Phenotypes{%endblock%}

{%block lvl4_breadcrumbs%}
<li {%if activelink=="add-phenotypes"%}
    class="breadcrumb-item active"
    {%else%}
    class="breadcrumb-item"
    {%endif%}>
  <a href="{{url_for('species.populations.phenotypes.add_phenotypes',
           species_id=species.SpeciesId,
           population_id=population.Id,
           dataset_id=dataset.Id)}}">Add Phenotypes</a>
</li>
{%endblock%}

{%block frm_add_phenotypes_documentation%}
<p>Provide all the files requested below. &hellip; document this better &hellip;</p>
{%endblock%}

{%block frm_add_phenotypes_elements%}
<fieldset id="fldset-file-metadata">
  <legend>File(s) Metadata</legend>
  <div class="form-group">
    <label for="txt-file-separator" class="form-label">File Separator</label>
    <div class="input-group">
      <input id="txt-file-separator"
             name="file-separator"
             type="text"
             value="&#9;"
             class="form-control"
             maxlength="1" />
      <span class="input-group-btn">
        <button id="btn-reset-file-separator" class="btn btn-info">Reset Default</button>
      </span>
    </div>
    <span class="form-text text-muted">
      Provide the character that separates the fields in your file(s). It should
      be the same character for all files (if more than one is provided).<br />
      A tab character will be assumed if you leave this field blank.</span>
  </div>

  <div class="form-group">
    <label for="txt-file-comment-character" class="form-label">File Comment-Character</label>
    <div class="input-group">
      <input id="txt-file-comment-character"
             name="file-comment-character"
             type="text"
             value="#"
             class="form-control"
             maxlength="1" />
      <span class="input-group-btn">
        <button id="btn-reset-file-comment-character" class="btn btn-info">
          Reset Default</button>
      </span>
    </div>
    <span class="form-text text-muted">
      This specifies that lines that begin with the character provided will be
      considered comment lines and ignored in their entirety.</span>
  </div>

  <div class="form-group">
    <label for="txt-file-na" class="form-label">File "No-Value" Indicators</label>
    <div class="input-group">
      <input id="txt-file-na"
             name="file-na"
             type="text"
             value="- NA N/A"
             class="form-control" />
      <span class="input-group-btn">
        <button id="btn-reset-file-na" class="btn btn-info">Reset Default</button>
      </span>
    </div>
    <span class="form-text text-muted">
      This specifies strings in your file indicate that there is no value for a
      particular cell (a cell is where a column and row intersect). Provide a
      space-separated list of strings if you have more than one way of
      indicating no values.</span>
  </div>
</fieldset>

<fieldset id="fldset-data-files">
  <legend>Data File(s)</legend>

  <div class="form-group">
    <label for="finput-phenotype-descriptions" class="form-label">
      Phenotype Descriptions</label>
    <input id="finput-phenotype-descriptions"
           name="phenotype-descriptions"
           class="form-control"
           type="file"
           required="required"  />
    <span class="form-text text-muted">
      Provide a file that contains only the phenotype descriptions,
      <a href="#docs-file-phenotype-description"
         title="Documentation of the phenotype data file format.">
        the documentation for the expected format of the file</a>.</span>
  </div>

  <div class="form-group">
    <label for="finput-phenotype-data" class="form-label">Phenotype Data</label>
    <input id="finput-phenotype-data"
           name="phenotype-data"
           class="form-control"
           type="file"
           required="required"  />
    <span class="form-text text-muted">
      Provide a file that contains only the phenotype data. See
      <a href="#docs-file-example"
         title="Documentation of the phenotype data file format.">
        the documentation for the expected format of the file</a>.</span>
  </div>
  {%if population.Family in families_with_se_and_n%}
  <div class="form-group">
    <label for="finput-phenotype-se" class="form-label">Phenotype: Standard Errors</label>
    <input id="finput-phenotype-se"
           name="phenotype-se"
           class="form-control"
           type="file"
           required="required"  />
    <span class="form-text text-muted">
      Provide a file that contains only the standard errors for the phenotypes,
      computed from the data above.</span>
  </div>

  <div class="form-group">
    <label for="finput-phenotype-n" class="form-label">Phenotype: Number of Samples/Individuals</label>
    <input id="finput-phenotype-n"
           name="phenotype-n"
           class="form-control"
           type="file"
           required="required"  />
    <span class="form-text text-muted">
      Provide a file that contains only the number of samples/individuals used in
      the computation of the standard errors above.</span>
  </div>
</fieldset>
{%endif%}
{%endblock%}


{%block page_documentation%}
page documentation goes here!!!


{%block more_javascript%}
<script type="text/javascript">
  $("#btn-reset-file-separator").on("click", (event) => {
      event.preventDefault();
      $("#txt-file-separator").val("\t");
  });
  $("#btn-reset-file-comment-character").on("click", (event) => {
      event.preventDefault();
      $("#txt-file-comment-character").val("#");
  });
  $("#btn-reset-file-na").on("click", (event) => {
      event.preventDefault();
      $("#txt-file-na").val("- NA N/A");
  });
</script>
{%endblock%}