add tabs to edit dialogs

1 files changed, 169 insertions, 105 deletions

diff --git a/src/views/dialogs/admin/blog-edit.ecr b/src/views/dialogs/admin/blog-edit.ecr
index bbe946f..53c0073 100644
--- a/src/views/dialogs/admin/blog-edit.ecr
+++ b/src/views/dialogs/admin/blog-edit.ecr
@@ -20,120 +20,184 @@
       </div><!-- modal-header -->
 
       <div class='modal-body loading-done'>
-        <div class='row'>
-          <div class='col-md-6'>
-            <div class='form-group'>
-              <label for='blog-edit-name'>
-                Title
-              </label>
-
-              <input
-                type='text'
-                id='blog-edit-name'
-                class='form-control post-name'
-                title='Enter title for blog entry.'
-                placeholder='Blog Entry Title'
-                aria-describedby='blog-edit-name-help'
-              />
-
-              <p id='blog-edit-name-help' class='help-block'>
-                Title of blog entry.
-              </p>
-            </div><!-- form-group -->
-          </div><!-- col-md-6 -->
-
-          <div class='col-md-6'>
-            <div class='form-group'>
-              <label for='blog-edit-slug'>
-                Slug
-              </label>
+        <ul class='nav nav-tabs nav-justified' role='tablist'><%=
+          tabs
+        %></ul><!-- nav -->
+
+        <div class='tab-content'>
+          <div
+            id='blog-edit-pane-content'
+            class='tab-pane active'
+            role='tabpanel'
+          >
+            <div class='row'>
+              <div class='col-md-6'>
+                <div class='form-group'>
+                  <label for='blog-edit-name'>
+                    Title
+                  </label>
+
+                  <input
+                    type='text'
+                    id='blog-edit-name'
+                    class='form-control post-name'
+                    title='Enter title for blog entry.'
+                    placeholder='Blog Entry Title'
+                    aria-describedby='blog-edit-name-help'
+                  />
+
+                  <p id='blog-edit-name-help' class='help-block'>
+                    Title of blog entry.
+                  </p>
+                </div><!-- form-group -->
+              </div><!-- col-md-6 -->
+
+              <div class='col-md-6'>
+                <div class='form-group'>
+                  <label for='blog-edit-slug'>
+                    Slug
+                  </label>
+
+                  <div class='input-group'>
+                    <input
+                      type='text'
+                      id='blog-edit-slug'
+                      class='form-control post-slug'
+                      disabled='disabled'
+                      title='Enter slug for blog entry.'
+                      placeholder='blog-post-title'
+                      aria-describedby='blog-edit-slug-help'
+                    />
+
+                    <a
+                      href='#'
+                      id='blog-edit-slug-lock'
+                      class='btn input-group-addon btn-default post-slug-lock'
+                      title='Toggle slug lock.'
+                      aria-describedby='page-edit-slug-help'
+                    >
+                      <i class='fa fa-lock'></i>
+                    </a><!-- slog-lock -->
+                  </div><!-- input-group -->
+
+                  <p id='blog-edit-slug-help' class='help-block'>
+                    Slug of blog entry.
+                  </p>
+                </div><!-- form-group -->
+              </div><!-- col-md-6 -->
+            </div><!-- row -->
 
-              <div class='input-group'>
-                <input
-                  type='text'
-                  id='blog-edit-slug'
-                  class='form-control post-slug'
-                  disabled='disabled'
-                  title='Enter slug for blog entry.'
-                  placeholder='blog-post-title'
-                  aria-describedby='blog-edit-slug-help'
-                />
-
-                <a
-                  href='#'
-                  id='blog-edit-slug-lock'
-                  class='btn input-group-addon btn-default post-slug-lock'
-                  title='Toggle slug lock.'
-                  aria-describedby='page-edit-slug-help'
-                >
-                  <i class='fa fa-lock'></i>
-                </a><!-- slog-lock -->
-              </div><!-- input-group -->
-
-              <p id='blog-edit-slug-help' class='help-block'>
-                Slug of blog entry.
-              </p>
-            </div><!-- form-group -->
-          </div><!-- col-md-6 -->
-        </div><!-- row -->
-
-        <div class='form-group'>
-          <label for='blog-edit-body'>
-            Body
-          </label>
-
-          <textarea
-            id='blog-edit-body'
-            class='form-control'
-            rows='15'
-            aria-describedby='blog-edit-body-help'
-          ></textarea>
-
-          <p id='blog-edit-body-help' class='help-block'>
-            Body of this blog entry.
-          </p>
-        </div><!-- form-group -->
-
-        <div class='row'>
-          <div class='col-md-6'>
             <div class='form-group'>
