Select from searchable list and allow new species creation.

Select the species to use from a searchable list. In case the species
does not exist in the list, allow creation of the list.

1 files changed, 24 insertions, 30 deletions

diff --git a/uploader/templates/species/macro-select-species.html b/uploader/templates/species/macro-select-species.html
index 36ed102..21a5631 100644
--- a/uploader/templates/species/macro-select-species.html
+++ b/uploader/templates/species/macro-select-species.html
@@ -1,38 +1,32 @@
 {%macro select_species_form(form_action, species)%}
-{%if species | length > 0%}
 <form method="GET" action="{{form_action}}" class="form-horizontal">
+  <label class="control-label">What species do you want to work with?</label>
+  {%if species | length != 0%}
+  <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>
+  {%endif%}
+
   <div class="form-group">
-    <label for="select-species" class="control-label col-sm-2">Species</label>
-    <div class="col-sm-10">
-      <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>
+    <label class="control-label" for="rdo-cant-find-species">
+      <input id="rdo-cant-find-species" type="radio" name="species_id" value="CREATE-SPECIES" />
+      I cannot find the species I want &mdash; create it!</label>
   </div>
 
-  <div class="col-sm-offset-2 col-sm-10">
-    <input type="submit" value="Select" class="btn btn-primary" />
+  <div class="form-group">
+    <input type="submit"
+           class="btn btn-primary col-sm-offset-1"
+           value="continue" />
   </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%}