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

{%block title%}Genotypes{%endblock%}

{%block pagetitle%}Genotypes{%endblock%}

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


{%if dataset is defined and dataset is not none%}

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

  <div class="row">
    <div class="col">
      <p>
        <a href="{{url_for(
                 'species.populations.genotypes.add_genotype_records',
                 species_id=species.SpeciesId, population_id=population.Id,
                 dataset_id=dataset.Id)}}"
           class="btn btn-primary">
          Add genotype records
        </a>
      </p>
    </div>
  </div>

  <div class="table-responsive">
    <table id="tbl-genotype-records" class="table compact stripe cell-border">
      <thead>
        <tr>
          <th title="">#</th>
          <th title="">Index</th>
          <th title="Locus of marker on the chromosome">Locus</th>
          <th title="Chromosome">Chr</th>
          <th title="Physical location of marker in centimorgans">cM</th>
          <th title="Physical location of marker in megabasepairs">Mb</th>
          {%for sample in samples%}
          <th title="Data for sample {{sample}}">{{sample}}</th>
          {%endfor%}
        </tr>
      </thead>

      <tbody>
        {%for record in genotype_records%}
        <tr>
          <td>
            <input type="checkbox"
                   id="chk-geno-record-{{record.Id}}"
                   name="geno_record_id"
                   value="{{record.Id}}" />
          </td>
          <td>{{record.index}}</td>
          <td>{{record.Name}}</td>
          <td>{{record.Chr}}</td>
          <td>{{record.cM}}</td>
          <td>{{record.Mb}}</td>
          {%for sample in samples%}
          <td>{{record.data[sample]}}</td>
          {%endfor%}
        </tr>
        {%else%}
        <tr>
          <td colspan="6" class="text-info">
            There are no records
          </td>
        </tr>
        {%endfor%}
      </tbody>
    </table>
  </div>
</div>

<div class="row">
  <h2>Genotype Encoding</h2>
  <p>The numerical values in the table above are mapped from the following allele symbols:</p>

  <table class="table">
    <thead>
      <tr>
        <th>Allele Type</th>
        <th>Allele Symbol</th>
        <th>Mapped To</th>
      </tr>
    </thead>

    <tbody>
      {%for row in genocode%}
      <tr>
        <td {%if row.AlleleType == 'mat'%}
            title="Maternal allele"
            {%elif row.AlleleType == "pat"%}
            title="Paternal allele"
            {%elif row.AlleleType == "het"%}
            title="Heterozygous allele"
            {%else%}
            title="Unknown allele"
            {%endif%}>
          {{row.AlleleType}}</td>
        <td>{{row.AlleleSymbol}}</td>
        <td>{{row.DatabaseValue if row.DatabaseValue is not none}}</td>
      </tr>
      {%else%}
      <tr>
        <td colspan="3" class="text-info">
          There is no genotype encoding defined for this data.
        </td>
      </tr>
      {%endfor%}
    </tbody>
  </table>
</div>

{%else%}

<div class="row">
  <p>We need to create a dataset to hold the genotype information for this
    species/population, before we can proceed to upload the genotype data.</p>
  <p>Please click the button below to create the dataset.</p>

  <div class="col">
  <a href="{{url_for('species.populations.genotypes.create_dataset', species_id=species.SpeciesId, population_id=population.Id)}}"
     class="btn btn-primary">create genotype dataset</a>
  </div>
</div>

{%endif%}

{%endblock%}


{%block javascript%}
<script type="text/javascript">
  $(function() {
      var genoRecordsUrl = "{{url_for('species.populations.genotypes.index', species_id=species.SpeciesId, population_id=population.Id)}}";

      var dtGenotypeRecords = false;
      fetch(genoRecordsUrl, {
          method: "POST",
          headers: {
              "Accept": "application/json",
              "Content-Type": "application/json"
          },
          body: JSON.stringify({})
      })
          .then(response => response.json())
          .then(recordsData => {
              var records = recordsData.genotype_records;
              var samples = recordsData.samples_order;
              var columns = [
                  {
                      data: function(record) {
                          return `<input type="checkbox"`
                              + `id="chk-geno-record-` + record.Id + `"`
                              + `name="geno_record_id"`
                              + `value="` + record.Id + `"`
                              + ` />`;
                      }
                  },
                  {data: "index"},
                  {data: "Name"},
                  {data: "Chr"},
                  {data: "cM"},
                  {data: "Mb"}
              ].concat(samples.map((sample) => {
                  return {data: (record) => record.data[sample]};
              }));

              dtGenotypeRecords = buildDataTable(
                  "#tbl-genotype-records",
                  [],
                  columns,
                  {
                      serverSide: true,
                      ajax: {
                          url: genoRecordsUrl,
                          dataSrc: "genotype_records",
                          recordsTotal: "total_genotype_records",
                          recordsFiltered: "fetched_genotype_records"
                      },
                      paging: true,
                      scroller: true,
                      scrollY: "50vh",
                      scrollCollapse: false,
                      layout: {
                          top: "info",
                          topStart: null,
                          topEnd: null,
                          bottom: null,
                          bottomStart: null,
                          bottomEnd: null
                      }
                  });
          });
  });
</script>
{%endblock%}