{%extends "phenotypes/base.html"%}
{%from "flash_messages.html" import flash_all_messages%}
{%from "macro-table-pagination.html" import table_pagination%}

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

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

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

{%block contents%}
{{flash_all_messages()}}

<div class="row">
  <h2>Phenotype Data</h2>

  <p>Click on any of the phenotypes in the table below to view and edit that
    phenotype's data.</p>
  <p>Use the search to filter through all the phenotypes and find specific
    phenotypes of interest.</p>
</div>

<div class="row">
  <div class="col">
    <a href="{{url_for('species.populations.phenotypes.add_phenotypes',
             species_id=species.SpeciesId,
             population_id=population.Id,
             dataset_id=dataset.Id)}}"
       title="Add a bunch of phenotypes"
       class="btn btn-primary">Add phenotypes</a>
  </div>

  <div class="col">
    <form id="frm-recompute-phenotype-means"
          method="POST"
          action="{{url_for(
                  'species.populations.phenotypes.recompute_means',
                  species_id=species['SpeciesId'],
                  population_id=population['Id'],
                  dataset_id=dataset['Id'])}}"
          class="d-flex flex-row align-items-center flex-wrap"
          style="display: inline;">
      <input type="submit"
             title="Compute/Recompute the means for all phenotypes."
             class="btn btn-info"
             value="compute means"
             id="submit-frm-recompute-phenotype-means" />
    </form>
  </div>

  <div class="col">
    <form id="frm-run-qtlreaper"
          method="POST"
          action="{{url_for(
                  'species.populations.phenotypes.rerun_qtlreaper',
                  species_id=species['SpeciesId'],
                  population_id=population['Id'],
                  dataset_id=dataset['Id'])}}"
          class="d-flex flex-row align-items-center flex-wrap"
          style="display: inline;">
      <input type="submit"
             title="Run/Rerun QTLReaper."
             class="btn btn-info"
             value="run QTLReaper"
             id="submit-frm-rerun-qtlreaper" />
    </form>
  </div>

  {%if view_under_construction%}
  <div class="col">
    <a href="{{url_for(
                'species.populations.phenotypes.delete_phenotypes',
                species_id=species['SpeciesId'],
                population_id=population['Id'],
                dataset_id=dataset['Id'])}}"
       class="btn btn-danger"
       id="btn-delete-phenotypes"
       title="Delete phenotypes from this dataset. If no phenotypes are selected in the table, this will delete ALL the phenotypes.">
      delete phenotypes</a>
  </div>
  {%endif%}
</div>

<div class="row" style="margin-top: 0.5em;">
  <table id="tbl-phenotypes-list" class="table compact stripe cell-border">
    <thead>
      <tr>
        <th></th>
        <th>Index</th>
        <th>Record</th>
        <th>Description</th>
      </tr>
    </thead>

    <tbody></tbody>
  </table>
</div>
{%endblock%}


{%block javascript%}
<script type="text/javascript" src="/static/js/urls.js"></script>

<script type="text/javascript">
  $(function() {
      var species_id = {{species.SpeciesId}};
      var population_id = {{population.Id}};
      var dataset_id = {{dataset.Id}};
      var dataset_name = "{{dataset.Name}}";
      var data = {{phenotypes | tojson}};

      var dtPhenotypesList = buildDataTable(
          "#tbl-phenotypes-list",
          data,
          [
              {
                  data: function(pheno) {
                      return `<input type="checkbox" name="selected-phenotypes" `
                          + `id="chk-selected-phenotypes-${pheno.InbredSetCode}_${pheno.xref_id}" `
                          + `value="${pheno.InbredSetCode}_${pheno.xref_id}" `
                          + `class="chk-row-select" />`
                  }
              },
              {data: "sequence_number"},
              {
                  data: function(pheno, type, set, meta) {
                      var spcs_id = {{species.SpeciesId}};
                      var pop_id = {{population.Id}};
                      var dtst_id = {{dataset.Id}};
                      var url = buildURLFromCurrentURL(
                          (`/species/${spcs_id}` +
                          `/populations/${pop_id}` +
                          `/phenotypes/datasets/${dtst_id}` +
                           `/phenotype/${pheno.xref_id}`));
                      return `<a href="${url.toString()}" target="_blank">` +
                          `${pheno.InbredSetCode}_${pheno.xref_id}` +
                          `</a>`;
                  }
              },
              {
                  data: function(pheno) {
                      return (pheno.Post_publication_description ||
                              pheno.Original_description ||
                              pheno.Pre_publication_description);
                  }
              }
          ],
          {
              select: "multi+shift",
              layout: {
                  top1Start: {
                      pageLength: {
                          text: "Show _MENU_ of _TOTAL_"
                      }
                  },
                  topStart: "info",
                  top1End: null
              },
              rowId: function(pheno) {
                  return `${pheno.InbredSetCode}_${pheno.xref_id}`;
              }
          });


      $("#submit-frm-rerun-qtlreaper").on(
          "click",
          function(event) {
              // (Re)run the QTLReaper script for selected phenotypes.
              event.preventDefault();
              var form = $("#frm-run-qtlreaper");
              form.find(".dynamically-added-element").remove();
              dtPhenotypesList.rows({selected: true}).nodes().each((node, index) => {
                  _cloned = $(node).find(".chk-row-select").clone();
                  _cloned.removeAttr("id");
                  _cloned.removeAttr("class");
                  _cloned.attr("style", "display: none;");
                  _cloned.attr("data-type", "dynamically-added-element");
                  _cloned.attr("class", "dynamically-added-element checkbox");
                  _cloned.prop("checked", true);
                  form.append(_cloned);
              });
              form.submit();
          });
  });
</script>
{%endblock%}