{%extends "sui-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%}

{%block title%}Home{%endblock%}

{%block pagetitle%}Home{%endblock%}

{%block extra_breadcrumbs%}{%endblock%}

{%block contents%}

{%macro add_form_buttons()%}
<div class="row form-buttons">
      <div class="col">
        <input type="submit"
               class="btn btn-primary"
               value="use selected species" />
      </div>
      <div class="col">
        <a href="{{url_for('species.create_species', return_to='base.index')}}"
           class="btn btn-outline-primary"
           title="Create a new species.">Create a new Species</a>
      </div>
</div>
{%endmacro%}

<div class="row">{{flash_all_messages()}}</div>

{%if user_logged_in()%}

<div class="row">
  <div class="row">
    <h2 class="heading">Species</h2>

    <p>Select the species you want to work with.</p>
  </div>
</div>

<div class="row">
  <form method="GET" action="{{url_for('base.index')}}" class="form-horizontal">
    {{add_http_feature_flags()}}

    {{add_form_buttons()}}

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

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

    {%else%}

    <label class="control-label" for="rdo-cant-find-species">
      <input id="rdo-cant-find-species" type="radio" name="species_id"
             value="CREATE-SPECIES" />
      There are no species to select from. Create the first one.</label>

    <div class="col-sm-offset-10 col-sm-2">
      <input type="submit"
             class="btn btn-primary col-sm-offset-1"
             value="continue" />
    </div>

    {%endif%}

    {{add_form_buttons()}}

  </form>
</div>

{%else%}

<div class="row">
  <p>The Genenetwork Uploader (<em>gn-uploader</em>) enables upload of new data
    into the Genenetwork System. It provides Quality Control over data, and
    guidance in case you data does not meet the standards for acceptance.</p>
  <p>
    <a href="{{authserver_authorise_uri()}}"
       title="Sign in to the system"
       class="btn btn-primary">Sign in</a>
    to get started.</p>
</div>
{%endif%}

{%endblock%}



{%block sidebarcontents%}
<div class="row">
  <p>The data in Genenetwork is related to one species or another. Use the form
    provided to select from existing species, or click on the
    "Create a New Species" button if you cannot find the species you want to
    work with.</p>
</div>
<div class="row">
  <form id="frm-quick-navigation">
    <legend>Quick Navigation</legend>
    <div class="form-group">
      <label for="fqn-species-id">Species</label>
      <select name="species_id">
        <option value="">Select species</option>
      </select>
    </div>
  </form>
</div>
{%endblock%}


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