{%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')}}">
    <legend>Create Species</legend>

    {{flash_all_messages()}}

    <div class="form-group">
      <label for="txt-taxonomy-id" class="form-label">
        Taxonomy ID</label>
      <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">Provide the taxonomy ID for
        your species that can be used to link to external sites like NCBI. Enter
        the taxonomy ID and click "Search" to auto-fill the form with data.
        <br />
        While it is recommended to provide a value for this field, doing so is
        optional.
      </small>
    </div>

    <div class="form-group">
      <label for="txt-species-name" class="form-label">Common Name</label>
      <input id="txt-species-name"
             name="common_name"
             type="text"
             class="form-control"
             required="required" />
      <small class="form-text text-muted">Provide the common, possibly
        non-scientific name for the species here, e.g. Human, Mouse, etc.</small>
    </div>

    <div class="form-group">
      <label for="txt-species-scientific" class="form-label">
        Scientific Name</label>
      <input id="txt-species-scientific"
             name="scientific_name"
             type="text"
             class="form-control"
             required="required" />
      <small class="form-text text-muted">Provide the scientific name for the
        species you are creating, e.g. Homo sapiens, Mus musculus, etc.</small>
    </div>

    <div class="form-group">
      <label for="select-species-family" class="form-label">Family</label>
      <select id="select-species-family"
              name="species_family"
              required="required"
              class="form-control">
        <option value="">Please select a grouping</option>
        {%for family in families%}
        <option value="{{family}}">{{family}}</option>
        {%endfor%}
      </select>
      <small class="form-text text-muted">
        This is a generic grouping for the species that determines under which
        grouping the species appears in the GeneNetwork menus</small>
    </div>

    <div class="form-group">
      <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%}