Finish new repo settings page

8 files changed, 248 insertions, 290 deletions

diff --git a/templates/repo/create.tmpl b/templates/repo/create.tmpl
index a144ccbc36..a4b54fef2e 100644
--- a/templates/repo/create.tmpl
+++ b/templates/repo/create.tmpl
@@ -36,20 +36,20 @@
             </div>
             <div class="field">
                 <label class="req" for="repo-name">{{.i18n.Tr "repo.repo_name"}}</label>
-                <input class="ipt ipt-radius {{if .Err_RepoName}}ipt-error{{end}}" id="repo-name" name="repo_name" type="text" value="{{.repo_name}}" required />
+                <input class="ipt ipt-large ipt-radius {{if .Err_RepoName}}ipt-error{{end}}" id="repo-name" name="repo_name" type="text" value="{{.repo_name}}" required />
                 <span class="form-label"></span>
                 <span class="help">{{.i18n.Tr "repo.repo_name_helper" | Str2html}}</span>
             </div>
-            <p class="field">
+            <div class="field">
                 <label for="visibility">{{.i18n.Tr "repo.visibility"}}</label>
                 <input class="ipt-chk" id="visibility" name="private" type="checkbox" {{if .private}}checked{{end}} />
                 <span>{{.i18n.Tr "repo.visiblity_helper" | Str2html}}</span>
-            </p>
+            </div>
             <div class="field clear">
                 <label class="left" for="desc">{{.i18n.Tr "repo.repo_desc"}}</label>
-                <textarea class="ipt ipt-radius {{if .Err_Description}}ipt-error{{end}}" id="desc" name="desc">{{.desc}}</textarea>
+                <textarea class="ipt ipt-large ipt-radius {{if .Err_Description}}ipt-error{{end}}" id="desc" name="desc">{{.desc}}</textarea>
             </div>
-            <p class="field">
+            <div class="field">
                 <label for="lang">{{.i18n.Tr "repo.repo_lang"}}</label>
                 <select id="lang" name="gitignore">
                     <option>{{.i18n.Tr "repo.repo_lang_helper"}}</option>
@@ -64,17 +64,17 @@
                     <option value="{{.}}" {{if eq . $.license}}selected{{end}}>{{.}}</option>
                     {{end}}
                 </select>
-            </p>
-            <p class="field">
+            </div>
+            <div class="field">
                 <label for="init-readme"></label>
                 <input class="ipt-chk" id="init-readme" name="init_readme" type="checkbox" {{if .init_readme}}checked{{end}} />
                 <strong>{{.i18n.Tr "repo.init_readme"}}</strong>
-            </p>
-            <p class="field">
+            </div>
+            <div class="field">
                 <label for="repo-create-submit"></label>
                 <button class="btn btn-large btn-blue btn-radius" id="repo-create-submit">{{.i18n.Tr "repo.create_repo"}}</button>
                 <a class="btn btn-small btn-gray btn-radius" id="repo-create-cancel" href="/"><strong>{{.i18n.Tr "cancel"}}</strong></a>
-            </p>
+            </div>
         </div>
     </form>
 </div>
