{{template "org/settings/layout_head" (dict "ctxData" . "pageClass" "organization settings issue-statuses")}}
<h4 class="ui top attached header">
	{{ctx.Locale.Tr "org.settings.issue_statuses"}}
</h4>
<div class="ui attached segment">
	<p class="text grey">{{ctx.Locale.Tr "org.settings.issue_statuses_desc"}}</p>

	{{if .IssueStatuses}}
	<table class="ui compact table">
		<thead>
			<tr>
				<th>{{ctx.Locale.Tr "org.settings.issue_status_color"}}</th>
				<th>{{ctx.Locale.Tr "org.settings.issue_status_name"}}</th>
				<th>{{ctx.Locale.Tr "org.settings.issue_status_closes_issue"}}</th>
				<th>{{ctx.Locale.Tr "org.settings.issue_status_sort_order"}}</th>
				<th></th>
			</tr>
		</thead>
		<tbody>
			{{range .IssueStatuses}}
			<tr {{if not .IsActive}}class="tw-opacity-50"{{end}}>
				<td>
					{{if .Color}}
						<span class="tw-inline-block tw-w-4 tw-h-4 tw-rounded" style="background-color: {{.Color}}"></span>
					{{else}}
						<span class="text grey">-</span>
					{{end}}
				</td>
				<td>
					<strong>{{.Name}}</strong>
					{{if not .IsActive}}<span class="ui mini grey label">{{ctx.Locale.Tr "org.settings.issue_status_inactive"}}</span>{{end}}
					{{if .Description}}<br><small class="text grey">{{.Description}}</small>{{end}}
				</td>
				<td>
					{{if .ClosesIssue}}
						<span class="ui mini purple label">{{ctx.Locale.Tr "org.settings.issue_status_closes"}}</span>
					{{else}}
						<span class="text grey">-</span>
					{{end}}
				</td>
				<td>{{.SortOrder}}</td>
				<td class="tw-text-right">
					<form method="post" action="{{$.OrgLink}}/settings/issue-statuses/{{.ID}}/delete" class="tw-inline">
						{{$.CsrfTokenHtml}}
						<button class="ui tiny red icon button" type="submit" title="{{ctx.Locale.Tr "remove"}}">{{svg "octicon-trash" 14}}</button>
					</form>
				</td>
			</tr>
			{{end}}
		</tbody>
	</table>
	{{else}}
	<div class="empty-placeholder">
		<p>{{ctx.Locale.Tr "org.settings.issue_statuses_empty"}}</p>
	</div>
	{{end}}

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

	<h5>{{ctx.Locale.Tr "org.settings.issue_status_add"}}</h5>
	<form class="ui form" method="post" action="{{.OrgLink}}/settings/issue-statuses">
		{{.CsrfTokenHtml}}
		<div class="three fields">
			<div class="required field">
				<label>{{ctx.Locale.Tr "org.settings.issue_status_name"}}</label>
				<input name="name" required placeholder="e.g. In Progress, Won't Fix, Blocked">
			</div>
			<div class="field">
				<label>{{ctx.Locale.Tr "org.settings.issue_status_color"}}</label>
				<input name="color" type="color" value="#0075ff">
			</div>
			<div class="field">
				<label>{{ctx.Locale.Tr "org.settings.issue_status_sort_order"}}</label>
				<input name="sort_order" type="number" value="0" min="0">
			</div>
		</div>
		<div class="two fields">
			<div class="field">
				<label>{{ctx.Locale.Tr "org.settings.issue_status_description"}}</label>
				<input name="description" placeholder="Help text shown to users">
			</div>
			<div class="field">
				<div class="ui checkbox tw-mt-4">
					<input name="closes_issue" type="checkbox">
					<label>{{ctx.Locale.Tr "org.settings.issue_status_closes_issue"}}</label>
				</div>
				<p class="help">{{ctx.Locale.Tr "org.settings.issue_status_closes_issue_help"}}</p>
			</div>
		</div>
		<button class="ui primary button" type="submit">{{ctx.Locale.Tr "org.settings.issue_status_add"}}</button>
	</form>
</div>
{{template "org/settings/layout_footer" .}}
