{%extends "species/base.html"%}
{%from "flash_messages.html" import flash_all_messages%}
{%from "macro-forms.html" import add_http_feature_flags%}
{%from "macro-step-indicator.html" import step_indicator%}
{%from "species/macro-display-species-card.html" import display_sui_species_card%}

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

{%macro add_form_buttons()%}
<div class="row form-buttons">
  <div class="col">
    <input type="submit"
           value="use selected population"
           class="btn btn-primary" />
  </div>

  <div class="col">
    <a href="{{url_for('species.populations.create_population',
             species_id=species.SpeciesId,
             return_to='species.view_species')}}"
       title="Create a new population for species '{{species.Name}}'."
       class="btn btn-outline-info">
      Create a new population
    </a>
  </div>
</div>
{%endmacro%}


{%block contents%}
<div class="row">
  <h2 class="heading">{{species.FullName}} ({{species.Name}})</h2>
</div>

<div class "row">
  <ul class="nav nav-tabs" id="species-actions">
    <li class="nav-item presentation">
      <button class="nav-link active"
              id="populations-tab"
              data-bs-toggle="tab"
              data-bs-target="#populations-content"
              type="button"
              role="tab"
              aria-controls="populations-content"
              aria-selected="true">Populations</button>
    </li>
    <li class="nav-item presentation">
      <button class="nav-link"
              id="sequencing-platforms-tab"
              data-bs-toggle="tab"
              data-bs-target="#sequencing-platforms-content"
              type="button"
              role="tab"
              aria-controls="sequencing-platforms-content"
              aria-selected="true">Sequencing Platforms</button>
    </li>
  </ul>
</div>

<div class="row">
  <div class="tab-content" id="species-tabs-content">
    <div class="tab-pane fade show active"
         id="populations-content"
         role="tabpanel"
         aria-labelledby="populations-content-tab">
      <p>Data belonging to a particular species is further divided into one or more
        populations for easier handling. Please select the population you want to work
        with.</p>

      <form method="GET"
            action="{{url_for('species.view_species', species_id=species.SpeciesId)}}"
            class="form-horizontal">
        {{add_http_feature_flags()}}
        {{add_form_buttons()}}

        {%if populations | length != 0%}
        <div style="margin-top:0.3em;">
          <table id="tbl-select-population" class="table compact stripe"
                 data-populations-list='{{populations | tojson}}'>
            <thead>
              <tr>
                <th></th>
                <th>Population</th>
              </tr>
            </thead>

            <tbody></tbody>
          </table>
        </div>

        {%else%}
        <p class="form-text">
          There are no populations currently defined for {{species['FullName']}}
          ({{species['SpeciesName']}}).</p>
        {%endif%}

        {{add_form_buttons()}}

      </form>
    </div>
    <div class="tab-pane fade"
         id="sequencing-platforms-content"
         role="tabpanel"
         aria-labelledby="sequencing-platforms-content-tab">
      <p>Upload and manage the sequencing platforms for species
        '{{species.Name | title}} ({{species.FullName}})'
        <a href="{{url_for('species.platforms.list_platforms',
                 species_id=species.SpeciesId)}}"
           title="Manage sequencing platforms for {{species.Name}}">here</a>.
      </p>
    </div>
  </div>
</div>
{%endblock%}

{%block sidebarcontents%}
<div class="row">
  <p>You can manage species' populations and sequencing platforms here. Select
    the tab for the feature you wish to continue working on.</p>
</div>
{{display_sui_species_card(species)}}
{%endblock%}


{%block javascript%}
<script type="text/javascript" src="/static/js/populations.js"></script>
{%endblock%}