@@ -12,6 +12,7 @@ vm.id = m.prop(m.route.param("id"));
     vm.action = m.route.param("action");
     vm.readOnly = true;
     vm.contentType = m.prop("");
+    vm.updatedTags = m.prop("");
     try {
       vm.ext = vm.id().match(/\.(.+)$/)[1];
     } catch(e) {
@@ -31,7 +32,7 @@ m.route("/guide/"+vm.id().replace(/\.md$/, "").replace(new Regexp("^"+vm.dir+"\/md\/"), ""));
       } else {
         m.route("/document/view/"+vm.id());
       }
-    }
+    };
     vm.tags = [];
     switch (vm.action) {
       case 'create':
@@ -46,6 +47,21 @@ case 'view':
         vm.getDoc();
         break;
     }
+    vm.editTagsDialogCfg = {
+      title: "Edit Tags",
+      id: "edit-tags-modal",
+      action: function(){
+        // TODO
+        console.log(vm.updatedTags());
+      },
+      actionText: "Update",
+      content: m("input", {
+            type: "text", 
+            class:"form-control", 
+            onchange: m.withAttr("value", vm.updatedTags),
+            placeholder: "Enter comma-separated tags..."
+          })
+    };
     vm.edit = function(){
       vm.editor.setReadOnly(false);
       vm.action = "edit";
@@ -97,10 +113,15 @@ vm.tools = function(){
       if (app.system.read_only) {
         return [];
       }
+      // Configure edit tags popover
+      var cfg = {};
+      cfg.title = "Edit Tags";
+      cfg.contentId = "#edit-tags-popover";
       switch (vm.action){
         case "view":
           return [
-            {title: "Edit", icon: "edit", action: vm.edit},
+            {title: "Edit Content", icon: "edit", action: vm.edit},
+            {title: "Edit Tags", icon: "tags", action: function(){$("#edit-tags-modal").modal()}},
             {title: "Delete", icon: "trash", action: vm.delete}
           ];
         default:
@@ -134,6 +155,7 @@ })]);
     }
     var title = m("span",[titleLeft, titleRight]);
     return m("div", [
+      u.modal(vm.editTagsDialogCfg),
       m(".row", [u.toolbar({links: vm.tools()})]),
       m(".row", [u.panel({title: title, content:app.editor.view(vm)})])
     ]);

@@ -34,7 +34,7 @@ var links = [
         m("li", {class: vm.activelink("info")}, [m("a", {href: "/info", config: m.route}, 
             [m("i.fa.fa-info-circle"), " Info"])]),
         u.dropdown({title: "Guide", icon:"fa-book", links: vm.guidelinks, active: vm.activelink("guide")}),
-        u.dropdown({title: "Tags", icon:"fa-tag", links: vm.taglinks(app.system), active: vm.activelink("tags")})];
+        u.dropdown({title: "Tags", icon:"fa-tags", links: vm.taglinks(app.system), active: vm.activelink("tags")})];
       if (!app.system.read_only) {
         links.push(m("li", 
           {class: vm.activelink("new")}, [m("a", {href: "/document/create/", config: m.route}, 

@@ -189,7 +189,7 @@ };
 
   u.toolbar = function(obj){
     return m("nav.toolbar.btn-group[role='group'][aria-label='...'].pull-right", obj.links.map(function(l){
-      return m("a.btn.btn-default", {onclick:l.action}, [m("i.fa.fa-"+l.icon), " "+l.title]);
+      return m("a.btn.btn-default", {onclick:l.action, config: l.config}, [m("i.fa.fa-"+l.icon), " "+l.title]);
       })  
     );
   };
@@ -202,6 +202,45 @@ LS.flash().content]);
     } else {
       return "";
     }
+  };
+  
+  /**
+   * obj:
+   * - id
+   */
+  u.showModal = function(id){
+    return function(el, isInitialized){
+      $(id).modal();
+    };
+  };
+  
+  /**
+   * obj:
+   * - id
+   * - content
+   * - title
+   * - action
+   * - actionText
+   */
+  u.modal = function(obj) {
+    return m(".modal.fade", 
+      {id: obj.id, tabindex: "-1", role: "dialog"},
+      [
+        m(".modal-dialog", [
+          m(".modal-content", [
+            m(".modal-header", [
+              m("button", {type: "button", class: "close", "data-dismiss": "modal"}, 
+              [m.trust("×")]),
+              m("h4.modal-title", obj.title)
+            ]),
+            m(".modal-body", [obj.content]),
+            m(".modal-footer", [
+              m("button.btn.btn-default[data-dismiss='modal']", "Close"),
+              m("button.btn.btn-default[data-dismiss='modal']", {onclick: obj.action}, obj.actionText)
+            ])
+          ])
+        ])
+      ]);
   };
 
   u.setContentType = function(doc, contentType){

@@ -145,4 +145,9 @@ margin: 5px 0;
 }
 .search-result {
   margin: 5px 0;
-}+}
+
+.popover {
+  max-width: 800px;
+  width: auto;
+}

@@ -1887,6 +1887,10 @@ }
 .search-result {
   margin: 5px 0;
 }
+.popover {
+  max-width: 800px;
+  width: auto;
+}
 .note {
   -moz-background-clip: padding;
   -webkit-background-clip: padding-box;
@@ -2685,4 +2689,4 @@ font-weight: normal;
   font-size: 100%;
   color: #00cc33;
   content: "\f058" " ";
-}+}