add tabs to edit dialogs

7 files changed, 751 insertions, 307 deletions

diff --git a/src/guff/views/dialogs/admin/blog-edit.cr b/src/guff/views/dialogs/admin/blog-edit.cr
index c45c1b5..ed5d11d 100644
--- a/src/guff/views/dialogs/admin/blog-edit.cr
+++ b/src/guff/views/dialogs/admin/blog-edit.cr
@@ -1,5 +1,35 @@
 require "./post-edit"
 
 class Guff::Views::Dialogs::Admin::BlogEdit < Guff::Views::Dialogs::Admin::PostEdit
+  TABS = [{
+    :id   => "content",
+    :css  => "active",
+    :icon => "fa-pencil",
+    :name => "Content",
+    :text => "View content tab.",
+  }, {
+    :id   => "category",
+    :css  => "",
+    :icon => "fa-list-ul",
+    :name => "Category",
+    :text => "View category tab.",
+  }, {
+    :id   => "dates",
+    :css  => "",
+    :icon => "fa-calendar-o",
+    :name => "Dates",
+    :text => "View dates tab.",
+  }, {
+    :id   => "media",
+    :css  => "",
+    :icon => "fa-video-camera",
+    :name => "Media",
+    :text => "View media tab.",
+  }]
+
+  private def tabs
+    super("blog-edit", TABS)
+  end
+
   ECR.def_to_s("src/views/dialogs/admin/blog-edit.ecr")
 end
diff --git a/src/guff/views/dialogs/admin/page-edit.cr b/src/guff/views/dialogs/admin/page-edit.cr
index 1df8b30..10ad2b8 100644
--- a/src/guff/views/dialogs/admin/page-edit.cr
+++ b/src/guff/views/dialogs/admin/page-edit.cr
@@ -1,6 +1,30 @@
 require "./post-edit"
 
 class Guff::Views::Dialogs::Admin::PageEdit < Guff::Views::Dialogs::Admin::PostEdit
+  TABS = [{
+    :id   => "content",
+    :css  => "active",
+    :icon => "fa-pencil",
+    :name => "Content",
+    :text => "View content tab.",
+  }, {
+    :id   => "theme",
+    :css  => "",
+    :icon => "fa-eye",
+    :name => "Theme",
+    :text => "View theme tab.",
+  }, {
+    :id   => "dates",
+    :css  => "",
+    :icon => "fa-calendar-o",
+    :name => "Dates",
+    :text => "View dates tab.",
+  }]
+
+  private def tabs
+    super("page-edit", TABS)
+  end
+
   OPTION = "<option value='%s'>%s</option>"
 
   private def theme_options
diff --git a/src/guff/views/dialogs/admin/post-edit.cr b/src/guff/views/dialogs/admin/post-edit.cr
index abaaa50..7398c17 100644
--- a/src/guff/views/dialogs/admin/post-edit.cr
+++ b/src/guff/views/dialogs/admin/post-edit.cr
@@ -22,4 +22,14 @@ class Guff::Views::Dialogs::Admin::PostEdit < Guff::Views::HTMLView
       end
     end
   end
+
+  OPTION = "<option value='%s'>%s</option>"
+
+  protected def site_options
+    @site_options ||= String.build do |io|
+      @context.models.site.get_sites.each do |row|
+        io << OPTION % %w{site_id name}.map { |key| h(row[key]) }
+      end
+    end
+  end
 end
diff --git a/src/guff/views/dialogs/admin/project-edit.cr b/src/guff/views/dialogs/admin/project-edit.cr
index 0a229b3..521fbbb 100644
--- a/src/guff/views/dialogs/admin/project-edit.cr
+++ b/src/guff/views/dialogs/admin/project-edit.cr
@@ -1,5 +1,53 @@
 require "./post-edit"
 
 class Guff::Views::Dialogs::Admin::ProjectEdit < Guff::Views::Dialogs::Admin::PostEdit
