<h4 class="ui top attached header">
	{{ctx.Locale.Tr "repo.issues.label_count" .NumLabels}}
	<div class="ui right">
		<!-- Sort -->
		<div class="item ui jump dropdown tw-py-2">
			<span class="text">
				{{ctx.Locale.Tr "repo.issues.filter_sort"}}
			</span>
			{{svg "octicon-triangle-down" 14 "dropdown icon"}}
			<div class="menu">
				<a class="{{if or (eq .SortType "alphabetically") (not .SortType)}}active {{end}}item" href="?sort=alphabetically&state={{$.State}}">{{ctx.Locale.Tr "repo.issues.label.filter_sort.alphabetically"}}</a>
				<a class="{{if eq .SortType "reversealphabetically"}}active {{end}}item" href="?sort=reversealphabetically&state={{$.State}}">{{ctx.Locale.Tr "repo.issues.label.filter_sort.reverse_alphabetically"}}</a>
				<a class="{{if eq .SortType "leastissues"}}active {{end}}item" href="?sort=leastissues&state={{$.State}}">{{ctx.Locale.Tr "repo.milestones.filter_sort.least_issues"}}</a>
				<a class="{{if eq .SortType "mostissues"}}active {{end}}item" href="?sort=mostissues&state={{$.State}}">{{ctx.Locale.Tr "repo.milestones.filter_sort.most_issues"}}</a>
			</div>
		</div>
	</div> <!-- filter menu -->
</h4>

<div class="ui attached segment">
	{{if and (not $.PageIsOrgSettingsLabels) (or $.CanWriteIssues $.CanWritePulls) (eq .NumLabels 0) (not $.Repository.IsArchived)}}
		{{template "repo/issue/labels/label_load_template" .}}
		<div class="divider"></div>
	{{else if and ($.PageIsOrgSettingsLabels) (eq .NumLabels 0)}}
		{{template "repo/issue/labels/label_load_template" .}}
		<div class="divider"></div>
	{{end}}

	<ul class="issue-label-list">
		{{$canEditLabel := and (not $.PageIsOrgSettingsLabels) (not $.Repository.IsArchived) (or $.CanWriteIssues $.CanWritePulls)}}
		{{$canEditLabel = or $canEditLabel $.PageIsOrgSettingsLabels}}
		{{range .Labels}}
		<li class="item">
			<div class="label-title">
				{{ctx.RenderUtils.RenderLabel .}}
				{{if .Description}}<br><small class="desc">{{.Description | ctx.RenderUtils.RenderEmoji}}</small>{{end}}
			</div>
			<div class="label-issues">
				{{if $.PageIsOrgSettingsLabels}}
					<a class="open-issues" href="{{AppSubUrl}}/issues?labels={{.ID}}">{{svg "octicon-issue-opened"}} {{ctx.Locale.Tr "repo.issues.label_open_issues" .NumOpenIssues}}</a>
				{{else}}
					<a class="open-issues" href="{{$.RepoLink}}/issues?labels={{.ID}}">{{svg "octicon-issue-opened"}} {{ctx.Locale.Tr "repo.issues.label_open_issues" .NumOpenIssues}}</a>
				{{end}}
			</div>
			<div class="label-operation tw-flex">
				{{template "repo/issue/labels/label_archived" .}}
				<div class="tw-flex tw-ml-auto">
					{{if $canEditLabel}}
						<a class="edit-label-button" href="#"
							data-label-id="{{.ID}}" data-label-name="{{.Name}}" data-label-color="{{.Color}}"
							data-label-exclusive="{{.Exclusive}}" data-label-is-archived="{{gt .ArchivedUnix 0}}"
							data-label-num-issues="{{.NumIssues}}" data-label-description="{{.Description}}"
							data-label-exclusive-order="{{.ExclusiveOrder}}"
						>{{svg "octicon-pencil"}} {{ctx.Locale.Tr "repo.issues.label_edit"}}</a>
						<a class="link-action" href="#" data-url="{{$.Link}}/delete?id={{.ID}}"
							data-modal-confirm-header="{{ctx.Locale.Tr "repo.issues.label_deletion"}}"
							data-modal-confirm-content="{{ctx.Locale.Tr "repo.issues.label_deletion_desc"}}"
						>{{svg "octicon-trash"}} {{ctx.Locale.Tr "repo.issues.label_delete"}}</a>
					{{end}}
				</div>
			</div>
		</li>
		{{end}}

		{{if and (not .PageIsOrgSettingsLabels) (.OrgLabels)}}
			<li class="item">
				<div>{{/* parent is flex, so use block here to keep sentence spaces */}}
					{{ctx.Locale.Tr "repo.org_labels_desc"}}
					{{if .IsOrganizationOwner}}
						<a href="{{.OrganizationLink}}/settings/labels">({{ctx.Locale.Tr "repo.org_labels_desc_manage"}})</a>:
					{{end}}
				</div>
			</li>

			{{range .OrgLabels}}
			<li class="item org-label">
				<div class="label-title">
					{{ctx.RenderUtils.RenderLabel .}}
					{{if .Description}}<br><small class="desc">{{.Description | ctx.RenderUtils.RenderEmoji}}</small>{{end}}
				</div>
				<div class="label-issues">
					<a class="open-issues" {{if .IsArchived}}data-is-archived{{end}} href="{{$.RepoLink}}/issues?labels={{.ID}}">{{svg "octicon-issue-opened"}} {{ctx.Locale.Tr "repo.issues.label_open_issues" .NumOpenRepoIssues}}</a>
				</div>
				<div class="label-operation">
					{{template "repo/issue/labels/label_archived" .}}
				</div>
			</li>
			{{end}}
		{{end}}
	</ul>
</div>
