<div class="runner-container">

	<h4 class="ui top attached header">
		{{ctx.Locale.Tr "actions.runners.runner_manage_panel"}} ({{ctx.Locale.Tr "admin.total" .Total}})
		<div class="ui right">
			<div class="ui top right pointing dropdown jump">
				<button class="ui primary tiny button">
					{{ctx.Locale.Tr "actions.runners.new"}}
					{{svg "octicon-triangle-down" 14 "dropdown icon"}}
				</button>
				<div class="menu">
					<div class="item">
						<a href="https://docs.gitea.com/usage/actions/act-runner">{{ctx.Locale.Tr "actions.runners.new_notice"}}</a>
					</div>
					<div class="divider"></div>
					<div class="header">
						Registration Token
					</div>
					<div class="ui action input">
						<input type="text" value="{{.RegistrationToken}}" readonly>
						<button class="ui basic label button" aria-label="{{ctx.Locale.Tr "copy"}}" data-clipboard-text="{{.RegistrationToken}}">
							{{svg "octicon-copy" 14}}
						</button>
					</div>
					<div class="divider"></div>
					<div class="item">
						<a class="link-action" data-url="{{$.Link}}/reset_registration_token"
							data-modal-confirm="{{ctx.Locale.Tr "actions.runners.reset_registration_token_confirm"}}"
						>
							{{ctx.Locale.Tr "actions.runners.reset_registration_token"}}
						</a>
					</div>
				</div>
			</div>

		</div>
	</h4>
	<div class="ui attached segment">
		<form class="ui form ignore-dirty" id="user-list-search-form" action="{{$.Link}}">
			{{template "shared/search/combo" dict "Value" .Keyword "Placeholder" (ctx.Locale.Tr "search.runner_kind")}}
		</form>
	</div>
	{{if .AllowBulkActions}}
	<div class="ui attached segment tw-hidden" data-global-init="initRunnerBulkToolbar">
		<form action="{{$.Link}}/bulk" method="post" class="form-fetch-action">
			<input type="hidden" name="ids">
			<button class="ui small button runner-bulk-action" name="action" value="disable">{{ctx.Locale.Tr "actions.runners.disable_runner"}} <span class="runner-bulk-count"></span></button>
			<button class="ui small button runner-bulk-action" name="action" value="enable">{{ctx.Locale.Tr "actions.runners.enable_runner"}} <span class="runner-bulk-count"></span></button>
			<button class="ui small red button runner-bulk-action" name="action" value="delete"
				data-modal-confirm-header="{{ctx.Locale.Tr "actions.runners.delete_runner_header"}}"
				data-modal-confirm-content="{{ctx.Locale.Tr "actions.runners.delete_runner_notice"}}"
				>{{ctx.Locale.Tr "actions.runners.delete_runner"}} <span class="runner-bulk-count"></span>
			</button>
		</form>
	</div>
	{{end}}
	{{if .Runners}}
	<div class="ui attached table segment">
		<table class="ui very basic table unstackable">
			<thead>
				<tr>
					{{if .AllowBulkActions}}
					<th class="tw-w-8"><div class="ui checkbox tw-flex"><input type="checkbox" class="runner-bulk-select-all" aria-label="{{ctx.Locale.Tr "admin.notices.select_all"}}"></div></th>
					{{end}}
					<th data-sortt-asc="alphabetically" data-sortt-desc="reversealphabetically">
						{{ctx.Locale.Tr "actions.runners.name"}}
						{{SortArrow "alphabetically" "reversealphabetically" .SortType false}}
					</th>
					<th data-sortt-asc="online" data-sortt-desc="offline">
						{{ctx.Locale.Tr "actions.runners.status"}}
						{{SortArrow "online" "offline" .SortType false}}
					</th>
					<th data-sortt-asc="newest" data-sortt-desc="oldest">
						{{ctx.Locale.Tr "actions.runners.id"}}
						{{SortArrow "oldest" "newest" .SortType false}}
					</th>
					<th>{{ctx.Locale.Tr "actions.runners.version"}}</th>
					<th>{{ctx.Locale.Tr "actions.runners.owner_type"}}</th>
					<th>{{ctx.Locale.Tr "actions.runners.labels"}}</th>
					<th>{{ctx.Locale.Tr "actions.runners.last_online"}}</th>
					<th>{{ctx.Locale.Tr "edit"}}</th>
				</tr>
			</thead>
			<tbody>
				{{range .Runners}}
					<tr>
						{{if $.AllowBulkActions}}
						<td><div class="ui checkbox tw-flex"><input type="checkbox" class="runner-bulk-select" data-runner-id="{{.ID}}" aria-label="{{ctx.Locale.Tr "repo.issues.action_check"}}: {{.Name}}"></div></td>
						{{end}}
						<td><p data-tooltip-content="{{.Description}}">{{.Name}}</p></td>
						<td>
							<span class="ui label {{if eq .StatusName "active"}}green{{else if eq .StatusName "idle"}}yellow{{else if eq .StatusName "offline"}}red{{end}}">{{.StatusLocaleName ctx.Locale}}</span>
							{{if .IsDisabled}}<span class="ui grey label">{{ctx.Locale.Tr "disabled"}}</span>{{end}}
						</td>
						<td>{{.ID}}</td>
						<td>{{if .Version}}{{.Version}}{{else}}{{ctx.Locale.Tr "unknown"}}{{end}}</td>
						<td><span data-tooltip-content="{{.BelongsToOwnerName}}">{{.BelongsToOwnerType.LocaleString ctx.Locale}}</span></td>
						<td>
							<span class="flex-text-inline tw-flex-wrap">{{range .AgentLabels}}<span class="ui label">{{.}}</span>{{end}}</span>
						</td>
						<td>{{if .LastOnline}}{{DateUtils.TimeSince .LastOnline}}{{else}}{{ctx.Locale.Tr "never"}}{{end}}</td>
						<td>
							{{if .EditableInContext $.RunnerOwnerID $.RunnerRepoID}}
								<a href="{{$.Link}}/{{.ID}}">{{svg "octicon-pencil"}}</a>
							{{end}}
						</td>
					</tr>
				{{end}}
			</tbody>
		</table>
	</div>
	{{else}}
	<div class="ui attached segment tw-text-center">{{ctx.Locale.Tr "actions.runners.none"}}</div>
	{{end}}

	{{template "base/paginate" .}}
</div>