+  TABS = [{
+    :id   => "content",
+    :css  => "active",
+    :icon => "fa-pencil",
+    :name => "Content",
+    :text => "View content tab.",
+  }, {
+    :id   => "repo",
+    :css  => "",
+    :icon => "fa-code-fork",
+    :name => "Repository",
+    :text => "View repository tab.",
+  }, {
+    :id   => "releases",
+    :css  => "hidden",
+    :icon => "fa-code-fork",
+    :name => "Releases",
+    :text => "View releases tab.",
+  }, {
+    :id   => "dates",
+    :css  => "hidden",
+    :icon => "fa-calendar-o",
+    :name => "Dates",
+    :text => "View dates tab.",
+  }]
+
+  private def tabs
+    super("project-edit", TABS)
+  end
+
+  REPO_TABS = [{
+    :id   => "releases",
+    :css  => "active",
+    :icon => "fa-code-fork",
+    :name => "Releases",
+    :text => "View releases.",
+  }, {
+    :id   => "update-log",
+    :css  => "",
+    :icon => "fa-list-ul",
+    :name => "Update Log",
+    :text => "View update log.",
+  }]
+
+  private def repo_tabs
+    tabs("project-edit-repo", REPO_TABS)
+  end
+
   ECR.def_to_s("src/views/dialogs/admin/project-edit.ecr")
 end
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'>
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'>
diff --git a/src/views/dialogs/admin/project-edit.ecr b/src/views/dialogs/admin/project-edit.ecr
index 59c89d4..1ca6e99 100644
--- a/src/views/dialogs/admin/project-edit.ecr
+++ b/src/views/dialogs/admin/project-edit.ecr
@@ -34,119 +34,296 @@
       </div><!-- modal-body -->
 
       <div class='modal-body loading-done'>
-        <div class='row'>
-          <div class='col-md-6'>
-            <div class='form-group'>
-              <label for='project-edit-name'>
-                Name
-              </label>
+        <ul class='nav nav-tabs nav-justified' role='tablist'><%=
+          tabs
+        %></ul><!-- nav -->
 
-              <input
-                type='text'
-                id='project-edit-name'
-                class='form-control post-name'
-                title='Enter project name.'
-                placeholder='Project Name'
-                aria-describedby='project-edit-name-help'
-              />
-
-              <p id='project-edit-name-help' class='help-block'>
-                Name of project.
-              </p>
-            </div><!-- form-group -->
-          </div><!-- col-md-6 -->
+        <div class='tab-content'>
+          <div
+            id='project-edit-pane-content'
+            class='tab-pane active'
+            role='tabpanel'
+          >
+            <div class='row'>
+              <div class='col-md-6'>
+                <div class='form-group'>
+                  <label for='project-edit-name'>
+                    Name
+                  </label>
 
-          <div class='col-md-6'>
-            <div class='form-group'>
-              <label for='project-edit-slug'>
-                Slug
-              </label>
+                  <input
+                    type='text'
+                    id='project-edit-name'
+                    class='form-control post-name'
+                    title='Enter project name.'
+                    placeholder='Project Name'
+                    aria-describedby='project-edit-name-help'
+                  />
+
+                  <p id='project-edit-name-help' class='help-block'>
+                    Name of project.
+                  </p>
+                </div><!-- form-group -->
+              </div><!-- col-md-6 -->
+
+              <div class='col-md-6'>
+                <div class='form-group'>
+                  <label for='project-edit-slug'>
+                    Slug
+                  </label>
+
+                  <div class='input-group'>
+                    <input
+                      type='text'
+                      id='project-edit-slug'
+                      class='form-control post-slug'
+                      title='Enter project slug.'
+                      disabled='disabled'
+                      placeholder='project-name'
+                      aria-describedby='project-edit-slug-help'
+                    />
+
+                    <a
+                      href='#'
+                      id='project-edit-slug-lock'
+                      class='btn input-group-addon btn-default post-slug-lock'
+                      title='Toggle slug lock.'
+                    >
+                      <i class='fa fa-lock'></i>
+                    </a><!-- slog-lock -->
+                  </div><!-- input-group -->
+
+                  <p id='project-edit-slug-help' class='help-block'>
+                    URL path component of project.
+                  </p>
+                </div><!-- form-group -->
+              </div><!-- col-md-6 -->
+            </div><!-- row -->
 
