{%macro select_species_form(form_action, species)%}
{%if species | length > 0%}
<form method="GET" action="{{form_action}}">
  <legend>Select Species</legend>

  <div class="form-group">
    <label for="select-species" class="form-label">Select Species</label>
    <select id="select-species"
            name="species_id"
            class="form-control"
            required="required">
      <option value="">Select Species</option>
      {%for group in species%}
      {{group}}
      <optgroup {%if group[0][1] is not none%}
                label="{{group[0][1].capitalize()}}"
                {%else%}
                label="Undefined"
                {%endif%}>
        {%for aspecies in group[1]%}
        <option value="{{aspecies.SpeciesId}}">{{aspecies.MenuName}}</option>
        {%endfor%}
      </optgroup>
      {%endfor%}
    </select>
  </div>

  <div class="form-group">
    <input type="submit" value="Select" class="btn btn-primary" />
  </div>
</form>
{%else%}
<p class="text-danger">
  <span class="glyphicon glyphicon-exclamation-mark"></span>
  We could not find species to select from!
</p>
{%endif%}
{%endmacro%}