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

{%block title%}View Species{%endblock%}

{%block pagetitle%}View Species{%endblock%}

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

{%block contents%}
{{flash_all_messages()}}
<div class="row">
  <h2>Details on species {{species.FullName}}</h2>

  <dl>
    <dt>Common Name</dt>
    <dd>{{species.SpeciesName}}</dd>

    <dt>Scientific Name</dt>
    <dd>{{species.FullName}}</dd>

    <dt>Taxonomy ID</dt>
    <dd>{{species.TaxonomyId}}</dd>
  </dl>

  <h3>Actions</h3>

  <p>
    You can proceed to perform any of the following actions for species
    {{species.FullName}}
  </p>

  <ol>
    <li>
      <a href="{{url_for('species.populations.list_species_populations',
               species_id=species.SpeciesId)}}"
         title="Create/Edit populations for {{species.FullName}}">
        Manage populations</a>
    </li>
  </ol>

  
</div>
{%endblock%}

{%block sidebarcontents%}
<div class="card">
  <div class="card-body">
    <h5 class="card-title">Species Extras</h5>
    <div class="card-text">
      <p>Some extra internal-use details (mostly for UI concerns on GeneNetwork)</p>
      <p>
        <small>
          If you do not understand what the following are about, simply ignore them
          &mdash;
          They have no bearing whatsoever on your data, or its analysis.
        </small>
      </p>
      <dl>
        <dt>Family</dt>
        <dd>{{species.Family}}</dd>

        <dt>FamilyOrderId</dt>
        <dd>{{species.FamilyOrderId}}</dd>

        <dt>OrderId</dt>
        <dd>{{species.OrderId}}</dd>
      </dl>
    </div>
    <a href="{{url_for('species.edit_species_extra',
             species_id=species.SpeciesId)}}"
       class="card-link"
       title="Edit the species' internal-use details.">Edit</a>
  </div>
</div>
{%endblock%}