1 files changed, 47 insertions, 25 deletions
diff --git a/uploader/templates/populations/macro-select-population.html b/uploader/templates/populations/macro-select-population.html
index af4fd3a..14b0510 100644
--- a/uploader/templates/populations/macro-select-population.html
+++ b/uploader/templates/populations/macro-select-population.html
@@ -1,30 +1,52 @@
-{%macro select_population_form(form_action, populations)%}
-<form method="GET" action="{{form_action}}">
-  <legend>Select Population</legend>
-
-  <div class="form-group">
-    <label for="select-population" class="form-label">Select Population</label>
-    <select id="select-population"
-            name="population_id"
-            class="form-control"
-            required="required">
-      <option value="">Select Population</option>
-      {%for family in populations%}
-      <optgroup {%if family[0][1] is not none%}
-                label="{{family[0][1]}}"
-                {%else%}
-                label="Undefined"
-                {%endif%}>
-        {%for population in family[1]%}
-        <option value="{{population.Id}}">{{population.FullName}}</option>
-        {%endfor%}
-      </optgroup>
-      {%endfor%}
-    </select>
+{%from "macro-step-indicator.html" import step_indicator%}
+
+{%macro select_population_form(form_action, species, populations)%}
+<form method="GET" action="{{form_action}}" class="form-horizontal">
+
+  <h2>{{step_indicator("2")}} What population do you want to work with?</h2>
+
+  {%if populations | length != 0%}
+
+  <p class="form-text">Search for, and select the population from the table
+    below and click "Continue"</p>
+
+  <div class="radio">
+    <label class="control-label" for="rdo-cant-find-population">
+      <input type="radio" id="rdo-cant-find-population"
+             name="population_id" value="CREATE-POPULATION" />
+      I cannot find the population I want &mdash; create it!
+    </label>
+  </div>
+
+  <div class="col-sm-offset-10 col-sm-2">
+    <input type="submit" value="continue" class="btn btn-primary" />
+  </div>
+
+  <div style="margin-top:3em;">
+    <table id="tbl-select-population" class="table compact stripe"
+           data-populations-list='{{populations | tojson}}'>
+      <thead>
+        <tr>
+          <th></th>
+          <th>Population</th>
+        </tr>
+      </thead>
+
+      <tbody></tbody>
+    </table>
   </div>
 
-  <div class="form-group">
-    <input type="submit" value="Select" class="btn btn-primary" />
+  {%else%}
+  <p class="form-text">
+    There are no populations currently defined for {{species['FullName']}}
+    ({{species['SpeciesName']}}).<br />
+    Click "Continue" to create the first!</p>
+  <input type="hidden" name="population_id" value="CREATE-POPULATION" />
+
+  <div class="col-sm-offset-10 col-sm-2">
+    <input type="submit" value="continue" class="btn btn-primary" />
   </div>
+  {%endif%}
+
 </form>
 {%endmacro%}