Implement actions (#21937)

Close #13539.

Co-authored by: @lunny @appleboy @fuxiaohei and others.

Related projects:
- https://gitea.com/gitea/actions-proto-def
- https://gitea.com/gitea/actions-proto-go
- https://gitea.com/gitea/act
- https://gitea.com/gitea/act_runner

### Summary

The target of this PR is to bring a basic implementation of "Actions",
an internal CI/CD system of Gitea. That means even though it has been
merged, the state of the feature is **EXPERIMENTAL**, and please note
that:

- It is disabled by default;
- It shouldn't be used in a production environment currently;
- It shouldn't be used in a public Gitea instance currently;
- Breaking changes may be made before it's stable.

**Please comment on #13539 if you have any different product design
ideas**, all decisions reached there will be adopted here. But in this
PR, we don't talk about **naming, feature-creep or alternatives**.

### ⚠️ Breaking

`gitea-actions` will become a reserved user name. If a user with the
name already exists in the database, it is recommended to rename it.

### Some important reviews

- What is `DEFAULT_ACTIONS_URL` in `app.ini` for?
  - https://github.com/go-gitea/gitea/pull/21937#discussion_r1055954954
- Why the api for runners is not under the normal `/api/v1` prefix?
  - https://github.com/go-gitea/gitea/pull/21937#discussion_r1061173592
- Why DBFS?
  - https://github.com/go-gitea/gitea/pull/21937#discussion_r1061301178
- Why ignore events triggered by `gitea-actions` bot?
  - https://github.com/go-gitea/gitea/pull/21937#discussion_r1063254103
- Why there's no permission control for actions?
  - https://github.com/go-gitea/gitea/pull/21937#discussion_r1090229868

### What it looks like

<details>

#### Manage runners

<img width="1792" alt="image"
src="https://user-images.githubusercontent.com/9418365/205870657-c72f590e-2e08-4cd4-be7f-2e0abb299bbf.png">

#### List runs

<img width="1792" alt="image"
src="https://user-images.githubusercontent.com/9418365/205872794-50fde990-2b45-48c1-a178-908e4ec5b627.png">


#### View logs

<img width="1792" alt="image"
src="https://user-images.githubusercontent.com/9418365/205872501-9b7b9000-9542-4991-8f55-18ccdada77c3.png">



</details>

### How to try it

<details>

#### 1. Start Gitea

Clone this branch and [install from
source](https://docs.gitea.io/en-us/install-from-source).

Add additional configurations in `app.ini` to enable Actions:

```ini
[actions]
ENABLED = true
```

Start it.

If all is well, you'll see the management page of runners:

<img width="1792" alt="image"
src="https://user-images.githubusercontent.com/9418365/205877365-8e30a780-9b10-4154-b3e8-ee6c3cb35a59.png">


#### 2. Start runner

Clone the [act_runner](https://gitea.com/gitea/act_runner), and follow
the
[README](https://gitea.com/gitea/act_runner/src/branch/main/README.md)
to start it.

If all is well, you'll see a new runner has been added:

<img width="1792" alt="image"
src="https://user-images.githubusercontent.com/9418365/205878000-216f5937-e696-470d-b66c-8473987d91c3.png">

#### 3. Enable actions for a repo

Create a new repo or open an existing one, check the `Actions` checkbox
in settings and submit.

<img width="1792" alt="image"
src="https://user-images.githubusercontent.com/9418365/205879705-53e09208-73c0-4b3e-a123-2dcf9aba4b9c.png">
<img width="1792" alt="image"
src="https://user-images.githubusercontent.com/9418365/205879383-23f3d08f-1a85-41dd-a8b3-54e2ee6453e8.png">

If all is well, you'll see a new tab "Actions":

<img width="1792" alt="image"
src="https://user-images.githubusercontent.com/9418365/205881648-a8072d8c-5803-4d76-b8a8-9b2fb49516c1.png">

#### 4. Upload workflow files

Upload some workflow files to `.gitea/workflows/xxx.yaml`, you can
follow the [quickstart](https://docs.github.com/en/actions/quickstart)
of GitHub Actions. Yes, Gitea Actions is compatible with GitHub Actions
in most cases, you can use the same demo:

```yaml
name: GitHub Actions Demo
run-name: ${{ github.actor }} is testing out GitHub Actions 🚀
on: [push]
jobs:
  Explore-GitHub-Actions:
    runs-on: ubuntu-latest
    steps:
      - run: echo "🎉 The job was automatically triggered by a ${{ github.event_name }} event."
      - run: echo "🐧 This job is now running on a ${{ runner.os }} server hosted by GitHub!"
      - run: echo "🔎 The name of your branch is ${{ github.ref }} and your repository is ${{ github.repository }}."
      - name: Check out repository code
        uses: actions/checkout@v3
      - run: echo "💡 The ${{ github.repository }} repository has been cloned to the runner."
      - run: echo "🖥️ The workflow is now ready to test your code on the runner."
      - name: List files in the repository
        run: |
          ls ${{ github.workspace }}
      - run: echo "🍏 This job's status is ${{ job.status }}."
```

If all is well, you'll see a new run in `Actions` tab:

<img width="1792" alt="image"
src="https://user-images.githubusercontent.com/9418365/205884473-79a874bc-171b-4aaf-acd5-0241a45c3b53.png">

#### 5. Check the logs of jobs

Click a run and you'll see the logs:

<img width="1792" alt="image"
src="https://user-images.githubusercontent.com/9418365/205884800-994b0374-67f7-48ff-be9a-4c53f3141547.png">

#### 6. Go on

You can try more examples in [the
documents](https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions)
of GitHub Actions, then you might find a lot of bugs.

Come on, PRs are welcome.

</details>

See also: [Feature Preview: Gitea
Actions](https://blog.gitea.io/2022/12/feature-preview-gitea-actions/)

---------

Co-authored-by: a1012112796 <1012112796@qq.com>
Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
Co-authored-by: delvh <dev.lh@web.de>
Co-authored-by: ChristopherHX <christopher.homberger@web.de>
Co-authored-by: John Olheiser <john.olheiser@gmail.com>

18 files changed, 373 insertions, 0 deletions

diff --git a/templates/admin/navbar.tmpl b/templates/admin/navbar.tmpl
index cfd32b6484..97ee917167 100644
--- a/templates/admin/navbar.tmpl
+++ b/templates/admin/navbar.tmpl
@@ -33,6 +33,11 @@
 				{{.locale.Tr "settings.applications"}}
 			</a>
 		{{end}}
+		{{if .EnableActions}}
+		<a class="{{if .PageIsAdminRunners}}active {{end}}item" href="{{AppSubUrl}}/admin/runners">
+			{{.locale.Tr "actions.runners"}}
+		</a>
+		{{end}}
 		<a class="{{if .PageIsAdminConfig}}active {{end}}item" href="{{AppSubUrl}}/admin/config">
 			{{.locale.Tr "admin.config"}}
 		</a>
diff --git a/templates/admin/runners/base.tmpl b/templates/admin/runners/base.tmpl
new file mode 100644
index 0000000000..a00a4dbc26
--- /dev/null
+++ b/templates/admin/runners/base.tmpl
@@ -0,0 +1,8 @@
+{{template "base/head" .}}
+<div class="page-content admin runners">
+	{{template "admin/navbar" .}}
+	<div class="ui container">
+		{{template "shared/actions/runner_list" .}}
+	</div>
+</div>
+{{template "base/footer" .}}
diff --git a/templates/admin/runners/edit.tmpl b/templates/admin/runners/edit.tmpl
new file mode 100644
index 0000000000..0963e97a5b
--- /dev/null
+++ b/templates/admin/runners/edit.tmpl
@@ -0,0 +1,8 @@
+{{template "base/head" .}}
+<div class="page-content admin runners">
+	{{template "admin/navbar" .}}
+	<div class="ui container">
+		{{template "shared/actions/runner_edit" .}}
+	</div>
+</div>
+{{template "base/footer" .}}
diff --git a/templates/org/settings/navbar.tmpl b/templates/org/settings/navbar.tmpl
index 765bb6aaae..7380deff77 100644
--- a/templates/org/settings/navbar.tmpl
+++ b/templates/org/settings/navbar.tmpl
@@ -25,6 +25,11 @@
 			{{.locale.Tr "packages.title"}}
 		</a>
 		{{end}}
+		{{if .EnableActions}}
+		<a class="{{if .PageIsOrgSettingsRunners}}active {{end}}item" href="{{.OrgLink}}/settings/runners">
+			{{.locale.Tr "actions.runners"}}
+		</a>
+		{{end}}
 		<a class="{{if .PageIsSettingsDelete}}active {{end}}item" href="{{.OrgLink}}/settings/delete">
 			{{.locale.Tr "org.settings.delete"}}
 		</a>
diff --git a/templates/org/settings/runners.tmpl b/templates/org/settings/runners.tmpl
new file mode 100644
index 0000000000..7c70f6d956
--- /dev/null
+++ b/templates/org/settings/runners.tmpl
@@ -0,0 +1,13 @@
+{{template "base/head" .}}
+<div class="page-content organization settings runners">
+	{{template "org/header" .}}
+	<div class="ui container">
+		<div class="ui grid">
+			{{template "org/settings/navbar" .}}
+			<div class="twelve wide column content">
+				{{template "shared/actions/runner_list" .}}
+			</div>
+		</div>
+	</div>
+</div>
+{{template "base/footer" .}}
diff --git a/templates/org/settings/runners_edit.tmpl b/templates/org/settings/runners_edit.tmpl
new file mode 100644
index 0000000000..931ca3701a
--- /dev/null
+++ b/templates/org/settings/runners_edit.tmpl
@@ -0,0 +1,13 @@
+{{template "base/head" .}}
+<div class="page-content organization settings runners">
+	{{template "org/header" .}}
+	<div class="ui container">
+		<div class="ui grid">
+			{{template "org/settings/navbar" .}}
+			<div class="twelve wide column content">
+				{{template "shared/actions/runner_edit" .}}
+			</div>
+		</div>
+	</div>
+</div>
+{{template "base/footer" .}}
diff --git a/templates/repo/actions/list.tmpl b/templates/repo/actions/list.tmpl
new file mode 100644
index 0000000000..c5abff5251
--- /dev/null
+++ b/templates/repo/actions/list.tmpl
@@ -0,0 +1,27 @@
+{{template "base/head" .}}
+<div class="page-content repository">
+	{{template "repo/header" .}}
+
+	<div class="ui container">
+		<div class="ui grid">
+			<div class="four wide column">
+				<div class="ui fluid vertical menu">
+					<a class="item{{if not $.CurWorkflow}} active{{end}}" href="{{$.Link}}">{{.locale.Tr "actions.runs.all_workflows"}}</a>
+					<div class="divider"></div>
+					{{range .workflows}}
+						<a class="item{{if eq .Name $.CurWorkflow}} active{{end}}" href="{{$.Link}}?workflow={{.Name}}">{{.Name}}</a>
+					{{end}}
+				</div>
+			</div>
+			<div class="twelve wide column content">
+				<div id="issue-filters" class="ui stackable grid">
+					<div class="six wide column">
+						{{template "repo/actions/openclose" .}}
+					</div>
+				</div>
+				{{template "repo/actions/runs_list" .}}
+			</div>
+		</div>
+	</div>
+</div>
+{{template "base/footer" .}}
diff --git a/templates/repo/actions/openclose.tmpl b/templates/repo/actions/openclose.tmpl
new file mode 100644
index 0000000000..4190ddf75d
--- /dev/null
+++ b/templates/repo/actions/openclose.tmpl
@@ -0,0 +1,10 @@
+<div class="ui compact tiny menu">
+	<a class="{{if not .IsShowClosed}}active {{end}}item" href="{{$.Link}}?workflow={{.CurWorkflow}}&state=open">
+		{{svg "octicon-issue-opened" 16 "mr-3"}}
+		{{.locale.Tr "actions.runs.open_tab" $.NumOpenActionRuns}}
+	</a>
+	<a class="{{if .IsShowClosed}}active {{end}}item" href="{{$.Link}}?workflow={{.CurWorkflow}}&state=closed">
+		{{svg "octicon-issue-closed" 16 "mr-3"}}
+		{{.locale.Tr "actions.runs.closed_tab" $.NumClosedActionRuns}}
+	</a>
+</div>
diff --git a/templates/repo/actions/runs_list.tmpl b/templates/repo/actions/runs_list.tmpl
new file mode 100644
index 0000000000..2e2e037de0
--- /dev/null
+++ b/templates/repo/actions/runs_list.tmpl
@@ -0,0 +1,25 @@
+<div class="issue list">
+	{{range .Runs}}
+		<li class="item df py-3">
+			<div class="issue-item-left df">
+				{{template "repo/actions/status" .Status}}
+			</div>
+			<div class="issue-item-main f1 fc df">
+				<div class="issue-item-top-row">
+					<a class="index ml-0 mr-2" href="{{if .HTMLURL}}{{.HTMLURL}}{{else}}{{$.Link}}/{{.Index}}{{end}}">
+						{{.Title}} <span class="ui label">{{RefShortName .Ref}}</span>
+					</a>
+				</div>
+				<div class="desc issue-item-bottom-row df ac fw my-1">
+					<b>{{if not $.CurWorkflow}}{{.WorkflowID}} {{end}}#{{.Index}}</b>: {{$.locale.Tr "actions.runs.commit"}}
+					<a href="{{$.RepoLink}}/commit/{{.CommitSHA}}">{{ShortSha .CommitSHA}}</a>&nbsp; {{$.locale.Tr "actions.runs.pushed_by"}} {{.TriggerUser.GetDisplayName | Escape}}
+				</div>
+			</div>
+			<div class="issue-item-right">
+				<div>{{TimeSinceUnix .Updated $.locale}}</div>
+				<div>{{.Duration}}</div>
+			</div>
+		</li>
+	{{end}}
+</div>
+{{template "base/paginate" .}}
diff --git a/templates/repo/actions/status.tmpl b/templates/repo/actions/status.tmpl
new file mode 100644
index 0000000000..fd8a683bda
--- /dev/null
+++ b/templates/repo/actions/status.tmpl
@@ -0,0 +1,12 @@
+{{if .IsWaiting}}
+	<i class="commit-status circle icon gray"></i>
+{{end}}
+{{if .IsRunning}}
+	<i class="commit-status circle icon yellow"></i>
+{{end}}
+{{if .IsSuccess}}
+	<i class="commit-status check icon green"></i>
+{{end}}
+{{if .IsFailure}}
+	<i class="commit-status warning icon red"></i>
+{{end}}
diff --git a/templates/repo/actions/view.tmpl b/templates/repo/actions/view.tmpl
new file mode 100644
index 0000000000..0c04671153
--- /dev/null
+++ b/templates/repo/actions/view.tmpl
@@ -0,0 +1,8 @@
+{{template "base/head" .}}
+
+<div class="page-content repository">
+	{{template "repo/header" .}}
+	<div id="repo-action-view" data-run-index="{{.RunIndex}}" data-job-index="{{.JobIndex}}" data-actions-url="{{.ActionsURL}}"></div>
+</div>
+
+{{template "base/footer" .}}
diff --git a/templates/repo/header.tmpl b/templates/repo/header.tmpl
index 4da91e424d..29ae8d2840 100644
--- a/templates/repo/header.tmpl
+++ b/templates/repo/header.tmpl
@@ -183,6 +183,15 @@
 					</a>
 				{{end}}
 
+				{{if and .EnableActions (not .UnitActionsGlobalDisabled) (.Permission.CanRead $.UnitTypeActions)}}
+					<a class="{{if .PageIsActions}}active {{end}}item" href="{{.RepoLink}}/actions">
+						{{svg "octicon-play"}} {{.locale.Tr "actions.actions"}}
+						{{if .Repository.NumOpenActionRuns}}
+							<span class="ui primary small label">{{CountFmt .Repository.NumOpenActionRuns}}</span>
+						{{end}}
+					</a>
+				{{end}}
+
 				{{if .Permission.CanRead $.UnitTypePackages}}
 					<a href="{{.RepoLink}}/packages" class="{{if .IsPackagesPage}}active {{end}}item">
 						{{svg "octicon-package"}} {{.locale.Tr "packages.title"}}
diff --git a/templates/repo/settings/navbar.tmpl b/templates/repo/settings/navbar.tmpl
index 236a82f348..2119f6b5a4 100644
--- a/templates/repo/settings/navbar.tmpl
+++ b/templates/repo/settings/navbar.tmpl
@@ -32,5 +32,10 @@
 				{{.locale.Tr "repo.settings.lfs"}}
 			</a>
 		{{end}}
+		{{if and .EnableActions (not .UnitActionsGlobalDisabled) (.Permission.CanRead $.UnitTypeActions)}}
+			<a class="{{if .PageIsSettingsRunners}}active {{end}}item" href="{{.RepoLink}}/settings/runners">
+				{{.locale.Tr "actions.runners"}}
+			</a>
+		{{end}}
 	</div>
 </div>
diff --git a/templates/repo/settings/options.tmpl b/templates/repo/settings/options.tmpl
index e1f53072b8..5b7b9ec5f8 100644
--- a/templates/repo/settings/options.tmpl
+++ b/templates/repo/settings/options.tmpl
@@ -433,6 +433,21 @@
 					</div>
 				</div>
 
+				{{if .EnableActions}}
+					{{$isActionsEnabled := .Repository.UnitEnabled $.Context $.UnitTypeActions}}
+					<div class="inline field">
+						<label>{{.locale.Tr "actions.actions"}}</label>
+						{{if .UnitTypeActions.UnitGlobalDisabled}}
+							<div class="ui checkbox tooltip disabled" data-content="{{.locale.Tr "repo.unit_disabled"}}">
+						{{else}}
+							<div class="ui checkbox">
+						{{end}}
+							<input class="enable-system" name="enable_actions" type="checkbox" {{if $isActionsEnabled}}checked{{end}}>
+							<label>{{.locale.Tr "repo.settings.actions_desc"}}</label>
+						</div>
+					</div>
+				{{end}}
+
 				{{if not .IsMirror}}
 					<div class="ui divider"></div>
 					{{$pullRequestEnabled := .Repository.UnitEnabled $.Context $.UnitTypePullRequests}}
diff --git a/templates/repo/settings/runner_edit.tmpl b/templates/repo/settings/runner_edit.tmpl
new file mode 100644
index 0000000000..10d410f096
--- /dev/null
+++ b/templates/repo/settings/runner_edit.tmpl
@@ -0,0 +1,9 @@
+{{template "base/head" .}}
+<div class="page-content repository settings runners">
+	{{template "repo/header" .}}
+	{{template "repo/settings/navbar" .}}
+	<div class="ui container">
+		{{template "shared/actions/runner_edit" .}}
+	</div>
+</div>
+{{template "base/footer" .}}
diff --git a/templates/repo/settings/runners.tmpl b/templates/repo/settings/runners.tmpl
new file mode 100644
index 0000000000..d3a0b64fc5
--- /dev/null
+++ b/templates/repo/settings/runners.tmpl
@@ -0,0 +1,9 @@
+{{template "base/head" .}}
+<div class="page-content repository settings runners">
+	{{template "repo/header" .}}
+	{{template "repo/settings/navbar" .}}
+	<div class="ui container">
+		{{template "shared/actions/runner_list" .}}
+	</div>
+</div>
+{{template "base/footer" .}}
diff --git a/templates/shared/actions/runner_edit.tmpl b/templates/shared/actions/runner_edit.tmpl
new file mode 100644
index 0000000000..5cb65eb0e4
--- /dev/null
+++ b/templates/shared/actions/runner_edit.tmpl
@@ -0,0 +1,102 @@
+<div class="runner-container">
+	{{template "base/alert" .}}
+	<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 dib disabled">
+					<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 dib disabled">
+					<label>{{.locale.Tr "actions.runners.last_online"}}</label>
+					<span>{{TimeSinceUnix .Runner.LastOnline $.locale}}</span>
+				</div>
+				<div class="field dib disabled">
+					<label>{{.locale.Tr "actions.runners.agent_labels"}}</label>
+					<span>
+						{{range .Runner.AgentLabels}}
+						<span>{{.}}</span>
+						{{end}}
+					</span>
+				</div>
+				<div class="field dib disabled">
+					<label>{{.locale.Tr "actions.runners.owner_type"}}</label>
+					<span>{{.Runner.OwnType}}</span>
+				</div>
+			</div>
+
+			<div class="ui 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="field tooltip" data-content="Labels are comma-separated. Whitespace at the beginning, end, and around the commas are ignored.">
+				<label for="custom_labels">{{.locale.Tr "actions.runners.custom_labels"}}</label>
+				<input id="custom_labels" name="custom_labels" value="{{Join .Runner.CustomLabels `,`}}">
+				<p class="help">{{.locale.Tr "actions.runners.custom_labels_helper"}}</p>
+			</div>
+
+			<div class="ui 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 "runners.task_list.no_tasks"}}</td>
+				</tr>
+				{{end}}
+			</tbody>
+		</table>
+		{{template "base/paginate" .}}
+	</div>
+	<div class="ui small basic delete modal" id="runner-delete-modal">
+		<div class="ui icon 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/delete_modal_actions" .}}
+	</div>
+</div>
diff --git a/templates/shared/actions/runner_list.tmpl b/templates/shared/actions/runner_list.tmpl
new file mode 100644
index 0000000000..eabddbb30c
--- /dev/null
+++ b/templates/shared/actions/runner_list.tmpl
@@ -0,0 +1,90 @@
+<div class="runner-container">
+	{{template "base/alert" .}}
+
+	<h4 class="ui top attached header">
+		{{.locale.Tr "actions.runners.runner_manage_panel"}} ({{.locale.Tr "admin.total" .Total}})
+		<div class="ui right">
+			<div class="ui top right pointing dropdown">
+				<button class="ui button primary">
+					{{.locale.Tr "actions.runners.new"}}
+					{{svg "octicon-triangle-down" 14 "dropdown icon"}}
+				</button>
+				<div class="menu">
+					<div class="item">
+						{{/* TODO: replece the document link when there's a better one than the README of act_runner */}}
+						<a href="https://gitea.com/gitea/act_runner/src/branch/main/README.md">{{.locale.Tr "actions.runners.new_notice"}}</a>
+					</div>
+					<div class="divider"></div>
+					<div class="header">
+						Registration Token
+					</div>
+					<div class="ui input">
+						<input type="text" value="{{.RegistrationToken}}">
+						<div class="ui basic label button" data-clipboard-text="{{.RegistrationToken}}">
+							{{svg "octicon-copy" 14}}
+						</div>
+					</div>
+					<div class="divider"></div>
+					<div class="item">
+						<a href="{{$.Link}}/reset_registration_token">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}}">
+			<!-- Search Text -->
+			<div class="ui fluid action input" style="max-width: 70%;">
+				<input name="q" value="{{.Keyword}}" placeholder="{{.locale.Tr "explore.search"}}..." autofocus>
+				<button class="ui primary button">{{.locale.Tr "explore.search"}}</button>
+			</div>
+		</form>
+	</div>
+	<div class="ui attached table segment">
+		<table class="ui very basic striped table unstackable">
+			<thead>
+				<tr>
+					<th data-sortt-asc="online" data-sortt-desc="offline">{{.locale.Tr "actions.runners.status"}}</th>
+					<th data-sortt-asc="alphabetically">{{.locale.Tr "actions.runners.id"}}</th>
+					<th>{{.locale.Tr "actions.runners.name"}}</th>
+					<th>{{.locale.Tr "actions.runners.owner_type"}}</th>
+					<th>{{.locale.Tr "actions.runners.labels"}}</th>
+					<th>{{.locale.Tr "actions.runners.last_online"}}</th>
+					<th></th>
+				</tr>
+			</thead>
+			<tbody>
+				{{if .Runners}}
+					{{range .Runners}}
+					<tr>
+						<td>
+							<span class="runner-status-{{if .IsOnline}}online{{else}}offline{{end}}">{{.StatusLocaleName $.locale}}</span>
+						</td>
+						<td>{{.ID}}</td>
+						<td><p class="tooltip" data-content="{{.Description}}">{{.Name}}</p></td>
+						<td>{{.OwnType}}</td>
+						<td class="runner-tags">
+							{{range .AllLabels}}<span class="ui label">{{.}}</span>{{end}}
+						</td>
+						<td>{{if .LastOnline}}{{TimeSinceUnix .LastOnline $.locale}}{{else}}{{$.locale.Tr "never"}}{{end}}</td>
+						<td class="runner-ops">
+							{{if .Editable $.RunnerOnwerID $.RunnerRepoID}}
+							<a href="{{$.Link}}/{{.ID}}">{{svg "octicon-pencil"}}</a>
+							{{end}}
+						</td>
+					</tr>
+					{{end}}
+				{{else}}
+					<tr>
+						<td class="center aligned" colspan="6">{{.locale.Tr "actions.runners.none"}}</td>
+					</tr>
+				{{end}}
+			</tbody>
+		</table>
+	</div>
+
+	{{template "base/paginate" .}}
+
+</div>