<div class="runner-container">
	<h4 class="ui top attached header">
		{{.locale.Tr "actions.runners.runner_title"}} {{.Runner.ID}} {{.Runner.Name}}
	</h4>
	<div class="ui attached segment">
		<form class="ui form" method="post">
			{{template "base/disable_form_autofill"}}
			{{.CsrfTokenHtml}}
			<div class="runner-basic-info">
				<div class="field gt-dib gt-mr-4">
					<label>{{.locale.Tr "actions.runners.status"}}</label>
					<span class="runner-status-{{if .Runner.IsOnline}}online{{else}}offline{{end}}">{{.Runner.StatusLocaleName $.locale}}</span>
				</div>
				<div class="field gt-dib gt-mr-4">
					<label>{{.locale.Tr "actions.runners.last_online"}}</label>
					<span>{{if .Runner.LastOnline}}{{TimeSinceUnix .Runner.LastOnline $.locale}}{{else}}{{$.locale.Tr "never"}}{{end}}</span>
				</div>
				<div class="field gt-dib gt-mr-4">
					<label>{{.locale.Tr "actions.runners.labels"}}</label>
					<span>
						{{range .Runner.AgentLabels}}
						<span class="ui label">{{.}}</span>
						{{end}}
					</span>
				</div>
				<div class="field gt-dib gt-mr-4">
					<label>{{.locale.Tr "actions.runners.owner_type"}}</label>
					<span data-tooltip-content="{{.Runner.BelongsToOwnerName}}">{{.Runner.BelongsToOwnerType.LocaleString $.locale}}</span>
				</div>
			</div>

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

			<div class="field">
				<label for="description">{{.locale.Tr "actions.runners.description"}}</label>
				<input id="description" name="description" value="{{.Runner.Description}}">
			</div>

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

			<div class="field">
				<button class="ui green button" data-url="{{.Link}}">{{.locale.Tr "actions.runners.update_runner"}}</button>
				<button class="ui red button delete-button show-modal" data-url="{{.Link}}/delete" data-modal="#runner-delete-modal">
					{{.locale.Tr "actions.runners.delete_runner"}}</button>
			</div>
		</form>
	</div>

	<h4 class="ui top attached header">
		{{.locale.Tr "actions.runners.task_list"}}
	</h4>
	<div class="ui attached segment">
		<table class="ui very basic striped table unstackable">
			<thead>
				<tr>
					<th>{{.locale.Tr "actions.runners.task_list.run"}}</th>
					<th>{{.locale.Tr "actions.runners.task_list.status"}}</th>
					<th>{{.locale.Tr "actions.runners.task_list.repository"}}</th>
					<th>{{.locale.Tr "actions.runners.task_list.commit"}}</th>
					<th>{{.locale.Tr "actions.runners.task_list.done_at"}}</th>
				</tr>
			</thead>
			<tbody>
				{{range .Tasks}}
				<tr>
					<td><a href="{{.GetRunLink}}" target="_blank">{{.ID}}</a></td>
					<td><span class="ui label task-status-{{.Status.String}}">{{.Status.LocaleString $.locale}}</span></td>
					<td><a href="{{.GetRepoLink}}" target="_blank">{{.GetRepoName}}</a></td>
					<td>
						<strong><a href="{{.GetCommitLink}}" target="_blank">{{ShortSha .CommitSHA}}</a></strong>
					</td>
					<td>{{if .IsStopped}}
						<span>{{TimeSinceUnix .Stopped $.locale}}</span>
						{{else}}-{{end}}</td>
				</tr>
				{{end}}
				{{if not .Tasks}}
				<tr>
					<td colspan="5">{{.locale.Tr "actions.runners.task_list.no_tasks"}}</td>
				</tr>
				{{end}}
			</tbody>
		</table>
		{{template "base/paginate" .}}
	</div>
	<div class="ui g-modal-confirm delete modal" id="runner-delete-modal">
		<div class="header">
			{{svg "octicon-trash"}}
			{{.locale.Tr "actions.runners.delete_runner_header"}}
		</div>
		<div class="content">
			<p>{{.locale.Tr "actions.runners.delete_runner_notice" | Safe}}</p>
		</div>
		{{template "base/modal_actions_confirm" .}}
	</div>
</div>
