<span class="text"><strong>{{ctx.Locale.Tr "repo.issues.due_date"}}</strong></span>
<div class="ui form" id="deadline-loader">
	<div class="ui negative message tw-hidden" id="deadline-err-invalid-date">
		{{svg "octicon-x" 16 "close icon"}}
		{{ctx.Locale.Tr "repo.issues.due_date_invalid"}}
	</div>
	{{if ne .Issue.DeadlineUnix 0}}
		<p>
			<div class="tw-flex tw-justify-between tw-items-center">
				<div class="due-date {{if .Issue.IsOverdue}}text red{{end}}" {{if .Issue.IsOverdue}}data-tooltip-content="{{ctx.Locale.Tr "repo.issues.due_date_overdue"}}"{{end}}>
					{{svg "octicon-calendar" 16 "tw-mr-2"}}
					{{DateTime "long" .Issue.DeadlineUnix.FormatDate}}
				</div>
				<div>
					{{if and .HasIssuesOrPullsWritePermission (not .Repository.IsArchived)}}
						<a class="issue-due-edit muted" data-tooltip-content="{{ctx.Locale.Tr "repo.issues.due_date_form_edit"}}">{{svg "octicon-pencil" 16 "tw-mr-1"}}</a>
						<a class="issue-due-remove muted" data-tooltip-content="{{ctx.Locale.Tr "repo.issues.due_date_form_remove"}}">{{svg "octicon-trash"}}</a>
					{{end}}
				</div>
			</div>
		</p>
	{{else}}
		<p>{{ctx.Locale.Tr "repo.issues.due_date_not_set"}}</p>
	{{end}}

	{{if and .HasIssuesOrPullsWritePermission (not .Repository.IsArchived)}}
		<div {{if ne .Issue.DeadlineUnix 0}} class="tw-hidden"{{end}} id="deadlineForm">
			<form class="ui fluid action input issue-due-form" action="{{AppSubUrl}}/{{PathEscape .Repository.Owner.Name}}/{{PathEscape .Repository.Name}}/issues/{{.Issue.Index}}/deadline" method="post" id="update-issue-deadline-form">
				{{$.CsrfTokenHtml}}
				<input required placeholder="{{ctx.Locale.Tr "repo.issues.due_date_form"}}" {{if gt .Issue.DeadlineUnix 0}}value="{{.Issue.DeadlineUnix.FormatDate}}"{{end}} type="date" name="deadlineDate" id="deadlineDate">
				<button class="ui icon button">
					{{if ne .Issue.DeadlineUnix 0}}
						{{svg "octicon-pencil"}}
					{{else}}
						{{svg "octicon-plus"}}
					{{end}}
				</button>
			</form>
		</div>
	{{end}}
</div>
