{{template "base/head" .}}
<div class="repository labels">
	{{template "repo/header" .}}
	<div class="ui container">
    {{template "repo/sidebar" .}}
		<div class="navbar">
			{{template "repo/issue/navbar" .}}
			{{if .IsRepositoryAdmin}}
			<div class="ui right">
				<div class="ui green new-label button">{{.i18n.Tr "repo.issues.new_label"}}</div>
			</div>
			{{end}}
		</div>
		<div class="ui new-label segment hide">
			<form class="ui form" action="{{$.RepoLink}}/labels/new" method="post">
				{{.CsrfTokenHtml}}
				<div class="ui grid">
					<div class="five wide column">
						<div class="ui small input">
				  		<input class="new-label-input" name="title" placeholder="{{.i18n.Tr "repo.issues.new_label_placeholder"}}" autofocus required>
						</div>
					</div>
					<div class="color picker column">
		      	<input class="color-picker" name="color" value="#70c24a" required>
					</div>
					<div class="column precolors">
						{{template "repo/issue/label_precolors"}}
					</div>
					<div class="buttons">
						<div class="ui blue small basic cancel button">{{.i18n.Tr "repo.milestones.cancel"}}</div>
						<button class="ui green small button">{{.i18n.Tr "repo.issues.create_label"}}</button>
					</div>
				</div>
			</form>
		</div>
		<div class="ui divider"></div>
		{{template "base/alert" .}}
		<div class="ui black label">{{.i18n.Tr "repo.issues.label_count" .NumLabels}}</div>

		<div class="label list">
			{{range .Labels}}
			<li class="item">
				<div class="ui label" style="background-color: {{.Color}}"><i class="octicon octicon-tag"></i> {{.Name}}</div>
				{{if $.IsRepositoryAdmin}}
				<a class="ui right delete-button" href="#" data-url="{{$.RepoLink}}/labels/delete" data-id="{{.ID}}"><i class="octicon octicon-trashcan"></i> {{$.i18n.Tr "repo.issues.label_delete"}}</a>
				<a class="ui right edit-label-button" href="#" data-id={{.ID}} data-title={{.Name}} data-color={{.Color}}><i class="octicon octicon-pencil"></i> {{$.i18n.Tr "repo.issues.label_edit"}}</a>
				{{end}}
				<a class="ui right open-issues" href="{{$.RepoLink}}/issues?labels={{.ID}}"><i class="octicon octicon-issue-opened"></i> {{$.i18n.Tr "repo.issues.label_open_issues" .NumOpenIssues}}</a>
			</li>
			{{end}}
		</div>
	</div>
</div>

{{if .IsRepositoryAdmin}}
<div class="ui small basic delete modal">
  <div class="ui icon header">
    <i class="trash icon"></i>
    {{.i18n.Tr "repo.issues.label_deletion"}}
  </div>
  <div class="content">
    <p>{{.i18n.Tr "repo.issues.label_deletion_desc"}}</p>
  </div>
  <div class="actions">
    <div class="ui red basic inverted cancel button">
      <i class="remove icon"></i>
      {{.i18n.Tr "modal.no"}}
    </div>
    <div class="ui green basic inverted ok button">
      <i class="checkmark icon"></i>
      {{.i18n.Tr "modal.yes"}}
    </div>
  </div>
</div>

<div class="ui small edit-label modal">
  <div class="header">
    {{.i18n.Tr "repo.issues.label_modify"}}
  </div>
  <div class="content">
		<form class="ui edit-label form" action="{{$.RepoLink}}/labels/edit" method="post">
			{{.CsrfTokenHtml}}
			<input id="label-modal-id" name="id" type="hidden">
			<div class="ui grid">
				<div class="five wide column">
					<div class="ui small input">
			  		<input class="new-label-input" name="title" placeholder="{{.i18n.Tr "repo.issues.new_label_placeholder"}}" autofocus required>
					</div>
				</div>
				<div class="color picker column">
	      	<input class="color-picker" name="color" value="#70c24a" required>
				</div>
				<div class="column precolors">
					{{template "repo/issue/label_precolors"}}
				</div>
			</div>
		</form>
  </div>
  <div class="actions">
    <div class="ui negative button">
      {{.i18n.Tr "modal.no"}}
    </div>
    <div class="ui positive right labeled icon button">
      {{.i18n.Tr "modal.modify"}}
      <i class="checkmark icon"></i>
    </div>
  </div>
</div>
{{end}}
{{template "base/footer" .}}