{{template "base/head" .}}
<div class="repository labels">
	{{template "repo/header" .}}
	<div class="ui container">
		<div class="navbar">
			{{template "repo/issue/navbar" .}}
			{{if .IsRepositoryWriter}}
				<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="three 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="five wide column">
						<div class="ui small fluid input">
							<input class="new-label-desc-input" name="description" placeholder="{{.i18n.Tr "repo.issues.new_label_desc_placeholder"}}">
						</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>

		<div class="ui right floated secondary filter menu">
		<!-- Sort -->
			<div class="ui dropdown type jump item">
				<span class="text">
					{{.i18n.Tr "repo.issues.filter_sort"}}
					<i class="dropdown icon"></i>
				</span>
				<div class="menu">
					<a class="{{if or (eq .SortType "alphabetically") (not .SortType)}}active{{end}} item" href="{{$.Link}}?sort=alphabetically&state={{$.State}}">{{.i18n.Tr "repo.issues.label.filter_sort.alphabetically"}}</a>
					<a class="{{if eq .SortType "reversealphabetically"}}active{{end}} item" href="{{$.Link}}?sort=reversealphabetically&state={{$.State}}">{{.i18n.Tr "repo.issues.label.filter_sort.reverse_alphabetically"}}</a>
					<a class="{{if eq .SortType "leastissues"}}active{{end}} item" href="{{$.Link}}?sort=leastissues&state={{$.State}}">{{.i18n.Tr "repo.milestones.filter_sort.least_issues"}}</a>
					<a class="{{if eq .SortType "mostissues"}}active{{end}} item" href="{{$.Link}}?sort=mostissues&state={{$.State}}">{{.i18n.Tr "repo.milestones.filter_sort.most_issues"}}</a>
				</div>
			</div>
		</div>
		{{template "base/alert" .}}
		<div class="ui black label">{{.i18n.Tr "repo.issues.label_count" .NumLabels}}</div>
		<div class="label list">
			{{if and $.IsRepositoryWriter (eq .NumLabels 0)}}
				<div class="ui centered grid">
					<div class="twelve wide column eight wide computer column">
						<div class="ui attached left aligned segment">
							<!-- <h4 class="ui header">
								{{.i18n.Tr "repo.issues.label_templates.title"}}
								<a target="_blank" rel="noopener"
								   href="https://discuss.gogs.io/t/how-to-use-predefined-label-templates/599">
									<span class="octicon octicon-question"></span>
								</a>
							</h4> -->
							<p>{{.i18n.Tr "repo.issues.label_templates.info"}}</p>
							<br/>
							<form class="ui form center" action="{{.Link}}/initialize" method="post">
								{{.CsrfTokenHtml}}
								<div class="field">
									<div class="ui selection dropdown">
										<input type="hidden" name="template_name" value="Default">
										<div class="default text">{{.i18n.Tr "repo.issues.label_templates.helper"}}</div>
										<div class="menu">
											{{range .LabelTemplates}}
											<div class="item" data-value="{{.}}">{{.}}</div>
											{{end}}
										</div>
									</div>
								</div>
								<button type="submit" class="ui blue button">{{.i18n.Tr "repo.issues.label_templates.use"}}</button>
							</form>
						</div>
					</div>
				</div>
			{{end}}

			<div class="ui divider"></div>

			{{range .Labels}}
				<li class="item">
					<div class="ui grid">
						<div class="three wide column">
							<div class="ui label" style="color: {{.ForegroundColor}}; background-color: {{.Color}}"><i class="octicon octicon-tag"></i> {{.Name}}</div>
						</div>
						<div class="seven wide column">
							{{.Description}}
						</div>
						<div class="three wide column">
							<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>
						</div>
						<div class="three wide column">
						{{if $.IsRepositoryWriter}}
							<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-description="{{.Description}}" data-color={{.Color}}><i class="octicon octicon-pencil"></i> {{$.i18n.Tr "repo.issues.label_edit"}}</a>
						{{end}}
						</div>
					</div>
				</li>
			{{end}}
		</div>
	</div>
</div>

{{if .IsRepositoryWriter}}
	<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="three 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="five wide column">
						<div class="ui small fluid input">
							<input class="new-label-desc-input" name="description" placeholder="{{.i18n.Tr "repo.issues.new_label_desc_placeholder"}}">
						</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" .}}