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

{%block title%}Create Species{%endblock%}

{%block pagetitle%}Create Species{%endblock%}

{%block lvl2_breadcrumbs%}
<li {%if activelink=="create-species"%}
    class="breadcrumb-item active"
    {%else%}
    class="breadcrumb-item"
    {%endif%}>
  <a href="{{url_for('species.create_species')}}">Create</a>
</li>
{%endblock%}

{%block contents%}
<div class="row">
  <form id="frm-create-species"
        method="POST"
        action="{{url_for('species.create_species', return_to=return_to)}}"
        class="form-horizontal">
    <legend>Create Species</legend>

    {{flash_all_messages()}}

    <input type="hidden" name="return_to" value="{{return_to}}">

    <div class="form-group">
      <label for="txt-taxonomy-id" class="control-label col-sm-2">
        Taxonomy ID</label>
      <div class="col-sm-10">
        <div class="input-group">
          <input id="txt-taxonomy-id"
                 name="species_taxonomy_id"
                 type="text"
                 class="form-control" />
          <span class="input-group-btn">
            <button id="btn-search-taxonid" class="btn btn-info">Search</button>
          </span>
        </div>
        <small class="form-text text-small text-muted">
          Use
          <a href="https://www.ncbi.nlm.nih.gov/Taxonomy/taxonomyhome.html/"
             title="NCBI's Taxonomy Browser homepage"
             target="_blank">
            NCBI's Taxonomy Browser homepage</a> to search for the species you
          want. If the species exists on NCBI, they will have a Taxonomy ID. Copy
          that Taxonomy ID to this field, and click "Search" to auto-fill the
          details.<br />
          This field is optional.</small>
      </div>
    </div>

    <div class="form-group">
      <label for="txt-species-name" class="control-label col-sm-2">Common Name</label>
      <div class="col-sm-10">
        <input id="txt-species-name"
               name="common_name"
               type="text"
               class="form-control"
               required="required" />
        <small class="form-text text-muted">This is the day-to-day term used by
          laymen, e.g. Mouse (instead of Mus musculus), round worm (instead of
          Ascaris lumbricoides), etc.<br />
          For species without this, just enter the scientific name.
        </small>
      </div>
    </div>

    <div class="form-group">
      <label for="txt-species-scientific" class="control-label col-sm-2">
        Scientific Name</label>
      <div class="col-sm-10">
        <input id="txt-species-scientific"
               name="scientific_name"
               type="text"
               class="form-control"
               required="required" />
        <small class="form-text text-muted">This is the scientific name for the
          species e.g. Homo sapiens, Mus musculus, etc.</small>
      </div>
    </div>

    <div class="form-group">
      <label for="select-species-family" class="control-label col-sm-2">Family</label>
      <div class="col-sm-10">
        <select id="select-species-family"
                name="species_family"
                required="required"
                class="form-control">
          <option value="ungrouped">I do not know what to pick</option>
          {%for family in families%}
          <option value="{{family}}">{{family}}</option>
          {%endfor%}
        </select>
        <small class="form-text text-muted">
          This is a rough grouping of the species.</small>
      </div>
    </div>

    <div class="col-sm-offset-2 col-sm-10">
      <input type="submit"
             value="create new species"
             class="btn btn-primary" />
    </div>

  </form>
</div>
{%endblock%}

{%block javascript%}
<script>
  var lastTaxonId = null;

  var fetch_taxonomy = (taxonId) => {
      var uri = (
          "https://rest.uniprot.org/taxonomy/" + encodeURIComponent(taxonId));
      $.get(
          uri,
          {},
          (data, textStatus, jqXHR) => {
              if(textStatus == "success") {
                  lastTaxonId = taxonId;
                  $("#txt-species-scientific").val(data.scientificName);
                  $("#txt-species-name").val(data.commonName);
                  return false;
              }
              msg = (
                  "Request to '${uri}' failed with message '${textStatus}'. "
                      + "Please try again later, or fill the details manually.");
              alert(msg);
              console.error(msg, data, textStatus);
              return false;
          },
          "json");
  };

  $("#btn-search-taxonid").on("click", (event) => {
      event.preventDefault();
      taxonId = $("#txt-taxonomy-id").val();
      if((taxonId !== "") && (taxonId !== lastTaxonId)) {
          fetch_taxonomy(taxonId);
      }
  });
</script>
{%endblock%}