{%extends "populations/base.html"%}
{%from "macro-step-indicator.html" import step_indicator%}
{%from "populations/macro-display-population-card.html" import display_sui_population_card%}

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

<div class="row">
  <ul class="nav nav-tabs" id="population-actions">
    <li class="nav-item presentation">
      <button class="nav-link"
              id="samples-tab"
              data-bs-toggle="tab"
              data-bs-target="#samples-content"
              type="button"
              role="tab"
              aria-controls="samples-content"
              aria-selected="true">Samples</button></li>
    <li class="nav-item presentation">
      <button class="nav-link active"
              id="phenotypes-tab"
              data-bs-toggle="tab"
              data-bs-target="#phenotypes-content"
              type="button"
              role="tab"
              aria-controls="phenotypes-content"
              aria-selected="false">Phenotypes</button></li>
    {%if view_under_construction%}
    <li class="nav-item presentation">
      <button class="nav-link"
              id="genotypes-tab"
              data-bs-toggle="tab"
              data-bs-target="#genotypes-content"
              type="button"
              role="tab"
              aria-controls="genotypes-content"
              aria-selected="false">Genotypes</button></li>
    <li class="nav-item presentation">
      <button class="nav-link"
              id="expression-data-tab"
              data-bs-toggle="tab"
              data-bs-target="#expression-data-content"
              type="button"
              role="tab"
              aria-controls="expression-data-content"
              aria-selected="false">Expression-Data</button></li>
    {%endif%}
  </ul>
</div>

<div class="row">
  <div class="tab-content" id="populations-tabs-content">
    <div class="tab-pane fade"
         id="samples-content"
         role="tabpanel"
         aria-labelledby="samples-content-tab">
      <p>Think of a <strong>"sample"</strong> as say a single case or individual
        in the experiment. It could even be a single strain (where applicable).
      </p>
      <p>This is a convenience feature for when you want to upload phenotypes to
        the system, but do not have the genotypes data ready yet.</p>
      <a href="{{url_for('species.populations.samples.list_samples',
               species_id=species.SpeciesId,
               population_id=population.Id)}}"
         title="View and upload samples for population '{{population['Name']}}'"
         class="btn btn-primary">Manage Samples</a>
    </div>

    <div class="tab-pane fade show active"
         id="phenotypes-content"
         role="tabpanel"
         aria-labelledby="phenotypes-content-tab">

      <div class="row" style="margin-top: 1em;">
        <h3> Phenotypes in  Population "{{population.FullName}} ({{population.Name}})"</h3>

        <p>To view existing phenotype traits, or upload new ones, click the button below:</p>

        <div class="row">
          <div class="col">
            <a href="{{url_for(
                     'species.populations.phenotypes.list_datasets',
                     species_id=species.SpeciesId,
                     population_id=population.Id)}}"
               title="View and upload phenotype traits"
               class="btn btn-primary">Phenotypes</a>
          </div>
        </div>
      </div>
    </div>

    <div class="tab-pane fade"
         id="genotypes-content"
         role="tabpanel"
         aria-labelledby="genotypes-content-tab">
      <p>Click the button to view and manage genetic data for individuals in
        this population.</p>
      <a href="{{url_for('species.populations.genotypes.list_genotypes',
               species_id=species.SpeciesId,
               population_id=population.Id)}}"
         title="Upload genotype information for the '{{population.FullName}}' population of the '{{species.FullName}}' species."
         class="btn btn-primary">manage genotypes</a>
    </div>
    <div class="tab-pane fade" id="expression-data-content" role="tabpanel" aria-labelledby="expression-data-content-tab">
      <p>Upload expression data (mRNA data) for this population.</p>
      <a href="#" title="" class="btn btn-primary">upload genotypes</a>
    </div>
  </div>
</div>
{%endblock%}

{%block sidebarcontents%}
<div class="row">
  <p>Each tab presents a feature that's available at the population level.
    Select the tab that allows you to continue with your task.</p>
</div>
{{super()}}
{%endblock%}




{%block javascript%}
{%endblock%}