-              <label for='blog-edit-tags'>
-                Tags
+              <label for='blog-edit-body'>
+                Body
               </label>
 
-              <input
-                type='text'
-                id='blog-edit-tags'
+              <textarea
+                id='blog-edit-body'
                 class='form-control'
-                title='Enter tags for this blog entry.'
-                placeholder='Blog Entry Tags'
-                aria-describedby='blog-edit-tags-help'
-              />
+                rows='15'
+                aria-describedby='blog-edit-body-help'
+              ></textarea>
 
-              <p id='blog-edit-tags-help' class='help-block'>
-                Space-delimited list of tags.
+              <p id='blog-edit-body-help' class='help-block'>
+                Body of this blog entry.
               </p>
             </div><!-- form-group -->
-          </div><!-- col-md-6 -->
-
-          <div class='col-md-6'>
-            <label>
-              State
-            </label>
-
-            <div
-              id='blog-edit-state'
-              class='btn-group btn-group-justified state-buttons'
-            ><%=
-              state_buttons
-            %></div><!-- btn-group -->
-
-            <p class='help-block'>
-              Visibility of this blog post.
-            </p>
-          </div><!-- col-md-6 -->
-        </div><!-- row -->
 
+            <div class='row'>
+              <div class='col-md-6'>
+                <div class='form-group'>
+                  <label for='blog-edit-site'>
+                    Site
+                  </label>
+
+                  <select
+                    id='blog-edit-site'
+                    class='form-control'
+                    title='Select site for this blog entry.'
+                    aria-describedby='blog-edit-site-help'
+                  ><%=
+                    site_options
+                  %></select>
+
+                  <p id='blog-edit-site-help' class='help-block'>
+                    Site for this blog entry.
+                  </p>
+                </div><!-- form-group -->
+              </div><!-- col-md-6 -->
+
+              <div class='col-md-6'>
+                <label>
+                  State
+                </label>
+
+                <div
+                  id='blog-edit-state'
+                  class='btn-group btn-group-justified state-buttons'
+                ><%=
+                  state_buttons
+                %></div><!-- btn-group -->
+
+                <p class='help-block'>
+                  Visibility of this blog post.
+                </p>
+              </div><!-- col-md-6 -->
+            </div><!-- row -->
+          </div><!-- tab-pane -->
+
+          <div
+            id='blog-edit-pane-category'
+            class='tab-pane'
+            role='tabpanel'
+          >
+            <div class='row'>
+              <div class='col-md-12'>
+                <div class='form-group'>
+                  <label for='blog-edit-tags'>
+                    Tags
+                  </label>
+
+                  <input
+                    type='text'
+                    id='blog-edit-tags'
+                    class='form-control'
+                    title='Enter tags for this blog entry.'
+                    placeholder='Blog Entry Tags'
+                    aria-describedby='blog-edit-tags-help'
+                  />
+
+                  <p id='blog-edit-tags-help' class='help-block'>
+                    Space-delimited list of tags.
+                  </p>
+                </div><!-- form-group -->
+              </div><!-- col-md-12 -->
+            </div><!-- row -->
+
+            <p>
+              TODO: add categories here, maybe?
+            </p>
+          </div><!-- tab-pane -->
+
+          <div
+            id='blog-edit-pane-dates'
+            class='tab-pane'
+            role='tabpanel'
+          >
+            <p>
+              TODO: dates
+            </p>
+          </div><!-- tab-pane -->
+
+          <div
+            id='blog-edit-pane-media'
+            class='tab-pane'
+            role='tabpanel'
+          >
+            <p>
+              TODO: media
+            </p>
+          </div><!-- tab-pane -->
+        </div><!-- tab-content -->
       </div><!-- modal-body -->
 
       <div class='modal-footer'>