{%from "macro-step-indicator.html" import step_indicator%}

{%macro select_species_form(form_action, species)%}
<form method="GET" action="{{form_action}}" class="form-horizontal">

  <h2>{{step_indicator("1")}} What species do you want to work with?</h2>

  {%if species | length != 0%}

  <p class="form-text">Search for, and select the species from the table below
    and click "Continue"</p>

  <div class="radio">
    <label for="rdo-cant-find-species"
           style="font-weight: 1;">
      <input id="rdo-cant-find-species" type="radio" name="species_id"
             value="CREATE-SPECIES" />
      I could not find the species I want (create it).
    </label>
  </div>

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

  <div style="margin-top:3em;">
    <table id="tbl-select-species" class="table compact stripe"
           data-species-list='{{species | tojson}}'>
      <div class="">
        <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%}

</form>
{%endmacro%}