added editor, not working yet though

app.coffee

@@ -27,8 +27,20 @@ if Meteor.isClient
   Template.notes.notes = ->
     notes.find().fetch()
   Template.notes.events {
-    'click .delete': ->
-      notes.remove @_id
+    'click .delete': -> notes.remove @_id
+    'click .edit': ->
+      Template.edit.note = this; console.log Template.edit.note
+      UI.render Template.edit
+  }
+
+  # Note Editor TODO: Make Reactive
+  Template.edit.show = ->
+    console.log Template.edit.note isnt undefined
+    Template.edit.note isnt undefined
+  Template.edit.note = undefined
+  Template.edit.events {
+    'click .close': -> Template.edit.note = undefined
+    'click .save': -> null
   }
 
   # Auth
@@ -36,8 +48,9 @@ if Meteor.isClient
   Template.auth.errCallback = (err) ->
     Template.auth.alert { msg: err.reason }
 
+  # TODO: make reactive
   Template.auth.alert = (add,remove) ->
-    if add then Template.auth.alerts.push add;
+    if add then Template.auth.alerts.push add
     if remove
       Template.auth.alerts.splice Template.auth.alerts.indexOf(remove), 1
     Template.auth.alerts

index.html

@@ -10,7 +10,7 @@
       </h1>
     </div>
     <div class="center-block" id="quicknotes">
-      {{> notes}} {{#if currentUser}}
+      {{> edit}} {{> notes}} {{#if currentUser}}
       <div align="center"> {{> userInfo}} </div>
       {{/if}}
       {{#unless currentUser}} <div align="center">{{> auth}}</div>{{/unless}}
@@ -22,10 +22,8 @@
   <ul class="list-group">
     {{#each notes}}
     <li class="note list-group-item">
+      <button type="button" class="edit close"><i class="fa fa-pencil-square-o"></i></button>
       {{content}}
-      <!--<button type="button" class="btn btn-danger pull-right delete">
-        <i class="fa fa-trash-o"></i>
-      </button>-->
       <button type="button" class="delete close">&times;</button>
     </li>
     {{/each}}
@@ -55,3 +53,19 @@
   <p>Logged in as {{in}}</p>
   <button type="button" id="logout" class="btn btn-danger">Logout</button>
 </template>
+
+<template name="edit">
+  {{#if note}}
+  <div class="panel panel-info">
+    <div class="panel-heading">
+      <h3 class="panel-title">
+        <input type="text" class="form-control title" placeholder="Title">
+        <button type="button" class="close">&times;</button>
+      </h3>
+    </div>
+    <div class="panel-body">
+      <textarea class="area form-control" rows="3">{{note.content}}</textarea>
+    </div>
+  </div>
+  {{/if}}
+</template>

style.css

@@ -1,6 +1,5 @@
 .page-header {
   text-align: center;
-  align: center;
 }
 
 input {
@@ -19,6 +18,19 @@ input {
   margin-top: -2px;
 }
 
+.close {
+  margin-right: 5px;
+}
+
+.edit {
+  clear: right;
+  float: left;
+}
+
+.area {
+  resize: none;
+}
+
 #newNote {
   max-width: 250px;
   margin-bottom: 10px;