{%extends "phenotypes/sui-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 contents%}
{{super()}}
{{flash_all_messages()}}

<div class="row">
  <form id="frm-add-phenotypes"
        method="POST"
        enctype="multipart/form-data"
        action="{{url_for('species.populations.phenotypes.add_phenotypes',
                species_id=species.SpeciesId,
                population_id=population.Id,
                dataset_id=dataset.Id,
                use_bundle=use_bundle)}}"
        data-resumable-target="{{url_for('files.resumable_upload_post')}}">
    <legend>Add New Phenotypes</legend>

    <div class="form-text help-block">
      {%block frm_add_phenotypes_documentation%}{%endblock%}
      <p><strong class="text-warning">This will not update any existing phenotypes!</strong></p>
    </div>

    {%block frm_add_phenotypes_elements%}{%endblock%}

    <fieldset id="fldset-publication-info">
      <legend>Publication Information</legend>
      <input type="hidden" name="publication-id" id="txt-publication-id" />
      <span class="form-text text-muted">
        Select a publication for your data. <br />
        Can't find a publication you can use? Go ahead and
        <a href="{{url_for(
                 'publications.create_publication',
                 return_to='species.populations.phenotypes.add_phenotypes',
                 species_id=species.SpeciesId,
                 population_id=population.Id,
                 dataset_id=dataset.Id)}}">create a new publication</a>.</span>
      <table id="tbl-select-publication" class="table compact stripe">
        <thead>
          <tr>
            <th>#</th>
            <th>PubMed ID</th>
            <th>Title</th>
            <th>Authors</th>
          </tr>
        </thead>

        <tbody></tbody>
      </table>
    </fieldset>

    <div class="form-group">
      <input type="submit"
             value="upload phenotypes"
             class="btn btn-primary" />
    </div>
  </form>
</div>

<div class="row">
  {%block page_documentation%}{%endblock%}
</div>

{%endblock%}




{%block javascript%}
<script type="text/javascript">
  $(function() {
      var publicationsDataTable = buildDataTable(
          "#tbl-select-publication",
          [],
          [
              {data: "index"},
              {
                  searchable: true,
                  data: (pub) => {
                      if(pub.PubMed_ID) {
                          return `<a href="https://pubmed.ncbi.nlm.nih.gov/` +
                              `${pub.PubMed_ID}/" target="_blank" ` +
                              `title="Link to publication on NCBI.">` +
                              `${pub.PubMed_ID}</a>`;
                      }
                      return "";
                  }
              },
              {
                  searchable: true,
                  data: (pub) => {
                      var title = "⸻";
                      if(pub.Title) {
                          title = pub.Title
                      }
                      return `<a href="/publications/view/${pub.Id}" ` +
                          `target="_blank" ` +
                          `title="Link to view publication details">` +
                          `${title}</a>`;
                  }
              },
              {
                  searchable: true,
                  data: (pub) => {
                      authors = pub.Authors.split(",").map(
                          (item) => {return item.trim();});
                      if(authors.length > 1) {
                          return authors[0] + ", et. al.";
                      }
                      return authors[0];
                  }
              }
          ],
          {
              serverSide: true,
              ajax: {
                  url: "/publications/list",
                  dataSrc: "publications"
              },
              select: "single",
              paging: true,
              scrollY: 700,
              deferRender: true,
              scroller: true,
              scrollCollapse: true,
              layout: {
                  topStart: "info",
                  topEnd: "search"
              }
          });
      publicationsDataTable.on("select", (event, datatable, type, indexes) => {
          indexes.forEach((element, index, thearray) => {
              let row = datatable.row(element).node();
              console.debug(datatable.row(element).data());
              $("#frm-add-phenotypes #txt-publication-id").val(
                  datatable.row(element).data().Id);
          });
      });
      publicationsDataTable.on("deselect", (event, datatable, type, indexes) => {
          indexes.forEach((element, index, thearray) => {
              let row = datatable.row(element).node();
              $("#frm-add-phenotypes #txt-publication-id").val(null);
          });
      });
  });
</script>

{%block more_javascript%}{%endblock%}
{%endblock%}