{%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" />
    </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" />
    </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>
    </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}}"
             class="form-control" />
    </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}}"
             class="form-control" />
    </div>

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

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

{%block sidebarcontents%}
<p>&hellip; provide details on FamilyOrderId here &hellip;</p>
<p>&hellip; provide details on OrderId here &hellip;</p>
{%endblock%}