diff --git a/templates/repo/header.tmpl b/templates/repo/header.tmpl
new file mode 100644
index 0000000000..a789d13fee
--- /dev/null
+++ b/templates/repo/header.tmpl
@@ -0,0 +1,57 @@
+<div id="repo-header" class="clear">
+    <div class="container clear">
+        <h1 id="repo-header-name" class="left public">
+            <i class="mega-octicon octicon-{{if .Repository.IsPrivate}}lock{{else}}repo{{end}}"></i>
+            <a class="author" href="/{{.Owner.Name}}">{{.Owner.Name}}</a>
+            <span class="divider">/</span>
+            <a class="repo text-bold" href="{{.RepoLink}}">{{.Repository.Name}}</a>
+        </h1>
+        <ul id="repo-header-meta" class="right menu menu-line">
+            <li id="repo-header-download" class="inline-block down drop">
+                <a id="repo-header-download-btn" href="#">
+                    <button class="btn btn-black text-bold btn-radius">
+                        <i class="octicon octicon-cloud-download"></i>
+                    </button>
+                </a>
+                <div id="repo-header-download-drop" class="drop-down">
+                    <div id="repo-clone" class="clear">
+                        <button id="repo-clone-ssh" class="btn btn-blue current left left btn-left-radius">SSH</button>
+                        <button id="repo-clone-https" class="btn btn-gray left">HTTPS</button>
+                        <input id="repo-clone-url" type="text" class="ipt ipt-disabled left" value="{{.CloneLink.SSH}}" />
+                        <button id="repo-clone-copy" class="btn btn-black left btn-right-radius">Copy</button>
+                        <p class="text-center" id="repo-clone-help">Need help cloning? Visit <a target="_blank" href="http://git-scm.com/book/en/Git-Basics-Getting-a-Git-Repository">Help</a>!</p>
+                        <hr/>
+                        <div class="text-center" id="repo-clone-zip">
+                            <a class="btn btn-green btn-radius" href="{{.RepoLink}}/archive/{{.BranchName}}.zip"><i class="octicon octicon-file-zip"></i>ZIP</a>
+                            <a class="btn btn-green btn-radius" href="{{.RepoLink}}/archive/{{.BranchName}}.tar.gz"><i class="octicon octicon-file-zip"></i>TAR.GZ</a>
+                        </div>
+                    </div>
+                </div>
+            </li>
+            <li id="repo-header-watch">
+                <a id="repo-header-watch-btn" href="#">
+                    <button class="btn btn-gray text-bold btn-radius">
+                        <i class="octicon octicon-eye-watch"></i>{{if .IsWatchingRepo}}Unwatch{{else}}Watch{{end}}
+                        <span class="num">{{.Repository.NumWatches}}</span>
+                    </button>
+                </a>
+            </li>
+            <li id="repo-header-star">
+                <a id="repo-header-star-btn" href="#">
+                    <button class="btn btn-gray text-bold btn-radius">
+                        <i class="octicon octicon-star"></i>Star
+                        <span class="num">{{.Repository.NumStars}}</span>
+                    </button>
+                </a>
+            </li>
+            <li id="repo-header-fork">
+                <a id="repo-header-fork-btn" href="#">
+                    <button class="btn btn-gray text-bold btn-radius">
+                        <i class="octicon octicon-repo-forked"></i>Fork
+                        <span class="num">{{.Repository.NumForks}}</span>
+                    </button>
+                </a>
+            </li>
+        </ul>
+    </div>
+</div>
\ No newline at end of file
diff --git a/templates/repo/home.tmpl b/templates/repo/home.tmpl
index 5f16a7baf0..266d827547 100644
--- a/templates/repo/home.tmpl
+++ b/templates/repo/home.tmpl
@@ -1,63 +1,7 @@
 {{template "ng/base/head" .}}
 {{template "ng/base/header" .}}
 <div id="repo-wrapper">
-    <div id="repo-header" class="clear">
-        <div class="container clear">
-            <h1 id="repo-header-name" class="left public">
-                <i class="mega-octicon octicon-{{if .Repository.IsPrivate}}lock{{else}}repo{{end}}"></i>
-                <a class="author" href="/{{.Owner.Name}}">{{.Owner.Name}}</a>
-                <span class="divider">/</span>
-                <a class="repo text-bold" href="{{.RepoLink}}">{{.Repository.Name}}</a>
-            </h1>
-            <ul id="repo-header-meta" class="right menu menu-line">
-                <li id="repo-header-download" class="inline-block down drop">
-                    <a id="repo-header-download-btn" href="#">
-                        <button class="btn btn-black text-bold btn-radius">
-                            <i class="octicon octicon-cloud-download"></i>
-                        </button>
-                    </a>
-                    <div id="repo-header-download-drop" class="drop-down">
-                        <div id="repo-clone" class="clear">
-                            <button id="repo-clone-ssh" class="btn btn-blue current left left btn-left-radius">SSH</button>
-                            <button id="repo-clone-https" class="btn btn-gray left">HTTPS</button>
-                            <input id="repo-clone-url" type="text" class="ipt ipt-disabled left" value="{{.CloneLink.SSH}}" />
-                            <button id="repo-clone-copy" class="btn btn-black left btn-right-radius">Copy</button>
-                            <p class="text-center" id="repo-clone-help">Need help cloning? Visit <a href="#">Help</a>!</p>
-                            <hr/>
-                            <div class="text-center" id="repo-clone-zip">
-                                <a class="btn btn-green btn-radius" href="{{.RepoLink}}/archive/{{.BranchName}}.zip"><i class="octicon octicon-file-zip"></i>ZIP</a>
-                                <a class="btn btn-green btn-radius" href="{{.RepoLink}}/archive/{{.BranchName}}.tar.gz"><i class="octicon octicon-file-zip"></i>TAR.GZ</a>
-                            </div>
-                        </div>
-                    </div>
-                </li>
-                <li id="repo-header-watch">
-                    <a id="repo-header-watch-btn" href="#">
-                        <button class="btn btn-gray text-bold btn-radius">
-                            <i class="octicon octicon-eye-watch"></i>{{if .IsWatchingRepo}}Unwatch{{else}}Watch{{end}}
-                            <span class="num">{{.Repository.NumWatches}}</span>
-                        </button>
-                    </a>
-                </li>
-                <li id="repo-header-star">
-                    <a id="repo-header-star-btn" href="#">
-                        <button class="btn btn-gray text-bold btn-radius">
-                            <i class="octicon octicon-star"></i>Star
-                            <span class="num">{{.Repository.NumStars}}</span>
-                        </button>
-                    </a>
-                </li>
-                <li id="repo-header-fork">
-                    <a id="repo-header-fork-btn" href="#">
-                        <button class="btn btn-gray text-bold btn-radius">
-                            <i class="octicon octicon-repo-forked"></i>Fork
-                            <span class="num">{{.Repository.NumForks}}</span>
-                        </button>
-                    </a>
-                </li>
-            </ul>
-        </div>
-    </div>
+    {{template "repo/header" .}}
     <div id="repo-content" class="clear container">
         <div id="repo-main" class="left grid-4-5">
             <p id="repo-desc">
