WIP

app/components/filter-collections.js

@@ -1,5 +1,5 @@
 import Ember from 'ember';
 
 export default Ember.Component.extend({
-  classNames: ['row'],
+  tagName: 'form',
 });

app/router.js

@@ -9,7 +9,9 @@ const Router = Ember.Router.extend({
 Router.map(function() {
   this.route('login');
   this.route('logout');
-  this.route('collections');
+  this.route('collections', function() {
+    this.route('1');
+  });
 });
 
 export default Router;

app/routes/collections/1.js

@@ -0,0 +1,4 @@
+import Ember from 'ember';
+
+export default Ember.Route.extend({
+});

app/styles/app.css

@@ -1,3 +1,14 @@
+.content {
+  padding-left: 40px;
+  padding-right: 40px;
+  padding-top: 20px;
+  padding-bottom: 20px;
+}
+
+.top-buffer {
+  padding-top: 20px;
+}
+
 .form-signin {
   max-width: 330px;
   padding: 15px;

app/templates/collections/1.hbs

@@ -0,0 +1,9 @@
+<h2>Collection Detail</h2>
+
+<div class="row">
+  <div class="panel panel-default col-md-4">
+    <div class="panel-body">
+      asf
+    </div>
+  </div>
+</div>

app/templates/components/filter-collections.hbs

@@ -1,10 +1,73 @@
-<div class='col-md-12'>
+<div class="well well-sm">
   <div class="row">
+
     <div class="col-md-3">
-      <select>
+      <label>Project</label>
+      <select class="form-control">
         <option selected=selected>Perchlorate</option>
-        <option>Saint Lawrence Island</option>
+        <option>Ship Creek</option>
+        <option>St. Lawrence Island</option>
       </select>
     </div>
+
+    <div class="col-md-3">
+      <label>Study Location</label>
+      <select class="form-control">
+        <option selected=selected>TL5</option>
+        <option>SQ12</option>
+        <option>CPISBV</option>
+      </select>
+    </div>
+
+    <div class="col-md-3">
+      <label>Method</label>
+      <select class="form-control">
+        <option selected=selected>Fyke Net</option>
+        <option>Seine</option>
+        <option>Minnow Trap</option>
+      </select>
+    </div>
+
+    <div class="col-md-3">
+      <label>Type</label>
+      <select class="form-control">
+        <option selected=selected>Adults</option>
+        <option>Embryos</option>
+      </select>
+    </div>
+
+  </div>
+
+  <div class="row top-buffer">
+
+    <div class="col-md-4">
+      <label># of Traps</label>
+      <input type="text" class="form-control" placeholder="3">
+    </div>
+
+    <div class="col-md-4">
+      <label>Start</label>
+      <input type="datetime" class="form-control">
+    </div>
+
+    <div class="col-md-4">
+      <label>End</label>
+      <input type="datetime" class="form-control">
+    </div>
+
+  </div>
+
+  <div class="row top-buffer">
+    <div class="col-md-12">
+      <div class="btn-group" role="group">
+        <button type="submit" class="btn btn-default">
+          Search
+        </button>
+        <button type="button" class="btn btn-default">
+          Reset
+        </button>
+
+      </div>
+    </div>
   </div>
 </div>

ember-cli-build.js

@@ -11,7 +11,6 @@ module.exports = function(defaults) {
   });
 
   app.import('bower_components/bootstrap/dist/css/bootstrap.min.css');
-  app.import('bower_components/bootstrap/dist/css/bootstrap-theme.min.css');
 
   return app.toTree();
 };

tests/unit/routes/collections/1-test.js

@@ -0,0 +1,11 @@
+import { moduleFor, test } from 'ember-qunit';
+
+moduleFor('route:collections/1', 'Unit | Route | collections/1', {
+  // Specify the other units that are required for this test.
+  // needs: ['controller:foo']
+});
+
+test('it exists', function(assert) {
+  let route = this.subject();
+  assert.ok(route);
+});