-              <div class='input-group'>
-                <input
-                  type='text'
-                  id='project-edit-slug'
-                  class='form-control post-slug'
-                  title='Enter project slug.'
-                  disabled='disabled'
-                  placeholder='project-name'
-                  aria-describedby='project-edit-slug-help'
-                />
-
-                <a
-                  href='#'
-                  id='project-edit-slug-lock'
-                  class='btn input-group-addon btn-default post-slug-lock'
-                  title='Toggle slug lock.'
-                >
-                  <i class='fa fa-lock'></i>
-                </a><!-- slog-lock -->
-              </div><!-- input-group -->
-
-              <p id='project-edit-slug-help' class='help-block'>
-                URL path component of project.
-              </p>
-            </div><!-- form-group -->
-          </div><!-- col-md-6 -->
-        </div><!-- row -->
-
-        <div class='form-group'>
-          <label for='project-edit-body'>
-            Description
-          </label>
-
-          <textarea
-            id='project-edit-body'
-            class='form-control'
-            title='Description of this project.'
-            rows='15'
-            aria-describedby='project-edit-body-help'
-          ></textarea>
-
-          <p id='project-edit-body-help' class='help-block'>
-            Description of this project.
-          </p>
-        </div><!-- form-group -->
-
-        <div class='row'>
-          <div class='col-md-6'>
             <div class='form-group'>
-              <label for='project-edit-repo'>
-                Git Repository
+              <label for='project-edit-body'>
+                Description
               </label>
 
-              <input
-                type='text'
-                id='project-edit-repo'
+              <textarea
+                id='project-edit-body'
                 class='form-control'
-                title='Enter project Git repository URL.'
-                placeholder='https://example.com/git/example-project.git'
-                aria-describedby='project-edit-repo-help'
-              />
+                title='Description of this project.'
+                rows='15'
+                aria-describedby='project-edit-body-help'
+              ></textarea>
 
-              <p id='project-edit-repo-help' class='help-block'>
-                URL of Git repository for this project.
+              <p id='project-edit-body-help' class='help-block'>
+                Description of this project.
               </p>
             </div><!-- form-group -->