@@ -128,34 +72,7 @@
                 {{template "repo/view_list" .}}
             {{end}}
         </div>
-        <div id="repo-sidebar" class="right grid-1-5">
-            <ul class="menu menu-vertical" id="repo-sidebar-nav">
-                <li>
-                    <a class="radius" href="{{.RepoLink}}/issues"><i class="octicon octicon-issue-opened"></i>Issues<span class="num right label label-blue label-radius">{{.Repository.NumOpenIssues}}</span></a>
-                </li>
-                <li>
-                    <a class="radius" href="{{.RepoLink}}/pulls"><i class="octicon octicon-git-pull-request"></i>Pull Requests<span class="num right label label-blue label-radius">{{.Repository.NumOpenPulls}}</span></a>
-                </li>
-                <li class="border-bottom"></li>
-                <li class="head">{{if .IsViewBranch}}{{.BranchName}}{{else}}{{ShortSha .BranchName}}{{end}}</li>
-                <li>
-                    <a class="radius" href="{{.RepoLink}}/commits/{{.BranchName}}"><i class="octicon octicon-history"></i>Commits <span class="num right label label-gray label-radius">{{.CommitsCount}}</span></a>
-                </li>
-                <li>
-                    <a class="radius" href="{{.RepoLink}}/branches"><i class="octicon octicon-git-branch"></i>Branches<span class="num right label label-gray label-radius">{{.BrancheCount}}</span></a>
-                </li>
-                <li>
-                    <a class="radius" href="{{.RepoLink}}/releases"><i class="octicon octicon-tag"></i>Releases <span class="num right label label-gray label-radius">{{.Repository.NumTags}}</span></a>
-                </li>
-                <li>
-                    <a class="radius" href="#"><i class="octicon octicon-organization"></i>contributors <span class="num right label label-gray label-radius">43</span></a>
-                </li>
-                <li class="border-bottom"></li>
-                <li>
-                    <a class="radius" href="{{.RepoLink}}/settings"><i class="octicon octicon-tools"></i>settings</a>
-                </li>
-            </ul>
-        </div>
+        {{template "repo/sidebar" .}}
     </div>
 </div>
 {{template "ng/base/footer" .}}
\ No newline at end of file
diff --git a/templates/repo/migrate.tmpl b/templates/repo/migrate.tmpl
index 7215960714..45465178bd 100644
--- a/templates/repo/migrate.tmpl
+++ b/templates/repo/migrate.tmpl
@@ -8,7 +8,7 @@
             {{template "ng/base/alert" .}}
             <div class="field">
                 <label class="req" for="url">HTTPS URL</label>
-                <input class="ipt ipt-radius {{if .Err_HttpsUrl}}ipt-error{{end}}" id="url" name="url" type="text" value="{{.url}}" required />
+                <input class="ipt ipt-large ipt-radius {{if .Err_HttpsUrl}}ipt-error{{end}}" id="url" name="url" type="text" value="{{.url}}" required />
             </div>
             <div class="field">
                 <span class="form-label"></span>
@@ -16,11 +16,11 @@
                 <div id="repo-migrate-auth" {{if not .Err_Auth}}class="hide"{{end}}>
                     <div class="field">
                         <label for="auth_username">{{.i18n.Tr "username"}}</label>
