Impelment a confirmation delete modal dialog for Delete button

app/components/contacts/contact-row.js

@@ -6,6 +6,10 @@ export default Ember.Component.extend({
 
   actions: {
     deleteItem() {
+      this.$('.modal').modal();
+    },
+
+    deleteConfirmed() {
       var item = this.get('item');
       item.destroyRecord();
     }

app/components/modal-dialog.js

@@ -0,0 +1,17 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+
+  tagName: 'div',
+  classNames: ['modal', 'fade'],
+
+  title: 'Default title',
+  cancelButtonLabel: 'Cancel',
+  primerButtonLabel: 'Save',
+
+  actions: {
+    primerButtonClicked() {
+      this.sendAction();
+    }
+  }
+});

app/templates/components/contacts/contact-row.hbs

@@ -5,3 +5,7 @@
 <td>
     <button class="btn btn-xs btn-danger" {{action "deleteItem"}}>Delete</button>
 </td>
+
+{{#modal-dialog action="deleteConfirmed" title="Confirmation" primerButtonLabel="Delete"}}
+    <p>Are you really sure?</p>
+{{/modal-dialog}}

app/templates/components/modal-dialog.hbs

@@ -0,0 +1,15 @@
+<div class="modal-dialog">
+    <div class="modal-content">
+        <div class="modal-header">
+            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span></button>
+            <h4 class="modal-title">{{title}}</h4>
+        </div>
+        <div class="modal-body">
+            {{yield}}
+        </div>
+        <div class="modal-footer">
+            <button type="button" class="btn btn-default" data-dismiss="modal">{{cancelButtonLabel}}</button>
+            <button type="button" class="btn btn-primary" data-dismiss="modal" {{action 'primerButtonClicked'}}>{{primerButtonLabel}}</button>
+        </div>
+    </div>
+</div>