-          </div><!-- col-md-6 -->
-
-          <div class='col-md-6'>
-            <label>
-              State
-            </label>
-
-            <div
-              id='project-edit-state'
-              class='btn-group btn-group-justified state-buttons'
-            ><%=
-              state_buttons
-            %></div><!-- btn-group -->
-
-            <p class='help-block'>
-              Visibility state of this project.
+
+            <div class='row'>
+              <div class='col-md-6'>
+                <label for='project-edit-site'>
+                  Site
+                </label>
+
+                <select
+                  id='project-edit-site'
+                  class='form-control'
+                  title='Choose site for this project.'
+                  aria-describedby='project-edit-site-help'
+                ><%=
+                  site_options
+                %></select>
+
+                <p id='project-edit-site-help' class='help-block'>
+                  Site for this project.
+                </p>
+              </div><!-- col-md-6 -->
+
+              <div class='col-md-6'>
+                <label>
+                  State
+                </label>
+
+                <div
+                  id='project-edit-state'
+                  class='btn-group btn-group-justified state-buttons'
+                ><%=
+                  state_buttons
+                %></div><!-- btn-group -->
+
+                <p class='help-block'>
+                  Visibility state of this project.
+                </p>
+              </div><!-- col-md-6 -->
+            </div><!-- row -->
+          </div><!-- tab-pane -->
+
+          <div
+            id='project-edit-pane-repo'
+            class='tab-pane'
+            role='tabpanel'
+          >
+            <div class='row'>
+              <div class='col-md-12'>
+                <div class='form-group'>
+                  <label for='project-edit-repo'>
+                    Git Repository
+                  </label>
+
+                  <input
+                    type='text'
+                    id='project-edit-repo'
+                    class='form-control'
+                    title='Enter project Git repository URL.'
+                    placeholder='https://example.com/git/example-project.git'
+                    aria-describedby='project-edit-repo-help'
+                  />
+
+                  <p id='project-edit-repo-help' class='help-block'>
+                    URL of Git repository for this project.
+                  </p>
+                </div><!-- form-group -->
+              </div><!-- col-md-12 -->
+            </div><!-- row -->
+
+            <div class='row'>
+              <div class='col-md-3'>
+                <ul class='nav nav-pills nav-stacked' role='tablist'><%=
+                  repo_tabs
+                %></ul><!-- nav -->
+              </div><!-- col-md-3 -->
+
+              <div class='col-md-9'>
+                <div class='tab-content'>
+                  <div
+                    id='project-edit-repo-pane-releases'
+                    class='tab-pane active'
+                    role='tabpanel'
+                  >
+                    <div class='panel panel-default'>
+                      <div class='panel-heading hidden'>
+                        <b>
+                          Releases
+                        </b>
+
+                        <a
+                          href='#'
+                          id='project-edit-releases-reload'
+                          class='btn btn-default btn-xs pull-right'
+                          title='Reload list of releases.'
+                        >
+                          <i class='fa fa-fw fa-refresh'></i>
+                        </a>
+                      </div><!-- panel-heading -->
+
+                      <div
+                        id='project-edit-releases'
+                        class='list-group'
+                        style='height: 200px;'
+                      >
+                      </div><!-- list-group -->
+                    </div><!-- panel -->
+                  </div><!-- tab-pane -->
+
+                  <div
+                    id='project-edit-repo-pane-update-log'
+                    class='tab-pane'
+                    role='tabpanel'
+                  >
+                    <div class='panel panel-default'>
+                      <div class='panel-heading hidden'>
+                        <b>
+                          Update Log
+                        </b>
+
+                        <a
+                          href='#'
+                          id='project-edit-update-log-reload'
+                          class='btn btn-default btn-xs pull-right'
+                          title='Refresh update log.'
+                        >
+                          <i class='fa fa-fw fa-refresh'></i>
+                        </a>
+                      </div><!-- panel-heading -->
+
+                      <div
+                        id='project-edit-update-log'
+                        class='list-group'
+                        style='height: 200px;'
+                      >
+                      </div><!-- list-group -->
+                    </div><!-- panel -->
+                  </div><!-- tab-pane -->
+                </div><!-- tab-content -->
+              </div><!-- col-md-9 -->
+            </div><!-- row -->
+
+            <div class='row'>
+              <div class='col-md-6'>
+                <div class='form-group'>
+                  <label for='project-edit-tag-prefix'>
+                    Tag Prefix
+                  </label>
+
+                  <input
+                    type='text'
+                    id='project-edit-tag-prefix'
+                    class='form-control'
+                    title='Enter project tag prefix.'
+                    placeholder='example-project-v'
+                    aria-describedby='project-edit-tag-prefix-help'
+                  />
+
+                  <p id='project-edit-tag-prefix-help' class='help-block'>
+                    Filter to remove prefix from release tags.
+                  </p>
+                </div><!-- form-group -->
+              </div><!-- col-md-6 -->
+
+              <div class='col-md-6'>
+                <div class='form-group'>
+                  <label for='project-edit-secret'>
+                    Webhook Secret
+                  </label>
+
+                  <div class='input-group'>
+                    <input
+                      type='text'
+                      id='project-edit-secret'
+                      class='form-control'
+                      title='Enter project webhook secret.'
+                      placeholder=''
+                      aria-describedby='project-edit-secret-help'
+                    />
+
+                    <a
+                      href='#'
+                      id='project-edit-secret-generate'
+                      class='btn btn-default input-group-addon'
+                      title='Generate new Webhook Secret.'
+                    >
+                      <i class='fa fa-gear'></i>
+                      Generate
+                    </a>
+                  </div><!-- input-group -->
+
+                  <p id='project-edit-secret-help' class='help-block'>
+                    Secret used for webhooks.
+                  </p>
+                </div><!-- form-group -->
+              </div><!-- col-md-6 -->
+            </div><!-- row -->
+          </div><!-- tab-pane -->
+
+          <div
+            id='project-edit-pane-dates'
+            class='tab-pane'
+            role='tabpanel'
+          >
+            <p>
+              TODO: dates tab
             </p>
-          </div><!-- col-md-6 -->
-        </div><!-- row -->
+          </div><!-- tab-pane -->
+        </div><!-- tab-content -->
       </div><!-- modal-body -->
 
       <div class='modal-footer'>