-                        <input class="ipt ipt-radius {{if .Err_Auth}}ipt-error{{end}}" id="auth_username" name="auth_username" type="text" value="{{.auth_username}}"  />
+                        <input class="ipt ipt-large ipt-radius {{if .Err_Auth}}ipt-error{{end}}" id="auth_username" name="auth_username" type="text" value="{{.auth_username}}"  />
                     </div>
                     <div class="field">
                         <label for="auth_password">{{.i18n.Tr "password"}}</label>
-                        <input class="ipt ipt-radius {{if .Err_Auth}}ipt-error{{end}}" id="auth_password" name="auth_password" type="text" value="{{.auth_password}}"  />
+                        <input class="ipt ipt-large ipt-radius {{if .Err_Auth}}ipt-error{{end}}" id="auth_password" name="auth_password" type="text" value="{{.auth_password}}"  />
                     </div>
                 </div>
             </div>
@@ -55,27 +55,27 @@
             </div>
             <div class="field">
                 <label class="req" for="repo-name">{{.i18n.Tr "repo.repo_name"}}</label>
-                <input class="ipt ipt-radius {{if .Err_RepoName}}ipt-error{{end}}" id="repo-name" name="repo_name" type="text" value="{{.repo_name}}" required />
+                <input class="ipt ipt-large ipt-radius {{if .Err_RepoName}}ipt-error{{end}}" id="repo-name" name="repo_name" type="text" value="{{.repo_name}}" required />
             </div>
-            <p class="field">
+            <div class="field">
                 <label for="visibility">{{.i18n.Tr "repo.visibility"}}</label>
                 <input class="ipt-chk" id="visibility" name="private" type="checkbox" {{if .private}}checked{{end}} />
                 <span>{{.i18n.Tr "repo.visiblity_helper" | Str2html}}</span>
-            </p>
-            <p class="field">
-                <label for="visibility">{{.i18n.Tr "repo.migrate_type"}}</label>
-                <input class="ipt-chk" id="visibility" name="mirror" type="checkbox" {{if .mirror}}checked{{end}} />
+            </div>
+            <div class="field">
+                <label for="migrate_type">{{.i18n.Tr "repo.migrate_type"}}</label>
+                <input class="ipt-chk" id="migrate_type" name="mirror" type="checkbox" {{if .mirror}}checked{{end}} />
                 <span>{{.i18n.Tr "repo.migrate_type_helper" | Str2html}}</span>
-            </p>
+            </div>
             <div class="field clear">
                 <label class="left" for="desc">{{.i18n.Tr "repo.repo_desc"}}</label>
-                <textarea class="ipt ipt-radius {{if .Err_Description}}ipt-error{{end}}" id="desc" name="desc">{{.desc}}</textarea>
+                <textarea class="ipt ipt-large ipt-radius {{if .Err_Description}}ipt-error{{end}}" id="desc" name="desc">{{.desc}}</textarea>
             </div>
-            <p class="field">
+            <div class="field">
                 <label for="repo-create-submit"></label>
                 <button class="btn btn-large btn-blue btn-radius" id="repo-create-submit">{{.i18n.Tr "repo.migrate_repo"}}</button>
                 <a class="btn btn-small btn-gray btn-radius" id="repo-create-cancel" href="/"><strong>{{.i18n.Tr "cancel"}}</strong></a>
-            </p>
+            </div>
         </div>
     </form>
 </div>
