Clean up delete button and tests

Fixes #59

app/mirage/config.js

@@ -19,11 +19,13 @@ export function testConfig() {
   this.post('/species');
   this.get('/species/:id');
   this.put('/species/:id');
+  this.delete('/species/:id');
 
   this.get('/characteristics');
   this.post('/characteristics');
   this.get('/characteristics/:id');
   this.put('/characteristics/:id');
+  this.delete('/characteristics/:id');
 
   this.get('/strains', function(db /*, request*/) {
     return {
@@ -39,4 +41,5 @@ export function testConfig() {
     };
   });
   this.put('/strains/:id');
+  this.delete('/strains/:id');
 }

app/pods/components/delete-button/component.js

@@ -1,16 +1,23 @@
 import Ember from 'ember';
 
-export default Ember.Component.extend({
-  tagName: 'button',
-  classNames: ["button-red", "smaller", "delete"],
+const { Component } = Ember;
+
+export default Component.extend({
+  tagName: 'span',
   showConfirmDelete: false,
 
-  click: function() {
-    if (!this.get('showConfirmDelete')) {
+  actions: {
+    initialClick: function() {
       this.set('showConfirmDelete', true);
-    } else {
+    },
+
+    cancelDelete: function() {
+      this.set('showConfirmDelete', false);
+    },
+
+    confirmDelete: function() {
       this.attrs.delete();
-    }
+    },
   },
 
 });

app/pods/components/delete-button/template.hbs

@@ -1,5 +1,12 @@
-{{#if showConfirmDelete}}
-  Are you sure?
+{{#unless showConfirmDelete}}
+  <button class="button-red smaller delete" {{action "initialClick"}}>
+    Delete
+  </button>
 {{else}}
-  Delete
-{{/if}}
+  <button class="button-red smaller delete-confirm" {{action "confirmDelete"}}>
+    Confirm Delete
+  </button>
+  <button class="button-gray smaller delete-cancel" {{action "cancelDelete"}}>
+    Cancel Delete
+  </button>
+{{/unless}}