refactor dialog and pane templates

27 files changed, 686 insertions, 655 deletions

diff --git a/src/guff/handlers.cr b/src/guff/handlers.cr
index a44140a..2670f89 100644
--- a/src/guff/handlers.cr
+++ b/src/guff/handlers.cr
@@ -215,7 +215,7 @@ module Guff::Handlers
         context.response.headers["x-frame-options"] = "SAMEORIGIN"
         context.response.content_type = "text/html; charset=utf-8"
         context.response.status_code = 200
-        Views::Admin::PageView.new(@context).to_s(context.response)
+        Views::AdminPageView.new(@context).to_s(context.response)
       else
         call_next(context)
       end
diff --git a/src/guff/views/admin/page.cr b/src/guff/views/admin-page.cr
index fe37ce5..aaa5104 100644
--- a/src/guff/views/admin/page.cr
+++ b/src/guff/views/admin-page.cr
@@ -1,7 +1,8 @@
-require "../html"
+require "./html"
 require "./dialogs/*"
+require "./panes/*"
 
-class Guff::Views::Admin::PageView < Guff::Views::HTMLView
+class Guff::Views::AdminPageView < Guff::Views::HTMLView
   TITLE = "Guff Admin"
 
   POST_TYPES = {
@@ -150,50 +151,27 @@ class Guff::Views::Admin::PageView < Guff::Views::HTMLView
     TEMPLATES[:new_post_button]
   end
 
-  private def authors_menu_items
-    @context.models.user.get_users.map do |row|
-      {
-        :id   => row["user_id"],
-        :name => row["name"],
-        :text => "Show author \"%s\"." % [row["name"]],
-      }
-    end
-  end
-
-  private def sites_menu_items
-    @context.models.site.get_sites.map do |row|
-      {
-        :id   => row["site_id"],
-        :name => row["name"],
-        :text => "Show site \"%s\"." % [row["name"]],
-      }
-    end
-  end
-
-  private def states_menu_items
-    @context.models.state.get_states.map do |row|
-      {
-        :id   => row["state"],
-        :name => row["name"],
-        :icon => row["icon"],
-        :text => "Show state \"%s\"." % [row["name"]],
-      }
-    end
-  end
-
   private def page_data
     { post_types: POST_TYPES}.to_json
   end
 
   private def dialogs
     String.build do |io|
-      io << Dialogs::UserAdd.new(@context)
-      io << Dialogs::UserEdit.new(@context)
-      io << Dialogs::BlogEdit.new(@context)
-      io << Dialogs::PageEdit.new(@context)
-      io << Dialogs::ProjectEdit.new(@context)
+      io << Dialogs::Admin::UserAdd.new(@context)
+      io << Dialogs::Admin::UserEdit.new(@context)
+      io << Dialogs::Admin::BlogEdit.new(@context)
+      io << Dialogs::Admin::PageEdit.new(@context)
+      io << Dialogs::Admin::ProjectEdit.new(@context)
+    end
+  end
+
+  private def admin_panes
+    String.build do |io|
+      io << Panes::Admin::Home.new(@context)
+      io << Panes::Admin::Posts.new(@context)
+      io << Panes::Admin::Files.new(@context)
     end
   end
 
-  ECR.def_to_s("src/views/admin/page.ecr")
+  ECR.def_to_s("src/views/admin-page.ecr")
 end
diff --git a/src/guff/views/admin/dialogs/blog-edit.cr b/src/guff/views/admin/dialogs/blog-edit.cr
deleted file mode 100644
index 409b8d3..0000000
--- a/src/guff/views/admin/dialogs/blog-edit.cr
+++ /dev/null
@@ -1,5 +0,0 @@
-require "./post-edit"
-
-class Guff::Views::Admin::Dialogs::BlogEdit < Guff::Views::Admin::Dialogs::PostEdit
-  ECR.def_to_s("src/views/admin/dialogs/blog-edit.ecr")
-end
diff --git a/src/guff/views/admin/dialogs/project-edit.cr b/src/guff/views/admin/dialogs/project-edit.cr
deleted file mode 100644
index 0db1f11..0000000
--- a/src/guff/views/admin/dialogs/project-edit.cr
+++ /dev/null
@@ -1,5 +0,0 @@
-require "./post-edit"
-
-class Guff::Views::Admin::Dialogs::ProjectEdit < Guff::Views::Admin::Dialogs::PostEdit
-  ECR.def_to_s("src/views/admin/dialogs/project-edit.ecr")
-end
diff --git a/src/guff/views/admin/dialogs/user-add.cr b/src/guff/views/admin/dialogs/user-add.cr
deleted file mode 100644
index 1a404fe..0000000
--- a/src/guff/views/admin/dialogs/user-add.cr
+++ /dev/null
@@ -1,5 +0,0 @@
-require "./user"
-
-class Guff::Views::Admin::Dialogs::UserAdd < Guff::Views::Admin::Dialogs::User
-  ECR.def_to_s("src/views/admin/dialogs/user-add.ecr")
-end
diff --git a/src/guff/views/admin/dialogs/user-edit.cr b/src/guff/views/admin/dialogs/user-edit.cr
deleted file mode 100644
index 27789b7..0000000
--- a/src/guff/views/admin/dialogs/user-edit.cr
+++ /dev/null
@@ -1,5 +0,0 @@
-require "./user"
-
-class Guff::Views::Admin::Dialogs::UserEdit < Guff::Views::Admin::Dialogs::User
-  ECR.def_to_s("src/views/admin/dialogs/user-edit.ecr")
-end
diff --git a/src/guff/views/dialogs/admin/blog-edit.cr b/src/guff/views/dialogs/admin/blog-edit.cr
new file mode 100644
index 0000000..c45c1b5
--- /dev/null
+++ b/src/guff/views/dialogs/admin/blog-edit.cr
@@ -0,0 +1,5 @@
+require "./post-edit"
+
+class Guff::Views::Dialogs::Admin::BlogEdit < Guff::Views::Dialogs::Admin::PostEdit
+  ECR.def_to_s("src/views/dialogs/admin/blog-edit.ecr")
+end
diff --git a/src/guff/views/admin/dialogs/page-edit.cr b/src/guff/views/dialogs/admin/page-edit.cr
index 138691d..363ee00 100644
--- a/src/guff/views/admin/dialogs/page-edit.cr
+++ b/src/guff/views/dialogs/admin/page-edit.cr
@@ -1,8 +1,8 @@
 require "./post-edit"
 
-class Guff::Views::Admin::Dialogs::PageEdit < Guff::Views::Admin::Dialogs::PostEdit
+class Guff::Views::Dialogs::Admin::PageEdit < Guff::Views::Dialogs::Admin::PostEdit
   private def theme_options
-    tmpl = Guff::Views::Admin::PageView::TEMPLATES[:option]
+    tmpl = Guff::Views::AdminPageView::TEMPLATES[:option]
 
     [{
       "id"    => "site-default",
@@ -20,5 +20,5 @@ class Guff::Views::Admin::Dialogs::PageEdit < Guff::Views::Admin::Dialogs::PostE
     }.join("")
   end
 
-  ECR.def_to_s("src/views/admin/dialogs/page-edit.ecr")
+  ECR.def_to_s("src/views/dialogs/admin/page-edit.ecr")
 end
diff --git a/src/guff/views/admin/dialogs/post-edit.cr b/src/guff/views/dialogs/admin/post-edit.cr
index f817d5c..640580e 100644
--- a/src/guff/views/admin/dialogs/post-edit.cr
+++ b/src/guff/views/dialogs/admin/post-edit.cr
@@ -1,6 +1,6 @@
-class Guff::Views::Admin::Dialogs::PostEdit < Guff::Views::HTMLView
+class Guff::Views::Dialogs::Admin::PostEdit < Guff::Views::HTMLView
   protected def state_buttons
-    tmpl = Guff::Views::Admin::PageView::TEMPLATES[:state_button]
+    tmpl = Guff::Views::AdminPageView::TEMPLATES[:state_button]
 
     @state_buttons ||= String.build do |io|
       @context.models.state.get_states.each do |row|
diff --git a/src/guff/views/dialogs/admin/project-edit.cr b/src/guff/views/dialogs/admin/project-edit.cr
new file mode 100644
index 0000000..0a229b3
--- /dev/null
+++ b/src/guff/views/dialogs/admin/project-edit.cr
@@ -0,0 +1,5 @@
+require "./post-edit"
+
+class Guff::Views::Dialogs::Admin::ProjectEdit < Guff::Views::Dialogs::Admin::PostEdit
+  ECR.def_to_s("src/views/dialogs/admin/project-edit.ecr")
+end
diff --git a/src/guff/views/dialogs/admin/user-add.cr b/src/guff/views/dialogs/admin/user-add.cr
new file mode 100644
index 0000000..38a248a
--- /dev/null
+++ b/src/guff/views/dialogs/admin/user-add.cr
@@ -0,0 +1,5 @@
+require "./user"
+
+class Guff::Views::Dialogs::Admin::UserAdd < Guff::Views::Dialogs::Admin::User
+  ECR.def_to_s("src/views/dialogs/admin/user-add.ecr")
+end
diff --git a/src/guff/views/dialogs/admin/user-edit.cr b/src/guff/views/dialogs/admin/user-edit.cr
new file mode 100644
index 0000000..cd73500
--- /dev/null
+++ b/src/guff/views/dialogs/admin/user-edit.cr
@@ -0,0 +1,5 @@
+require "./user"
+
+class Guff::Views::Dialogs::Admin::UserEdit < Guff::Views::Dialogs::Admin::User
+  ECR.def_to_s("src/views/dialogs/admin/user-edit.ecr")
+end
diff --git a/src/guff/views/admin/dialogs/user.cr b/src/guff/views/dialogs/admin/user.cr
index 4dea3cf..fbb71da 100644
--- a/src/guff/views/admin/dialogs/user.cr
+++ b/src/guff/views/dialogs/admin/user.cr
@@ -1,6 +1,6 @@
-class Guff::Views::Admin::Dialogs::User < Guff::Views::HTMLView
+class Guff::Views::Dialogs::Admin::User < Guff::Views::HTMLView
   protected def role_options
-    tmpl = Guff::Views::Admin::PageView::TEMPLATES[:option]
+    tmpl = Guff::Views::AdminPageView::TEMPLATES[:option]
 
     @role_options ||= String.build do |io|
       @context.models.role.get_roles.each do |row|
diff --git a/src/guff/views/panes/admin/files.cr b/src/guff/views/panes/admin/files.cr
new file mode 100644
index 0000000..adcda26
--- /dev/null
+++ b/src/guff/views/panes/admin/files.cr
@@ -0,0 +1,5 @@
+require "./pane"
+
+class Guff::Views::Panes::Admin::Files < Guff::Views::Panes::Admin::Pane
+  ECR.def_to_s("src/views/panes/admin/files.ecr")
+end
diff --git a/src/guff/views/panes/admin/home.cr b/src/guff/views/panes/admin/home.cr
new file mode 100644
index 0000000..b5be8c2
--- /dev/null
+++ b/src/guff/views/panes/admin/home.cr
@@ -0,0 +1,5 @@
+require "./pane"
+
+class Guff::Views::Panes::Admin::Home < Guff::Views::Panes::Admin::Pane
+  ECR.def_to_s("src/views/panes/admin/home.ecr")
+end
diff --git a/src/guff/views/panes/admin/pane.cr b/src/guff/views/panes/admin/pane.cr
new file mode 100644
index 0000000..eba64d8
--- /dev/null
+++ b/src/guff/views/panes/admin/pane.cr
@@ -0,0 +1,7 @@
+require "../../html"
+
+class Guff::Views::Panes::Admin::Pane < Guff::Views::HTMLView
+  protected def new_post_button
+    Guff::Views::AdminPageView::TEMPLATES[:new_post_button]
+  end
+end
diff --git a/src/guff/views/panes/admin/posts.cr b/src/guff/views/panes/admin/posts.cr
new file mode 100644
index 0000000..13f51ce
--- /dev/null
+++ b/src/guff/views/panes/admin/posts.cr
@@ -0,0 +1,36 @@
+require "./pane"
+
+class Guff::Views::Panes::Admin::Posts < Guff::Views::Panes::Admin::Pane
+  private def authors_menu_items
+    @context.models.user.get_users.map do |row|
+      {
+        :id   => row["user_id"],
+        :name => row["name"],
+        :text => "Show author \"%s\"." % [row["name"]],
+      }
+    end
+  end
+
+  private def sites_menu_items
+    @context.models.site.get_sites.map do |row|
+      {
+        :id   => row["site_id"],
+        :name => row["name"],
+        :text => "Show site \"%s\"." % [row["name"]],
+      }
+    end
+  end
+
+  private def states_menu_items
+    @context.models.state.get_states.map do |row|
+      {
+        :id   => row["state"],
+        :name => row["name"],
+        :icon => row["icon"],
+        :text => "Show state \"%s\"." % [row["name"]],
+      }
+    end
+  end
+
+  ECR.def_to_s("src/views/panes/admin/posts.ecr")
+end
diff --git a/src/views/admin-page.ecr b/src/views/admin-page.ecr
new file mode 100644
index 0000000..5b9f352
--- /dev/null
+++ b/src/views/admin-page.ecr
@@ -0,0 +1,268 @@
+<!DOCTYPE html>
+<html lang='en-US'>
+  <head>
+    <meta charset="utf-8"/>
+    <title><%= h(TITLE) %></title>
+
+    <%=
+      styles %w{
+        assets/font-awesome-4.5.0/css/font-awesome.min.css
+        assets/bootstrap-3.3.6/css/bootstrap.min.css
+        assets/bootstrap-3.3.6/css/bootstrap-theme.min.css
+        assets/css/admin.css
+      }
+    %>
+  </head>
+
+  <body>
+    <div
+      class='navbar navbar-inverse navbar-static-top'
+      role='navigation'
+    >
+      <div class='container-fluid'>
+        <div class='navbar-header'>
+          <a
+            href='admin.html'
+            class='navbar-brand'
+          >
+            <i class='fa fa-bomb'></i>
+            <%= h(TITLE) %>
+          </a><!-- navbar-brand -->
+        </div><!-- navbar-default -->
+
+        <ul class='nav navbar-nav navbar-right'>
+          <li>
+            <a
+              href='logout.html'
+              title='Log out.'
+            >
+              <i class='fa fa-power-off'></i>
+              Log Out
+            </a>
+          </li>
+        </ul><!-- nav -->
+      </div><!-- container-fluid -->
+    </div><!-- navbar -->
+
+    <div class='container'>
+      <div class='col-md-12'>
+        <ul class='nav nav-tabs nav-justified' role='tablist'><%=
+          tabs("admin")
+        %></ul><!-- nav -->
+
+        <div class='tab-content'>
+          <%= admin_panes %>
+
+          <div
+            id='admin-pane-settings'
+            class='tab-pane'
+            role='tabpanel'
+          >
+            <div class='panel panel-default'>
+              <div class='panel-body'>
+                <div class='row'>
+                  <div class='col-md-3'>
+                    <ul class='nav nav-pills nav-stacked' role='tablist'><%=
+                      tabs("settings")
+                    %></ul><!-- nav -->
+                  </div><!-- col-md-3 -->
+
+                  <div class='col-md-9'>
+                    <div class='tab-content'>
+                      <div
+                        id='settings-pane-general'
+                        class='tab-pane active'
+                        role='tabpanel'
+                      >
+                        <div class='panel panel-default'>
+                          <div class='panel-heading'>
+                          </div><!-- panel-heading -->
+
+                          <div class='panel-body'>
+                            <p>
+                              TODO: general settings
+                            </p>
+                          </div><!-- panel-body -->
+                        </div><!-- panel -->
+                      </div><!-- tab-pane -->
+
+                      <div
+                        id='settings-pane-users'
+                        class='tab-pane'
+                        role='tabpanel'
+                      >
+                        <div class='panel panel-default'>
+                          <div class='panel-heading'>
+                            <div class='btn-toolbar'>
+                              <div class='btn-group btn-group-sm'>
+                                <a
+                                  href='#'
+                                  class='btn btn-primary'
+                                  title='Create new user.'
+                                  data-toggle='modal'
+                                  data-target='#user-add-dialog'
+                                >
+                                  <i class='fa fa-user-plus'></i>
+                                  New User
+                                </a><!-- btn -->
+                              </div><!-- btn-group -->
+
+                              <div class='btn-group btn-group-sm pull-right'>
+                                <a
+                                  href='#'
+                                  class='btn btn-default search-toggle'
+                                  title='Toggle search field.'
+                                >
+                                  <i class='fa fa-fw fa-search'></i>
+                                </a><!-- btn-->
+                              </div><!-- btn-group -->
+
+                              <div class='btn-group btn-group-sm pull-right'>
+                                <a
+                                  href='#'
+                                  id='users-reload'
+                                  class='btn btn-default'
+                                  title='Reload users.'
+                                >
+                                  <span class='loading'>
+                                    <i class='fa fa-fw fa-refresh'></i>
+                                  </span>
+
+                                  <span class='loading hidden'>
+                                    <i class='fa fa-fw fa-spinner fa-spin'></i>
+                                  </span>
+                                </a><!-- #reload -->
+                              </div><!-- btn-group -->
+                            </div><!-- btn-toolbar -->
+                          </div><!-- panel-heading -->
+
+                          <div class='panel-heading hidden search-toggle'>
+                            <div class='input-group input-group-sm'>
+                              <span class='input-group-addon'>
+                                <i class='fa fa-search'></i>
+                              </span>
+
+                              <input
+                                type='text'
+                                id='users-q'
+                                class='form-control'
+                                title='Enter search terms'
+                              />
+                            </div><!-- input-group -->
+                          </div><!-- panel-heading -->
+
+                          <div id='users' class='list-group'>
+                            <span class='list-group-item disabled'>
+                              <i class='fa fa-spinner fa-spin'></i>
+                              Loading...
+                            </span><!-- list-group-item -->
+                          </div><!-- list-group -->
+                        </div><!-- panel -->
+                      </div><!-- tab-pane -->
+
+                      <div
+                        id='settings-pane-themes'
+                        class='tab-pane'
+                        role='tabpanel'
+                      >
+                        <div class='panel panel-default'>
+                          <div class='panel-heading'>
+                          </div><!-- panel-heading -->
+
+                          <div id='themes' class='panel-body'>
+                            <p>
+                              TODO: themes
+                            </p>
+                          </div><!-- panel-body -->
+                        </div><!-- panel -->
+                      </div><!-- tab-pane -->
+
+                      <div
+                        id='settings-pane-sites'
+                        class='tab-pane'
+                        role='tabpanel'
+                      >
+                        <div class='panel panel-default'>
+                          <div class='panel-heading'>
+                          </div><!-- panel-heading -->
+
+                          <div id='sites' class='panel-body'>
+                            <p>
+                              TODO: sites settings
+                            </p>
+                          </div><!-- panel-body -->
+                        </div><!-- panel -->
+                      </div><!-- tab-pane -->
+
+                      <div
+                        id='settings-pane-backups'
+                        class='tab-pane'
+                        role='tabpanel'
+                      >
+                        <div class='panel panel-default'>
+                          <div class='panel-heading'>
+                          </div><!-- panel-heading -->
+
+                          <div class='panel-body'>
+                            <p>
+                              TODO: backups
+                            </p>
+                          </div><!-- panel-body -->
+                        </div><!-- panel -->
+                      </div><!-- tab-pane -->
+
+                      <div
+                        id='settings-pane-import'
+                        class='tab-pane'
+                        role='tabpanel'
+                      >
+                        <div class='panel panel-default'>
+                          <div class='panel-heading'>
+                          </div><!-- panel-heading -->
+
+                          <div class='panel-body'>
+                            <p>
+                              TODO: import
+                            </p>
+                          </div><!-- panel-body -->
+                        </div><!-- panel -->
+                      </div><!-- tab-pane -->
+                    </div><!-- tab-content -->
+                  </div><!-- col-md-9 -->
+                </div><!-- row -->
+              </div><!-- panel-body -->
+            </div><!-- panel -->
+          </div><!-- tab-pane -->
+        </div><!-- tab-content -->
+      </div><!-- col-md-12 -->
+    </div><!-- container -->
+
+    <%= dialogs %>
+  </body>
+
+
+  <script type='text/javascript'><!--
+    var DATA = <%= page_data %>;
+    // -->
+  </script>
+  <%=
+    scripts %w{
+      assets/jquery-2.2.1.min.js
+      assets/luigi-template-0.4.1.min.js
+      assets/js/util.js
+      assets/bootstrap-3.3.6/js/bootstrap.min.js
+      assets/ckeditor-4.5.8-custom/ckeditor.js
+      assets/js/search-field.js
+      assets/js/dropdown.js
+      assets/js/admin/tabs/users.js
+      assets/js/admin/tabs/posts.js
+      assets/js/admin/tabs/files.js
+      assets/js/admin/dialogs/user-add.js
+      assets/js/admin/dialogs/user-edit.js
+      assets/js/admin/dialogs/post-edit.js
+      assets/js/admin/dialogs/blog-edit.js
+      assets/js/admin/dialogs/page-edit.js
+      assets/js/admin/dialogs/project-edit.js
+    }
+  %>
+</html>
diff --git a/src/views/admin/page.ecr b/src/views/admin/page.ecr
deleted file mode 100644
index c9c8a24..0000000
--- a/src/views/admin/page.ecr
+++ /dev/null
@@ -1,588 +0,0 @@
-<!DOCTYPE html>
-<html lang='en-US'>
-  <head>
-    <meta charset="utf-8"/>
-    <title><%= h(TITLE) %></title>
-
-    <%=
-      styles %w{
-        assets/font-awesome-4.5.0/css/font-awesome.min.css
-        assets/bootstrap-3.3.6/css/bootstrap.min.css
-        assets/bootstrap-3.3.6/css/bootstrap-theme.min.css
-        assets/css/admin.css
-      }
-    %>
-  </head>
-
-  <body>
-    <div
-      class='navbar navbar-inverse navbar-static-top'
-      role='navigation'
-    >
-      <div class='container-fluid'>
-        <div class='navbar-header'>
-          <a
-            href='admin.html'
-            class='navbar-brand'
-          >
-            <i class='fa fa-bomb'></i>
-            <%= h(TITLE) %>
-          </a><!-- navbar-brand -->
-        </div><!-- navbar-default -->
-
-        <ul class='nav navbar-nav navbar-right'>
-          <li>
-            <a
-              href='logout.html'
-              title='Log out.'
-            >
-              <i class='fa fa-power-off'></i>
-              Log Out
-            </a>
-          </li>
-        </ul><!-- nav -->
-      </div><!-- container-fluid -->
-    </div><!-- navbar -->
-
-    <div class='container'>
-      <div class='col-md-12'>
-        <ul class='nav nav-tabs nav-justified' role='tablist'><%=
-          tabs("admin")
-        %></ul><!-- nav -->
-
-        <div class='tab-content'>
-          <div
-            id='admin-pane-home'
-            class='tab-pane active'
-            role='tabpanel'
-          >
-            <div class='panel panel-default'>
-              <div class='panel-heading'>
-                <div class='btn-toolbar'>
-                  <div class='btn-group btn-group-sm'><%=
-                    new_post_button
-                  %></div><!-- btn-group -->
-                </div><!-- btn-toolbar -->
-              </div><!-- panel-heading -->
-
-              <div class='panel-body'>
-                <p>
-                  TODO: home
-                </p>
-              </div><!-- panel-body -->
-            </div><!-- panel -->
-          </div><!-- tab-pane -->
-
-          <div
-            id='admin-pane-posts'
-            class='tab-pane'
-            role='tabpanel'
-          >
-            <div class='panel panel-default'>
-              <div class='panel-heading'>
-                <div class='btn-toolbar'>
-                  <div class='btn-group btn-group-sm'><%=
-                    new_post_button
-                  %></div><!-- btn-group -->
-
-                  <div class='btn-group btn-group-sm'>
-                    <span>&nbsp;&nbsp;</span>
-                  </div><!-- btn-group -->
-
-                  <div class='btn-group btn-group-sm'><%=
-                    dropdown(
-                      id:       "posts-filter-type",
-                      css:      "posts-filter-menu",
-
-                      name:     "Type",
-                      text:     "Filter posts by type.",
-
-                      icon:     "",
-                      default:  "all",
-
-                      items: [{
-                        :id   => "all",
-                        :name => "All",
-                        :text => "Show all types.",
-                      }, {
-                        :type => "divider",
-                      }] + %i{blog page project}.map { |id|
-                        name = POST_TYPES[id][:name]
-
-                        {
-                          :id   => POST_TYPES[id][:id],
-                          :name => name,
-                          :icon => POST_TYPES[id][:icon],
-                          :text => "Show #{name}s.",
-                        }
-                      }
-                    )
-                  %></div><!-- btn-group -->
-
-                  <div class='btn-group btn-group-sm'><%=
-                    dropdown(
-                      id:       "posts-filter-state",
-                      css:      "posts-filter-menu",
-
-                      name:     "State",
-                      text:     "Filter by post state.",
-
-                      icon:     "",
-                      default:  "default",
-
-                      items: [{
-                        :id   => "default",
-                        :name => "Default",
-                        :text => "Show drafts and posted items.",
-                      }, {
-                        :type => "divider",
-                      }].concat(states_menu_items),
-                    )
-                  %></div><!-- btn-group -->
-
-                  <div class='btn-group btn-group-sm'><%=
-                    dropdown(
-                      id:       "posts-filter-site",
-                      css:      "posts-filter-menu",
-
-                      name:     "Site",
-                      text:     "Filter by site.",
-
-                      icon:     "",
-                      default:  "all",
-
-                      items: [{
-                        :id   => "all",
-                        :name => "All",
-                        :text => "Show all sites.",
-                      }, {
-                        :type => "divider",
-                      }].concat(sites_menu_items),
-                    )
-                  %></div><!-- btn-group -->
-
-                  <div class='btn-group btn-group-sm'><%=
-                    dropdown(
-                      id:       "posts-filter-user",
-                      css:      "posts-filter-menu",
-
-                      name:     "Author",
-                      text:     "Filter by author.",
-
-                      icon:     "",
-                      default:  "all",
-
-                      items: [{
-                        :id   => "all",
-                        :name => "All",
-                        :text => "Show all authors.",
-                      }, {
-                        :type => "divider",
-                      }].concat(authors_menu_items),
-                    )
-                  %></div><!-- btn-group -->
-
-                  <div class='btn-group btn-group-sm pull-right'>
-                    <a
-                      href='#'
-                      class='btn btn-default search-toggle'
-                      title='Toggle search field.'
-                    >
-                      <i class='fa fa-fw fa-search'></i>
-                    </a><!-- btn-->
-                  </div><!-- btn-group -->
-
-                  <div class='btn-group btn-group-sm pull-right'>
-                    <a
-                      href='#'
-                      id='posts-reload'
-                      class='btn btn-default'
-                      title='Reload posts'
-                    >
-                      <span class='loading'>
-                        <i class='fa fa-fw fa-refresh'></i>
-                      </span>
-
-                      <span class='loading hidden'>
-                        <i class='fa fa-fw fa-spinner fa-spin'></i>
-                      </span>
-                    </a><!-- btn -->
-                  </div><!-- btn-group -->
-                </div><!-- btn-toolbar -->
-              </div><!-- panel-heading -->
-
-              <div class='panel-heading hidden search-toggle'>
-                <div class='input-group input-group-sm'>
-                  <span class='input-group-addon'>
-                    <i class='fa fa-search'></i>
-                  </span>
-
-                  <input
-                    type='text'
-                    id='posts-q'
-                    class='form-control'
-                    title='Enter search terms'
-                  />
-                </div><!-- input-group -->
-              </div><!-- panel-heading -->
-
-              <table
-                id='posts'
-                class='table table-hover'
-              >
-                <thead>
-                  <tr class='small'>
-                    <th>&nbsp;</th>
-                    <th>Name</th>
-                    <th>Site</th>
-                    <th>Slug</th>
-                    <th>Author</th>
-                    <th>Created</th>
-                    <th>Posted</th>
-                  </tr>
-                </thead>
-
-                <tbody>
-                </tbody>
-              </table><!-- table -->
-            </div><!-- panel -->
-          </div><!-- tab-pane -->
-
-          <div
-            id='admin-pane-files'
-            class='tab-pane'
-            role='tabpanel'
-          >
-            <div class='panel panel-default'>
-              <div class='panel-heading'>
-                <div class='btn-toolbar'>
-                  <div class='btn-group btn-group-sm'>
-                    <a
-                      href='#'
-                      id='files-upload'
-                      class='btn btn-primary'
-                      title='Upload file to current directory.'
-                    >
-                      <i class='fa fa-upload'></i>
-                      Upload File...
-                    </a><!-- btn -->
-                  </div><!-- btn-group -->
-
-                  <div class='btn-group btn-group-sm'>
-                    <a
-                      href='#'
-                      id='files-mkdir'
-                      class='btn btn-default'
-                      title='Create folder in current directory.'
-                    >
-                      <span class='loading'>
-                        <i class='fa fa-folder'></i>
-                      </span><!-- loading -->
-
-                      <span class='loading hidden'>
-                        <i class='fa fa-spinner fa-spin'></i>
-                      </span><!-- loading -->
-
-                      New Folder...
-                    </a><!-- btn -->
-                  </div><!-- btn-group -->
-
-                  <div class='btn-group btn-group-sm'>
-                    <a
-                      href='#'
-                      class='btn btn-default'
-                      title='View actions.'
-                      data-toggle='dropdown'
-                    >
-                      <i class='fa fa-clone'></i>
-                      File Actions
-                      <i class='fa fa-caret-down'></i>
-                    </a><!-- btn -->
-
-                    <ul id='file-actions' class='dropdown-menu'>
-                      <li>
-                        <a
-                          href='#'
-                          title='Download selected file.'
-                          data-id='download'
-                        >
-                          <i class='fa fa-download'></i>
-                          Download File
-                        </a><!-- btn -->
-                      </li>
-
-                      <li>
-                        <a
-                          href='#'
-                          title='Move selected file or folder.'
-                          data-id='move'
-                        >
-                          <i class='fa fa-folder-open-o'></i>
-                          Move
-                        </a><!-- btn -->
-                      </li>
-
-                      <li>
-                        <a
-                          href='#'
-                          title='Delete selected file or folder.'
-                          data-id='delete'
-                        >
-                          <i class='fa fa-trash-o'></i>
-                          Delete
-                        </a><!-- btn -->
-                      </li>
-                    </ul><!-- dropdown-menu -->
-                  </div><!-- btn-group -->
-
-                  <div class='btn-group btn-group-sm pull-right'>
-                    <a
-                      href='#'
-                      id='files-reload'
-                      class='btn btn-default'
-                      title='Reload files.'
-                    >
-                      <span class='loading'>
-                        <i class='fa fa-fw fa-refresh'></i>
-                      </span>
-
-                      <span class='loading hidden'>
-                        <i class='fa fa-fw fa-spinner fa-spin'></i>
-                      </span>
-                    </a><!-- btn -->
-                  </div><!-- btn-group -->
-
-                  <div class='btn-group btn-group-sm pull-right'>
-                    <span
-                      class='btn'
-                      title='Number of files in current directory.'
-                    >
-                      <span id='files-count'>0</span> Files
-                    </span><!-- btn -->
-                  </div><!-- btn-group -->
-                </div><!-- btn-toolbar -->
-              </div><!-- panel-heading -->
-
-              <div class='panel-heading'>
-                <div id='files-crumbs' class='btn-toolbar'>
-                </div><!-- btn-toolbar -->
-              </div><!-- panel-heading -->
-
-              <div id='files' class='list-group'>
-              </div><!-- panel-body -->
-            </div><!-- panel -->
-          </div><!-- tab-pane -->
-
-          <div
-            id='admin-pane-settings'
-            class='tab-pane'
-            role='tabpanel'
-          >
-            <div class='panel panel-default'>
-              <div class='panel-body'>
-                <div class='row'>
-                  <div class='col-md-3'>
-                    <ul class='nav nav-pills nav-stacked' role='tablist'><%=
-                      tabs("settings")
-                    %></ul><!-- nav -->
-                  </div><!-- col-md-3 -->
-
-                  <div class='col-md-9'>
-                    <div class='tab-content'>
-                      <div
-                        id='settings-pane-general'
-                        class='tab-pane active'
-                        role='tabpanel'
-                      >
-                        <div class='panel panel-default'>
-                          <div class='panel-heading'>
-                          </div><!-- panel-heading -->
-
-                          <div class='panel-body'>
-                            <p>
-                              TODO: general settings
-                            </p>
-                          </div><!-- panel-body -->
-                        </div><!-- panel -->
-                      </div><!-- tab-pane -->
-
-                      <div
-                        id='settings-pane-users'
-                        class='tab-pane'
-                        role='tabpanel'
-                      >
-                        <div class='panel panel-default'>
-                          <div class='panel-heading'>
-                            <div class='btn-toolbar'>
-                              <div class='btn-group btn-group-sm'>
-                                <a
-                                  href='#'
-                                  class='btn btn-primary'
-                                  title='Create new user.'
-                                  data-toggle='modal'
-                                  data-target='#user-add-dialog'
-                                >
-                                  <i class='fa fa-user-plus'></i>
-                                  New User
-                                </a><!-- btn -->
-                              </div><!-- btn-group -->
-
-                              <div class='btn-group btn-group-sm pull-right'>
-                                <a
-                                  href='#'
-                                  class='btn btn-default search-toggle'
-                                  title='Toggle search field.'
-                                >
-                                  <i class='fa fa-fw fa-search'></i>
-                                </a><!-- btn-->
-                              </div><!-- btn-group -->
-
-                              <div class='btn-group btn-group-sm pull-right'>
-                                <a
-                                  href='#'
-                                  id='users-reload'
-                                  class='btn btn-default'
-                                  title='Reload users.'
-                                >
-                                  <span class='loading'>
-                                    <i class='fa fa-fw fa-refresh'></i>
-                                  </span>
-
-                                  <span class='loading hidden'>
-                                    <i class='fa fa-fw fa-spinner fa-spin'></i>
-                                  </span>
-                                </a><!-- #reload -->
-                              </div><!-- btn-group -->
-                            </div><!-- btn-toolbar -->
-                          </div><!-- panel-heading -->
-
-                          <div class='panel-heading hidden search-toggle'>
-                            <div class='input-group input-group-sm'>
-                              <span class='input-group-addon'>
-                                <i class='fa fa-search'></i>
-                              </span>
-
-                              <input
-                                type='text'
-                                id='users-q'
-                                class='form-control'
-                                title='Enter search terms'
-                              />
-                            </div><!-- input-group -->
-                          </div><!-- panel-heading -->
-
-                          <div id='users' class='list-group'>
-                            <span class='list-group-item disabled'>
-                              <i class='fa fa-spinner fa-spin'></i>
-                              Loading...
-                            </span><!-- list-group-item -->
-                          </div><!-- list-group -->
-                        </div><!-- panel -->
-                      </div><!-- tab-pane -->
-
-                      <div
-                        id='settings-pane-themes'
-                        class='tab-pane'
-                        role='tabpanel'
-                      >
-                        <div class='panel panel-default'>
-                          <div class='panel-heading'>
-                          </div><!-- panel-heading -->
-
-                          <div id='themes' class='panel-body'>
-                            <p>
-                              TODO: themes
-                            </p>
-                          </div><!-- panel-body -->
-                        </div><!-- panel -->
-                      </div><!-- tab-pane -->
-
-                      <div
-                        id='settings-pane-sites'
-                        class='tab-pane'
-                        role='tabpanel'
-                      >
-                        <div class='panel panel-default'>
-                          <div class='panel-heading'>
-                          </div><!-- panel-heading -->
-
-                          <div id='sites' class='panel-body'>
-                            <p>
-                              TODO: sites settings
-                            </p>
-                          </div><!-- panel-body -->
-                        </div><!-- panel -->
-                      </div><!-- tab-pane -->
-
-                      <div
-                        id='settings-pane-backups'
-                        class='tab-pane'
-                        role='tabpanel'
-                      >
-                        <div class='panel panel-default'>
-                          <div class='panel-heading'>
-                          </div><!-- panel-heading -->
-
-                          <div class='panel-body'>
-                            <p>
-                              TODO: backups
-                            </p>
-                          </div><!-- panel-body -->
-                        </div><!-- panel -->
-                      </div><!-- tab-pane -->
-
-                      <div
-                        id='settings-pane-import'
-                        class='tab-pane'
-                        role='tabpanel'
-                      >
-                        <div class='panel panel-default'>
-                          <div class='panel-heading'>
-                          </div><!-- panel-heading -->
-
-                          <div class='panel-body'>
-                            <p>
-                              TODO: import
-                            </p>
-                          </div><!-- panel-body -->
-                        </div><!-- panel -->
-                      </div><!-- tab-pane -->
-                    </div><!-- tab-content -->
-                  </div><!-- col-md-9 -->
-                </div><!-- row -->
-              </div><!-- panel-body -->
-            </div><!-- panel -->
-          </div><!-- tab-pane -->
-        </div><!-- tab-content -->
-      </div><!-- col-md-12 -->
-    </div><!-- container -->
-
-    <%= dialogs %>
-  </body>
-
-
-  <script type='text/javascript'><!--
-    var DATA = <%= page_data %>;
-    // -->
-  </script>
-  <%=
-    scripts %w{
-      assets/jquery-2.2.1.min.js
-      assets/luigi-template-0.4.1.min.js
-      assets/js/util.js
-      assets/bootstrap-3.3.6/js/bootstrap.min.js
-      assets/ckeditor-4.5.8-custom/ckeditor.js
-      assets/js/search-field.js
-      assets/js/dropdown.js
-      assets/js/admin/tabs/users.js
-      assets/js/admin/tabs/posts.js
-      assets/js/admin/tabs/files.js
-      assets/js/admin/dialogs/user-add.js
-      assets/js/admin/dialogs/user-edit.js
-      assets/js/admin/dialogs/post-edit.js
-      assets/js/admin/dialogs/blog-edit.js
-      assets/js/admin/dialogs/page-edit.js
-      assets/js/admin/dialogs/project-edit.js
-    }
-  %>
-</html>
diff --git a/src/views/admin/dialogs/blog-edit.ecr b/src/views/dialogs/admin/blog-edit.ecr
index bbe946f..bbe946f 100644
--- a/src/views/admin/dialogs/blog-edit.ecr
+++ b/src/views/dialogs/admin/blog-edit.ecr
diff --git a/src/views/admin/dialogs/page-edit.ecr b/src/views/dialogs/admin/page-edit.ecr
index c0b30e8..c0b30e8 100644
--- a/src/views/admin/dialogs/page-edit.ecr
+++ b/src/views/dialogs/admin/page-edit.ecr
diff --git a/src/views/admin/dialogs/project-edit.ecr b/src/views/dialogs/admin/project-edit.ecr
index 59c89d4..59c89d4 100644
--- a/src/views/admin/dialogs/project-edit.ecr
+++ b/src/views/dialogs/admin/project-edit.ecr
diff --git a/src/views/admin/dialogs/user-add.ecr b/src/views/dialogs/admin/user-add.ecr
index 198ab69..198ab69 100644
--- a/src/views/admin/dialogs/user-add.ecr
+++ b/src/views/dialogs/admin/user-add.ecr
diff --git a/src/views/admin/dialogs/user-edit.ecr b/src/views/dialogs/admin/user-edit.ecr
index e0e39c2..e0e39c2 100644
--- a/src/views/admin/dialogs/user-edit.ecr
+++ b/src/views/dialogs/admin/user-edit.ecr
diff --git a/src/views/panes/admin/files.ecr b/src/views/panes/admin/files.ecr
new file mode 100644
index 0000000..d5c4f0d
--- /dev/null
+++ b/src/views/panes/admin/files.ecr
@@ -0,0 +1,124 @@
+<div
+  id='admin-pane-files'
+  class='tab-pane'
+  role='tabpanel'
+>
+  <div class='panel panel-default'>
+    <div class='panel-heading'>
+      <div class='btn-toolbar'>
+        <div class='btn-group btn-group-sm'>
+          <a
+            href='#'
+            id='files-upload'
+            class='btn btn-primary'
+            title='Upload file to current directory.'
+          >
+            <i class='fa fa-upload'></i>
+            Upload File...
+          </a><!-- btn -->
+        </div><!-- btn-group -->
+
+        <div class='btn-group btn-group-sm'>
+          <a
+            href='#'
+            id='files-mkdir'
+            class='btn btn-default'
+            title='Create folder in current directory.'
+          >
+            <span class='loading'>
+              <i class='fa fa-folder'></i>
+            </span><!-- loading -->
+
+            <span class='loading hidden'>
+              <i class='fa fa-spinner fa-spin'></i>
+            </span><!-- loading -->
+
+            New Folder...
+          </a><!-- btn -->
+        </div><!-- btn-group -->
+
+        <div class='btn-group btn-group-sm'>
+          <a
+            href='#'
+            class='btn btn-default'
+            title='View actions.'
+            data-toggle='dropdown'
+          >
+            <i class='fa fa-clone'></i>
+            File Actions
+            <i class='fa fa-caret-down'></i>
+          </a><!-- btn -->
+
+          <ul id='file-actions' class='dropdown-menu'>
+            <li>
+              <a
+                href='#'
+                title='Download selected file.'
+                data-id='download'
+              >
+                <i class='fa fa-download'></i>
+                Download File
+              </a><!-- btn -->
+            </li>
+
+            <li>
+              <a
+                href='#'
+                title='Move selected file or folder.'
+                data-id='move'
+              >
+                <i class='fa fa-folder-open-o'></i>
+                Move
+              </a><!-- btn -->
+            </li>
+
+            <li>
+              <a
+                href='#'
+                title='Delete selected file or folder.'
+                data-id='delete'
+              >
+                <i class='fa fa-trash-o'></i>
+                Delete
+              </a><!-- btn -->
+            </li>
+          </ul><!-- dropdown-menu -->
+        </div><!-- btn-group -->
+
+        <div class='btn-group btn-group-sm pull-right'>
+          <a
+            href='#'
+            id='files-reload'
+            class='btn btn-default'
+            title='Reload files.'
+          >
+            <span class='loading'>
+              <i class='fa fa-fw fa-refresh'></i>
+            </span>
+
+            <span class='loading hidden'>
+              <i class='fa fa-fw fa-spinner fa-spin'></i>
+            </span>
+          </a><!-- btn -->
+        </div><!-- btn-group -->
+
+        <div class='btn-group btn-group-sm pull-right'>
+          <span
+            class='btn'
+            title='Number of files in current directory.'
+          >
+            <span id='files-count'>0</span> Files
+          </span><!-- btn -->
+        </div><!-- btn-group -->
+      </div><!-- btn-toolbar -->
+    </div><!-- panel-heading -->
+
+    <div class='panel-heading'>
+      <div id='files-crumbs' class='btn-toolbar'>
+      </div><!-- btn-toolbar -->
+    </div><!-- panel-heading -->
+
+    <div id='files' class='list-group'>
+    </div><!-- panel-body -->
+  </div><!-- panel -->
+</div><!-- tab-pane -->
diff --git a/src/views/panes/admin/home.ecr b/src/views/panes/admin/home.ecr
new file mode 100644
index 0000000..af19b78
--- /dev/null
+++ b/src/views/panes/admin/home.ecr
@@ -0,0 +1,21 @@
+<div
+  id='admin-pane-home'
+  class='tab-pane active'
+  role='tabpanel'
+>
+  <div class='panel panel-default'>
+    <div class='panel-heading'>
+      <div class='btn-toolbar'>
+        <div class='btn-group btn-group-sm'><%=
+          new_post_button
+        %></div><!-- btn-group -->
+      </div><!-- btn-toolbar -->
+    </div><!-- panel-heading -->
+
+    <div class='panel-body'>
+      <p>
+        TODO: home
+      </p>
+    </div><!-- panel-body -->
+  </div><!-- panel -->
+</div><!-- tab-pane -->
diff --git a/src/views/panes/admin/posts.ecr b/src/views/panes/admin/posts.ecr
new file mode 100644
index 0000000..5e6571d
--- /dev/null
+++ b/src/views/panes/admin/posts.ecr
@@ -0,0 +1,175 @@
+<div
+  id='admin-pane-posts'
+  class='tab-pane'
+  role='tabpanel'
+>
+  <div class='panel panel-default'>
+    <div class='panel-heading'>
+      <div class='btn-toolbar'>
+        <div class='btn-group btn-group-sm'><%=
+          new_post_button
+        %></div><!-- btn-group -->
+
+        <div class='btn-group btn-group-sm'>
+          <span>&nbsp;&nbsp;</span>
+        </div><!-- btn-group -->
+
+        <div class='btn-group btn-group-sm'><%=
+          dropdown(
+            id:       "posts-filter-type",
+            css:      "posts-filter-menu",
+
+            name:     "Type",
+            text:     "Filter posts by type.",
+
+            icon:     "",
+            default:  "all",
+
+            items: [{
+              :id   => "all",
+              :name => "All",
+              :text => "Show all types.",
+            }, {
+              :type => "divider",
+            }] + %i{blog page project}.map { |id|
+              # get post type
+              post_type = Guff::Views::AdminPageView::POST_TYPES[id]
+
+              {
+                :id   => post_type[:id],
+                :name => post_type[:name],
+                :icon => post_type[:icon],
+                :text => "Show #{post_type[:name]}s.",
+              }
+            }
+          )
+        %></div><!-- btn-group -->
+
+        <div class='btn-group btn-group-sm'><%=
+          dropdown(
+            id:       "posts-filter-state",
+            css:      "posts-filter-menu",
+
+            name:     "State",
+            text:     "Filter by post state.",
+
+            icon:     "",
+            default:  "default",
+
+            items: [{
+              :id   => "default",
+              :name => "Default",
+              :text => "Show drafts and posted items.",
+            }, {
+              :type => "divider",
+            }].concat(states_menu_items),
+          )
+        %></div><!-- btn-group -->
+
+        <div class='btn-group btn-group-sm'><%=
+          dropdown(
+            id:       "posts-filter-site",
+            css:      "posts-filter-menu",
+
+            name:     "Site",
+            text:     "Filter by site.",
+
+            icon:     "",
+            default:  "all",
+
+            items: [{
+              :id   => "all",
+              :name => "All",
+              :text => "Show all sites.",
+            }, {
+              :type => "divider",
+            }].concat(sites_menu_items),
+          )
+        %></div><!-- btn-group -->
+
+        <div class='btn-group btn-group-sm'><%=
+          dropdown(
+            id:       "posts-filter-user",
+            css:      "posts-filter-menu",
+
+            name:     "Author",
+            text:     "Filter by author.",
+
+            icon:     "",
+            default:  "all",
+
+            items: [{
+              :id   => "all",
+              :name => "All",
+              :text => "Show all authors.",
+            }, {
+              :type => "divider",
+            }].concat(authors_menu_items),
+          )
+        %></div><!-- btn-group -->
+
+        <div class='btn-group btn-group-sm pull-right'>
+          <a
+            href='#'
+            class='btn btn-default search-toggle'
+            title='Toggle search field.'
+          >
+            <i class='fa fa-fw fa-search'></i>
+          </a><!-- btn-->
+        </div><!-- btn-group -->
+
+        <div class='btn-group btn-group-sm pull-right'>
+          <a
+            href='#'
+            id='posts-reload'
+            class='btn btn-default'
+            title='Reload posts'
+          >
+            <span class='loading'>
+              <i class='fa fa-fw fa-refresh'></i>
+            </span>
+
+            <span class='loading hidden'>
+              <i class='fa fa-fw fa-spinner fa-spin'></i>
+            </span>
+          </a><!-- btn -->
+        </div><!-- btn-group -->
+      </div><!-- btn-toolbar -->
+    </div><!-- panel-heading -->
+
+    <div class='panel-heading hidden search-toggle'>
+      <div class='input-group input-group-sm'>
+        <span class='input-group-addon'>
+          <i class='fa fa-search'></i>
+        </span>
+
+        <input
+          type='text'
+          id='posts-q'
+          class='form-control'
+          title='Enter search terms'
+        />
+      </div><!-- input-group -->
+    </div><!-- panel-heading -->
+
+    <table
+      id='posts'
+      class='table table-hover'
+    >
+      <thead>
+        <tr class='small'>
+          <th>&nbsp;</th>
+          <th>Name</th>
+          <th>Site</th>
+          <th>Slug</th>
+          <th>Author</th>
+          <th>Created</th>
+          <th>Posted</th>
+        </tr>
+      </thead>
+
+      <tbody>
+      </tbody>
+    </table><!-- table -->
+  </div><!-- panel -->
+</div><!-- tab-pane -->