1 files changed, 53 insertions, 32 deletions
diff --git a/uploader/templates/species/macro-select-species.html b/uploader/templates/species/macro-select-species.html
index 6955134..3714ae4 100644
--- a/uploader/templates/species/macro-select-species.html
+++ b/uploader/templates/species/macro-select-species.html
@@ -1,38 +1,59 @@
+{%from "macro-step-indicator.html" import step_indicator%}
+
 {%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">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>
+<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="form-group">
-    <input type="submit" value="Select" class="btn btn-primary" />
+  <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>
-{%else%}
-<p class="text-danger">
-  <span class="glyphicon glyphicon-exclamation-mark"></span>
-  We could not find species to select from!
-</p>
-{%endif%}
 {%endmacro%}