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

{%block title%}Edit Species{%endblock%}

{%block pagetitle%}Edit Species{%endblock%}

{%block css%}
<style type="text/css">
  .card {
      margin-top: 0.3em;
      border-width: 1px;
      border-style: solid;
      border-radius: 0.3em;
      border-color: #AAAAAA;
      padding: 0.5em;
  }
</style>
{%endblock%}

{%block lvl2_breadcrumbs%}
<li {%if activelink=="edit-species"%}
    class="breadcrumb-item active"
    {%else%}
    class="breadcrumb-item"
    {%endif%}>
  <a href="{{url_for('species.edit_species_extra',
           species_id=species.SpeciesId)}}">Edit</a>
</li>
{%endblock%}

{%block contents%}
{{flash_all_messages()}}
<div class="row">
  <form id="frm-edit-species"
        method="POST"
        action="{{url_for('species.edit_species_extra',
                species_id=species.SpeciesId)}}">

    <legend>Edit Extra Detail for Species '{{species.FullName}}'</legend>

    <input type="hidden" name="species_id" value="{{species.SpeciesId}}" />

    <div class="form-group">
      <label for="lbl-species-taxonid" class="form-label">
        Taxonomy Id
      </label>
      <label id="lbl-species-taxonid"
             disabled="disabled"
             class="form-control">{{species.TaxonomyId}}</label>
    </div>

    <div class="form-group">
      <label for="txt-species-name" class="form-label">
        Common Name
      </label>
      <input type="text"
             id="txt-species-name"
             name="species_name"
             required="required"
             value="{{species.SpeciesName}}"
             class="form-control" />
      <small class="form-text text-muted">
        This is the layman's name for the species, e.g. mouse</mall>
    </div>

    <div class="form-group">
      <label for="txt-species-fullname" class="form-label">
        Scientific Name
      </label>
      <input type="text"
             id="txt-species-fullname"
             name="species_fullname"
             required="required"
             value="{{species.FullName}}"
             class="form-control" />
      <small class="form-text text-muted">
        A scientific name for the species that mostly adheres to the biological
        binomial nomenclature system.</small>
    </div>

    <div class="form-group">
      <label for="select-species-family" class="form-label">
        Family
      </label>
      <select id="select-species-family"
              name="species_family"
              class="form-control">
        <option value="">Select the family</option>
        {%for family in families%}
        <option value="{{family}}"
                {%if species.Family == family%}
                selected="selected"
                {%endif%}>{{family}}</option>
        {%endfor%}
      </select>
      <small class="form-text text-muted">
        A general classification for the species. This is mostly for use in
        GeneNetwork's menus.</small>
    </div>

    <div class="form-group">
      <label for="txt-species-familyorderid" class="form-label">
        Family Order Id
      </label>
      <input type="number"
             id="txt-species-familyorderid"
             name="species_familyorderid"
             value="{{species.FamilyOrderId}}"
             required="required"
             class="form-control" />
      <small class="form-text text-muted">
        This is a number that determines the order of the "Family" groupings
        above in the GeneNetwork menus. This is an integer value that's manually
        assigned.</small>
    </div>

    <div class="form-group">
      <label for="txt-species-orderid" class="form-label">
        Order Id
      </label>
      <input type="number"
             id="txt-species-orderid"
             name="species_orderid"
             value="{{species.OrderId or (max_order_id + 5)}}"
             class="form-control" />
      <small class="form-text text-muted">
        This integer value determines the order of the species in relation to
        each other, but also within the respective "Family" groups.</small>
    </div>

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

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

{%block sidebarcontents%}

<div class="card">
  <div class="card-body">
    <h5 class="card-title">Family Order</h5>
    <div class="card-text">
      <p>The current family order is as follows</p>
      <table class="table">
        <thead>
          <tr>
            <th>Family Order Id</th>
            <th>Family</th>
          </tr>
        </thead>
        <tbody>
          {%for item in family_order%}
          <tr>
            <td>{{item[0]}}</td>
            <td>{{item[1]}}</td>
          </tr>
          {%endfor%}
        </tbody>
      </table>
    </div>
  </div>
</div>

<div class="card">
  <div class="card-body">
    <h5 class="card-title">Order ID</h5>
    <div class="card-text">
      <p>The current largest OrderID is: {{max_order_id}}</p>
      <p>We recommend giving a new species an order ID that is five more than
        the current highest i.e. {{max_order_id + 5}}.</p>
    </div>
  </div>
</div>
{%endblock%}