diff --git a/templates/repo/setting.tmpl b/templates/repo/setting.tmpl
deleted file mode 100644
index 99835640fc..0000000000
--- a/templates/repo/setting.tmpl
+++ /dev/null
@@ -1,182 +0,0 @@
-{{template "base/head" .}}
-{{template "base/navbar" .}}
-{{template "repo/nav" .}}
-{{template "repo/toolbar" .}}
-<div id="body" class="container">
-    {{template "repo/setting_nav" .}}
-    <div id="repo-setting-container" class="col-md-10">
-        {{template "base/alert" .}}
-        <div class="panel panel-default">
-            <div class="panel-heading">
-                Repository Options
-            </div>
-
-            <div class="panel-body">
-                <form action="/{{.Owner.Name}}/{{.Repository.Name}}/settings" method="post" class="form-horizontal">
-                    {{.CsrfTokenHtml}}
-                    <input type="hidden" name="action" value="update">
-                    <div class="form-group">
-                        <label class="col-md-3 text-right" for="repo-setting-name">Name</label>
-                        <div class="col-md-9">
-                            <input class="form-control" name="name" value="{{.Repository.Name}}" title="{{.Repository.Name}}" id="repo-setting-name"/>
-                            <p class="help-block hidden"><span class="text-danger">Cautious : </span>your repository name is changing !</p>
-                        </div>
-                    </div>
-
-                    <div class="form-group">
-                        <label class="col-md-3 text-right">Description</label>
-                        <div class="col-md-9">
-                            <textarea class="form-control" name="desc" id="repo-desc" rows="3">{{.Repository.Description}}</textarea>
-                        </div>
-                    </div>
-
-                    <div class="form-group">
-                        <label class="col-md-3 text-right">Official Site</label>
-                        <div class="col-md-9">
-                            <input type="url" class="form-control" name="site" value="{{.Repository.Website}}" />
-                        </div>
-                    </div>
-                    <hr>
-                    <div class="form-group">
-                        <label class="col-md-3 text-right">Default Branch</label>
-                        <div class="col-md-3">
-                            <select name="branch" id="repo-default-branch" class="form-control">
-                                {{if .Repository.DefaultBranch}}<option value="{{.Repository.DefaultBranch}}">{{.Repository.DefaultBranch}}</option>{{end}}
-                                {{range .Branches}}
-                                {{if eq . $.Repository.DefaultBranch}}{{else}}<option value="{{.}}">{{.}}</option>{{end}}
-                                {{end}}
-                            </select>
-                        </div>
-                    </div>
-
-                    {{if .Repository.IsMirror}}<div class="form-group">
-                        <label class="col-md-3 text-right">Mirror Interval(hours)</label>
-                        <div class="col-md-3">
-                            <input class="form-control" name="interval" value="{{.MirrorInterval}}"/>
-                        </div>
-                    </div>{{end}}
-
-                    <div class="form-group">
-                        <div class="col-md-offset-3 col-md-9">
-                            <div class="checkbox">
-                                <label style="line-height: 15px;">
-                                    <input type="checkbox" name="private" {{if .Repository.IsPrivate}}checked{{end}}>
-                                    <strong>Make this repository private</strong>
-                                </label>
-                            </div>
-
-                            <div class="checkbox">
-                                <label style="line-height: 15px;">
-                                    <input type="checkbox" name="goget" {{if .Repository.IsGoget}}checked{{end}}>
-                                    <strong>Enable 'go get' meta</strong>
-                                </label>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div class="form-group">
-                        <div class="col-md-9 col-md-offset-3">
-                            <button class="btn btn-primary" type="submit">Save Options</button>
-                        </div>
-                    </div>
-                </form>
-            </div>
-        </div>
-
-        <div class="panel panel-warning">
-            <div class="panel-heading">
-                Danger Zone
-            </div>
-            
-            {{if not .Repository.IsMirror}}
-            <div class="panel-body">
-                <button type="button" class="btn btn-default pull-right" href="#transfer-repository-modal" data-toggle="modal">
-                    Transfer ownership 
-                </button>
-                <dd>
-                    <dt>Transfer ownership</dt>
-                    <dl>Transfer this repo to another user or to an organization where you have admin rights.</dl>
-                </dd>
-
-                <div class="modal fade" id="transfer-repository-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
-                    <div class="modal-dialog">
-                        <form action="/{{.Owner.Name}}/{{.Repository.Name}}/settings" method="post" class="modal-content">
-                            {{.CsrfTokenHtml}}
-                            <input type="hidden" name="action" value="transfer">
-
-                            <div class="modal-header">
-                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-                                <h4 class="modal-title" id="myModalLabel">Do you really want to transfer this repo?</h4>
-                            </div>
-
-                            <div class="modal-body">
-                                <div class="alert alert-warning">This is important, pay attention.</div>
-                                <ul>
-                                    <!-- <li>Transferring may be delayed until the new owner approves the transfer.</li> -->
-                                    <!-- <li>If you are transferring into an org, teams <strong>will not be set</strong>.  An owner on the org will need to set teams for the repo.</li> -->
-                                    <li>Admin rights will be transferred to the new owner, you <strong>will lose admin rights</strong>.</li>
-                                    <!-- <li>Admin rights will be transferred to the new owner, you <strong>may lose admin rights</strong> if you are transferring into an organization account.</li> -->
-                                    <li>Redirect entries <strong>will NOT be</strong> set up from the previous location.</li>
-                                    <li>Git access <strong>will NOT continue</strong> to work from the previous location.</li>
-                                </ul>
-                                <div class="form-group">
-                                    <label>Please type the name of the repository to confirm "<strong class="text-danger">{{.Repository.Name}}</strong>"</label>
-                                    <input name="repository" class="form-control" type="text" placeholder="Type your repository name" required="required">
-                                </div>
-
-                                <div class="form-group">
-                                    <label>Please type the name of the new owner:</label>
-                                    <input name="owner" class="form-control" type="text" placeholder="Type new owner's name" required="required">
-                                </div>
-                            </div>
-
-                            <div class="modal-footer">
-                                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
-                                <button class="btn btn-danger btn-lg">I understand the consequences, transfer this repository</button>
-                            </div>
-                        </form>
-                    </div>
-                </div>
-            </div>
-            {{end}}
-            
-            <hr>
-            <div class="panel-body">
-                <button type="button" class="btn btn-default pull-right" href="#delete-repository-modal" data-toggle="modal">
-                    Delete this repository
-                </button>
-                <dd>
-                    <dt>Delete this repository</dt>
-                    <dl>Once you delete a repository, there is no going back. Please be certain.</dl>
-                </dd>
-
-                <div class="modal fade" id="delete-repository-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
-                    <div class="modal-dialog">
-                        <form action="/{{.Owner.Name}}/{{.Repository.Name}}/settings" method="post" class="modal-content">
-                            {{.CsrfTokenHtml}}
-                            <input type="hidden" name="action" value="delete">
-
-                            <div class="modal-header">
-                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-                                <h4 class="modal-title" id="myModalLabel">Delete repository</h4>
-                            </div>
-
-                            <div class="modal-body">
-                                <div class="form-group">
-                                    <label>Please enter your repository name "<strong class="text-danger">{{.Repository.Name}}</strong>"</label>
-                                    <input name="repository" class="form-control" type="text" placeholder="Type your repository name" required="required">
-                                </div>
-                            </div>
-
-                            <div class="modal-footer">
-                                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
-                                <button class="btn btn-danger btn-lg">I understand the consequences, delete this repository</button>
-                            </div>
-                        </form>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-{{template "base/footer" .}}
\ No newline at end of file
diff --git a/templates/repo/settings/nav.tmpl b/templates/repo/settings/nav.tmpl
new file mode 100644
index 0000000000..6288ca6cd7
--- /dev/null
+++ b/templates/repo/settings/nav.tmpl
@@ -0,0 +1,11 @@
+<div id="setting-menu" class="grid-1-5 panel panel-radius left">
+    <p class="panel-header"><strong>{{.i18n.Tr "repo.settings"}}</strong></p>
+    <div class="panel-body">
+        <ul class="menu menu-vertical switching-list grid-1-5 left">
+            <li {{if .PageIsSettingsOptions}}class="current"{{end}}><a href="{{.RepoLink}}/settings">{{.i18n.Tr "repo.settings.options"}}</a></li>
+            <li {{if .PageIsSettingsCollaboration}}class="current"{{end}}><a href="{{.RepoLink}}/settings/collaboration">{{.i18n.Tr "repo.settings.collaboration"}}</a></li>
+            <li {{if .PageIsSettingsHooks}}class="current"{{end}}><a href="{{.RepoLink}}/settings/hooks">{{.i18n.Tr "repo.settings.hooks"}}</a></li>
+            <li {{if .PageIsSettingsKeys}}class="current"{{end}}><a href="{{.RepoLink}}/settings/keys">{{.i18n.Tr "repo.settings.deploy_keys"}}</a></li>
+        </ul>
+    </div>
+</div>
\ No newline at end of file
diff --git a/templates/repo/settings/options.tmpl b/templates/repo/settings/options.tmpl
new file mode 100644
index 0000000000..ec0503e677
--- /dev/null
+++ b/templates/repo/settings/options.tmpl
@@ -0,0 +1,127 @@
+{{template "ng/base/head" .}}
+{{template "ng/base/header" .}}
+<div id="repo-wrapper">
+    {{template "repo/header" .}}
+	<div id="setting-wrapper" class="main-wrapper">
+	    <div id="repo-setting" class="container clear">
+	        {{template "repo/settings/nav" .}}
+	        <div class="grid-4-5 left">
+	            <div class="setting-content">
+	                {{template "ng/base/alert" .}}
+	                <div id="setting-content">
+	                    <div id="user-profile-setting-content" class="panel panel-radius">
+	                        <div class="panel-header">
+	                        	<strong>{{.i18n.Tr "repo.settings.basic_settings"}}</strong>
+	                        </div>
+	                        <form class="form form-align panel-body" id="repo-setting-form" action="{{.RepoLink}}/settings" method="post">
+	                            {{.CsrfTokenHtml}}
+                    			<input type="hidden" name="action" value="update">
+	                            <div class="field">
+	                                <label class="req" for="repo_name">{{.i18n.Tr "repo.repo_name"}}</label>
+	                                <input class="ipt ipt-large ipt-radius {{if .Err_RepoName}}ipt-error{{end}}" id="repo_name" name="repo_name" value="{{.Repository.Name}}" data-repo-name="{{.Repository.Name}}" required />
+	                            </div>
+					            <div class="field clear">
+					                <label class="left" for="desc">{{.i18n.Tr "repo.repo_desc"}}</label>
+					                <textarea class="ipt ipt-large ipt-radius {{if .Err_Description}}ipt-error{{end}}" id="desc" name="desc">{{.Repository.Description}}</textarea>
+					            </div>
+	                            <div class="field">
+	                                <label for="website">{{.i18n.Tr "repo.settings.site"}}</label>
+	                                <input class="ipt ipt-large ipt-radius {{if .Err_Website}}ipt-error{{end}}" id="website" name="site" type="url" value="{{.Repository.Website}}" />
+	                            </div>
+	                            <hr>	
+	                            <br>
+					            <div class="field">
+					                <label for="lang">{{.i18n.Tr "repo.default_branch"}}</label>
+					                <select id="lang" name="gitignore">
+		                                {{if .Repository.DefaultBranch}}<option value="{{.Repository.DefaultBranch}}">{{.Repository.DefaultBranch}}</option>{{end}}
+		                                {{range .Branches}}
+		                                	{{if not (eq . $.Repository.DefaultBranch)}}<option value="{{.}}">{{.}}</option>{{end}}
+		                                {{end}}
+					                </select>
+					            </div>
+					            {{if .Repository.IsMirror}}
+	                            <div class="field">
+	                                <label for="interval">{{.i18n.Tr "repo.mirror_interval"}}</label>
+	                                <input class="ipt ipt-large ipt-radius {{if .Err_Interval}}ipt-error{{end}}" id="interval" name="interval" type="number" value="{{.MirrorInterval}}" />
+	                            </div>
+	                            {{end}}
+					            <div class="field">
+					                <label for="visibility">{{.i18n.Tr "repo.visibility"}}</label>
+					                <input class="ipt-chk" id="visibility" name="private" type="checkbox" {{if .Repository.IsPrivate}}checked{{end}} />
+					                <span>{{.i18n.Tr "repo.visiblity_helper" | Str2html}}</span>
+					            </div>
+					            <div class="field">
+					                <label for="goget">{{.i18n.Tr "repo.goget_meta"}}</label>
+					                <input class="ipt-chk" id="goget" name="goget" type="checkbox" {{if .Repository.IsGoget}}checked{{end}} />
+					                <span>{{.i18n.Tr "repo.goget_meta_helper" | Str2html}}</span>
+					            </div>
+	                            <div class="field">
+	                                <span class="form-label"></span>
+	                                <button class="btn btn-green btn-large btn-radius">{{.i18n.Tr "repo.settings.update_settings"}}</button>
+	                            </div>
+	                        </form>
+	                    </div>
+	                </div>
+	            </div>
+	            <br>
+	            <div class="setting-content">
+	                <div id="setting-content">
+	                    <div id="user-profile-setting-content" class="panel panel-warning panel-radius">
+	                        <div class="panel-header">
+	                        	<strong>{{.i18n.Tr "repo.settings.danger_zone"}}</strong>
+	                        </div>
+	                        <div class="panel-body">
+	                        	<div class="repo-setting-zone">
+	                        	    <button class="btn btn-gray btn-large btn-radius right" id="transfer-button">{{.i18n.Tr "repo.settings.transfer"}}</button>
+	                        	    <dt>{{.i18n.Tr "repo.settings.transfer"}}</dt>
+	                        	    <dl>{{.i18n.Tr "repo.settings.transfer_desc"}}</dl>
+	                        	    <div class="hide" id="transfer-form">
+		                        	    <br>
+									    <form class="form-align form panel container panel-radius" action="{{.RepoLink}}/settings" method="post">
+									        {{.CsrfTokenHtml}}
+	                    					<input type="hidden" name="action" value="transfer">
+									        <div class="panel-content">
+					                            <div class="field">
+					                                <label class="req" for="repo_name">{{.i18n.Tr "repo.repo_name"}}</label>
+					                                <input class="ipt ipt-large ipt-radius" id="repo_name" name="repo_name" required />
+					                            </div>
+								                <label class="req" for="new_owner_name">{{.i18n.Tr "repo.settings.transfer_owner"}}</label>
+								                <input class="ipt ipt-large ipt-radius" id="new_owner_name" name="new_owner_name" required/>
+								                <span class="form-label"></span>
+								                <button class="btn btn-large btn-red btn-radius right">{{.i18n.Tr "repo.settings.make_transfer"}}</button>
+									        </div>
+									    </form>
+								    </div>
+	                        	</div>
+	                        	<hr>
+	                        	<div class="repo-setting-zone">
+	                        	    <button class="btn btn-gray btn-large btn-radius pull-right" id="delete-button">{{.i18n.Tr "repo.settings.delete"}}</button>
+	                        	    <dt>{{.i18n.Tr "repo.settings.delete"}}</dt>
+	                        	    <dl>{{.i18n.Tr "repo.settings.delete_desc"}}</dl>
+	                        	    <div class="hide" id="delete-form">
+		                        	    <br>
+									    <form class="form-align form panel container panel-radius" action="{{.RepoLink}}/settings" method="post">
+									        {{.CsrfTokenHtml}}
+	                    					<input type="hidden" name="action" value="delete">
+									        <div class="panel-content">
+					                            <div class="field">
+					                                <label class="req" for="repo_name">{{.i18n.Tr "repo.repo_name"}}</label>
+					                                <input class="ipt ipt-large ipt-radius" id="repo_name" name="repo_name" required />
+					                            </div>
+								                <label class="req" for="password">{{.i18n.Tr "password"}}</label>
+								                <input class="ipt ipt-large ipt-radius" id="password" name="password" type="password" required/>
+								                <span class="form-label"></span>
+								                <button class="btn btn-large btn-red btn-radius right">{{.i18n.Tr "repo.settings.confirm_delete"}}</button>
+									        </div>
+									    </form>
+								    </div>
+	                        	</div>
+	                        </div>
+	                    </div>
+	                </div>
+	            </div>
+	        </div>
+	    </div>
+    </div>
+</div>
+{{template "ng/base/footer" .}}
\ No newline at end of file
diff --git a/templates/repo/sidebar.tmpl b/templates/repo/sidebar.tmpl
new file mode 100644
index 0000000000..39d999cabc
--- /dev/null
+++ b/templates/repo/sidebar.tmpl
@@ -0,0 +1,28 @@
+<div id="repo-sidebar" class="right grid-1-5">
+    <ul class="menu menu-vertical" id="repo-sidebar-nav">
+        <li>
+            <a class="radius" href="{{.RepoLink}}/issues"><i class="octicon octicon-issue-opened"></i>Issues<span class="num right label label-blue label-radius">{{.Repository.NumOpenIssues}}</span></a>
+        </li>
+        <li>
+            <a class="radius" href="{{.RepoLink}}/pulls"><i class="octicon octicon-git-pull-request"></i>Pull Requests<span class="num right label label-blue label-radius">{{.Repository.NumOpenPulls}}</span></a>
+        </li>
+        <li class="border-bottom"></li>
+        <li class="head">{{if .IsViewBranch}}{{.BranchName}}{{else}}{{ShortSha .BranchName}}{{end}}</li>
+        <li>
+            <a class="radius" href="{{.RepoLink}}/commits/{{.BranchName}}"><i class="octicon octicon-history"></i>Commits <span class="num right label label-gray label-radius">{{.CommitsCount}}</span></a>
+        </li>
+        <li>
+            <a class="radius" href="{{.RepoLink}}/branches"><i class="octicon octicon-git-branch"></i>Branches<span class="num right label label-gray label-radius">{{.BrancheCount}}</span></a>
+        </li>
+        <li>
+            <a class="radius" href="{{.RepoLink}}/releases"><i class="octicon octicon-tag"></i>Releases <span class="num right label label-gray label-radius">{{.Repository.NumTags}}</span></a>
+        </li>
+        <li>
+            <a class="radius" href="#"><i class="octicon octicon-organization"></i>contributors <span class="num right label label-gray label-radius">43</span></a>
+        </li>
+        <li class="border-bottom"></li>
+        <li>
+            <a class="radius" href="{{.RepoLink}}/settings"><i class="octicon octicon-tools"></i>settings</a>
+        </li>
+    </ul>
+</div>
\ No newline at end of file