add tabs to edit dialogs

1 files changed, 191 insertions, 100 deletions

diff --git a/src/views/dialogs/admin/page-edit.ecr b/src/views/dialogs/admin/page-edit.ecr
index c0b30e8..da1d3c2 100644
--- a/src/views/dialogs/admin/page-edit.ecr
+++ b/src/views/dialogs/admin/page-edit.ecr
@@ -34,115 +34,206 @@
       </div><!-- modal-body -->
 
       <div class='modal-body loading-done'>
-        <div class='row'>
-          <div class='col-md-6'>
-            <div class='form-group'>
-              <label for='page-edit-name'>
-                Title
-              </label>
+        <ul class='nav nav-tabs nav-justified' role='tablist'><%=
+          tabs
+        %></ul><!-- nav -->
 
-              <input
-                type='text'
-                id='page-edit-name'
-                class='form-control post-name'
-                title='Enter title for page.'
-                placeholder='Page Title'
-                aria-describedby='page-edit-name-help'
-              />
-
-              <p id='page-edit-name-help' class='help-block'>
-                Title of page.
-              </p>
-            </div><!-- form-group -->
-          </div><!-- col-md-6 -->
+        <div class='tab-content'>
+          <div
+            id='page-edit-pane-content'
+            class='tab-pane active'
+            role='tabpanel'
+          >
+            <div class='row'>
+              <div class='col-md-6'>
+                <div class='form-group'>
+                  <label for='page-edit-name'>
+                    Title
+                  </label>
+
+                  <input
+                    type='text'
+                    id='page-edit-name'
+                    class='form-control post-name'
+                    title='Enter title for page.'
+                    placeholder='Page Title'
+                    aria-describedby='page-edit-name-help'
+                  />
+
+                  <p id='page-edit-name-help' class='help-block'>
+                    Title of page.
+                  </p>
+                </div><!-- form-group -->
+              </div><!-- col-md-6 -->
+
+              <div class='col-md-6'>
+                <div class='form-group'>
+                  <label for='page-edit-slug'>
+                    Path
+                  </label>
+
+                  <div class='input-group'>
+                    <input
+                      type='text'
+                      id='page-edit-slug'
+                      class='form-control post-slug'
+                      disabled='disabled'
+                      title='Enter path for this page.'
+                      placeholder='page-title'
+                    />
+
+                    <a
+                      href='#'
+                      id='page-edit-slug-lock'
+                      class='btn input-group-addon btn-default post-slug-lock'
+                      title='Toggle path lock.'
+                      aria-describedby='page-edit-slug-help'
+                    >
+                      <i class='fa fa-lock'></i>
+                    </a><!-- slog-lock -->
+                  </div><!-- input-group -->
+
+                  <p id='page-edit-slug-help' class='help-block'>
+                    URL path of page.
+                  </p>
+                </div><!-- form-group -->
+              </div><!-- col-md-6 -->
+            </div><!-- row -->
 
-          <div class='col-md-6'>
             <div class='form-group'>
-              <label for='page-edit-slug'>
-                Path
+              <label for='page-edit-body'>
+                Body
               </label>
 
-              <div class='input-group'>
-                <input
-                  type='text'
-                  id='page-edit-slug'
-                  class='form-control post-slug'
-                  disabled='disabled'
-                  title='Enter path for this page.'
-                  placeholder='page-title'
-                />
-
-                <a
-                  href='#'
-                  id='page-edit-slug-lock'
-                  class='btn input-group-addon btn-default post-slug-lock'
-                  title='Toggle path lock.'
-                  aria-describedby='page-edit-slug-help'
-                >
-                  <i class='fa fa-lock'></i>
-                </a><!-- slog-lock -->
-              </div><!-- input-group -->
-
-              <p id='page-edit-slug-help' class='help-block'>
-                URL path of page.
+              <textarea
+                id='page-edit-body'
+                class='form-control'
+                rows='15'
+                aria-describedby='page-edit-body-help'
+              ></textarea>
+
+              <p id='page-edit-body-help' class='help-block'>
+                Body of this page.
               </p>
             </div><!-- form-group -->
