{%extends "phenotypes/base.html"%}
{%from "flash_messages.html" import flash_all_messages%}
{%from "macro-table-pagination.html" import table_pagination%}
{%from "populations/macro-display-population-card.html" import display_population_card%}

{%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">
  <p>The basic dataset details are:</p>

  <table class="table">
    <thead>
      <tr>
        <th>Name</th>
        <th>Full Name</th>
        <th>Short Name</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>{{dataset.Name}}</td>
        <td>{{dataset.FullName}}</td>
        <td>{{dataset.ShortName}}</td>
      </tr>
    </tbody>
  </table>
</div>

<div class="row">
  <p><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></p>
</div>

<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>

  <table id="tbl-phenotypes-list" class="table compact stripe">
    <thead>
      <tr>
        <th></th>
        <th>Record</th>
        <th>Description</th>
      </tr>
    </thead>

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

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


{%block javascript%}
<script type="text/javascript">
  $(function() {
      var data = {{phenotypes | tojson}};
      $("#tbl-phenotypes-list").DataTable({
          responsive: true,
          lengthMenu: [10, 25, 50, 100, 1000, data.length],
          language: {
              processing: "Processing results… Please wait.",
              loadingRecord: "Loading phenotypes — Please wait.",
              info: "_START_ to _END_ of _TOTAL_ phenotypes",
              lengthMenu: "Show _MENU_ phenotypes",
          },
          data: data,
          columns: [
              {data: "sequence_number"},
              {
                  data: function(pheno) {
                      var spcs_id = {{species.SpeciesId}};
                      var pop_id = {{population.Id}};
                      var dtst_id = {{dataset.Id}};
                      return `<a href="/species/${spcs_id}` +
                          `/populations/${pop_id}` +
                          `/phenotypes/datasets/${dtst_id}` +
                          `/phenotype/${pheno.xref_id}` +
                          `" target="_blank">` +
                          `${pheno.InbredSetCode}_${pheno.xref_id}` +
                          `</a>`;
                  }
              },
              {data: function(pheno) {
                  return (pheno.Post_publication_description ||
                          pheno.Original_description ||
                          pheno.Pre_publication_description);
              }}
          ]
      });
  });
</script>
{%endblock%}