Switch to side-by-side view

--- a
+++ b/qiita_pet/templates/select_commands.html
@@ -0,0 +1,91 @@
+{% extends sitebase.html %}
+{% autoescape None %}
+
+{%block head%}
+
+<script>
+  function check_selection(){
+    if($('.command:checkbox:checked').length > 0){
+       return true;
+   }else {
+        $('#error').text('Please select at least one command.');
+       return false;
+   }
+  }
+
+  $(function () {
+    $('#data-types-tabs a:first').tab('show')
+  })
+</script>
+{%end%}
+
+{%block content %}
+
+<h1>Select Commands</h1>
+<span id="error" style="color:red"></span>
+<form role="form" action="{% raw qiita_config.portal_dir %}/analysis/wait/{{aid}}" method="post" onsubmit="return check_selection()">
+
+<div>
+<table class="table">
+  <tr>
+    <td style="width:100px;">
+      Rarefaction Depth: <input type="number" min="10" id="rarefaction-depth" name="rarefaction-depth" class="form-control" style="width:10em;">
+    </td>
+    <td style="width:10px;">&nbsp;</td>
+    <td style="text-align:left;vertical-align:middle;">
+      <table>
+        <tr>
+          <td style="width:20px;">
+            <input type="checkbox" id="merge-duplicated-sample-ids" name="merge-duplicated-sample-ids" class="form-control">
+          </td>
+          <td>
+            <label style="font-weight:normal;" for="merge-duplicated-sample-ids">Merge same sample ids</label>
+          </td>
+        </tr>
+        <tr>
+          <td colspan="2">
+            <small>
+              Merging sample ids is useful for when you have the same sample in different preparations of the
+              same data, i.e. a sample processed twice in 16S. When the samples are not merged, they are prefixed
+              with the artifact id.
+            </small>
+          </td>
+        </tr>
+      </table>
+    </td>
+  </tr>
+</table>
+
+</div>
+
+<ul class="nav nav-tabs" id="data-types-tabs">
+  {% for data_type in data_types %}
+    <li><a href="#{{ data_type }}" data-toggle="tab">{{ data_type }}</a></li>
+  {% end %}
+</ul>
+
+<div class="tab-content">
+{% for data_type in data_types %}
+  <div class="tab-pane" id="{{ data_type }}">
+        <table class="table">
+          <tr>
+            <th style="width:20px;"></th>
+            <th>Command</th>
+          </tr>
+          {% for command in commands[data_type] %}
+            <tr>
+              <td style="width:20px;">
+                <input id="{{data_type}}#{{command.name}}" type="checkbox" name="commands" class="command" value="{{data_type}}#{{command.name}}">
+              </td>
+              <td>
+                <label style="font-weight:normal;" for="{{data_type}}#{{command.name}}">{{command.name}}</label>
+              </td>
+            </tr>
+          {% end %}
+        </table>
+  </div>
+{% end %}
+</div>
+  <button type="submit" class="btn btn-default">Start Processing</button>
+</form>
+{% end %}