-          </div><!-- col-md-6 -->
-        </div><!-- row -->
-
-        <div class='form-group'>
-          <label for='page-edit-body'>
-            Body
-          </label>
-
-          <textarea
-            id='page-edit-body'
-            class='form-control'
-            rows='15'
-            aria-describedby='page-edit-body-help'
-          ></textarea>
-
-          <p id='page-edit-body-help' class='help-block'>
-            Body of this page.
-          </p>
-        </div><!-- form-group -->
-
-        <div class='row'>
-          <div class='col-md-6'>
-            <label for='page-edit-theme'>
-              Theme
-            </label>
-
-            <select
-              id='page-edit-theme'
-              class='form-control'
-              title='Choose theme for this page.'
-            ><%=
-              theme_options
-            %></select>
-
-            <p class='help-block'>
-              Theme for this page.
+
+            <div class='row'>
+              <div class='col-md-6'>
+                <label for='page-edit-site'>
+                  Site
+                </label>
+
+                <select
+                  id='page-edit-site'
+                  class='form-control'
+                  title='Choose site for this page.'
+                  aria-describedby='page-edit-site-help'
+                ><%=
+                  site_options
+                %></select>
+
+                <p id='page-edit-site-help' class='help-block'>
+                  Site for this page.
+                </p>
+              </div><!-- col-md-6 -->
+
+              <div class='col-md-6'>
+                <label>
+                  State
+                </label>
+
+                <div
+                  id='page-edit-state'
+                  class='btn-group btn-group-justified state-buttons'
+                ><%=
+                  state_buttons
+                %></div><!-- btn-group -->
+
+                <p class='help-block'>
+                  Visibility state of this page.
+                </p>
+              </div><!-- col-md-6 -->
+            </div><!-- row -->
+          </div><!-- tab-pane -->
+
+          <div
+            id='page-edit-pane-dates'
+            class='tab-pane'
+            role='tabpanel'
+          >
+            <p>
+              TODO: dates tab
             </p>
-          </div><!-- col-md-6 -->
-
-          <div class='col-md-6'>
-            <label>
-              State
-            </label>
-
-            <div
-              id='page-edit-state'
-              class='btn-group btn-group-justified state-buttons'
-            ><%=
-              state_buttons
-            %></div><!-- btn-group -->
-
-            <p class='help-block'>
-              Visibility state of this page.
+          </div><!-- tab-pane -->
+
+          <div
+            id='page-edit-pane-theme'
+            class='tab-pane'
+            role='tabpanel'
+          >
+            <p class='hidden'>
+              This tab allows you to edit the theme and add custom
+              styles and scripts to the selected page.
             </p>
-          </div><!-- col-md-6 -->
-        </div><!-- row -->
+
+            <div class='row'>
+              <div class='col-md-12'>
+                <label for='page-edit-theme'>
+                  Theme
+                </label>
+
+                <select
+                  id='page-edit-theme'
+                  class='form-control'
+                  title='Choose theme for this page.'
+                  aria-describedby='page-edit-theme-help'
+                ><%=
+                  theme_options
+                %></select>
+
+                <p id='page-edit-theme-help' class='help-block'>
+                  Theme for this page.
+                </p>
+              </div><!-- col-md-6 -->
+            </div><!-- row -->
+
+            <div class='row'>
+              <div class='col-md-6'>
+                <label for='page-edit-styles'>
+                  Styles
+                </label>
+
+                <textarea
+                  id='page-edit-styles'
+                  class='form-control'
+                  title='Space-delimited list of styles for this page.'
+                  aria-describedby='page-edit-styles-help'
+                ></textarea>
+
+                <p id='page-edit-styles-help' class='help-block'>
+                  Space-delimited list of styles for this page.
+                </p>
+              </div><!-- col-md-6 -->
+
+              <div class='col-md-6'>
+                <label for='page-edit-scripts'>
+                  Scripts
+                </label>
+
+                <textarea
+                  id='page-edit-scripts'
+                  class='form-control'
+                  title='Space-delimited list of scripts for this page.'
+                  aria-describedby='page-edit-scripts-help'
+                ></textarea>
+
+                <p id='page-edit-scripts-help' class='help-block'>
+                  Space-delimited list of scripts for this page.
+                </p>
+              </div><!-- col-md-6 -->
+            </div><!-- row -->
+          </div><!-- tab-pane -->
+        </div><!-- tab-content -->
       </div><!-- modal-body -->
 
       <div class='modal-footer'>