{{if .PageIsSettingsHooksEdit}}
	<h4 class="ui top attached header">
		{{.locale.Tr "repo.settings.recent_deliveries"}}
		{{if .Permission.IsAdmin}}
			<div class="ui right">
				<button class="ui teal tiny button tooltip" id="test-delivery" data-content=
				"{{.locale.Tr "repo.settings.webhook.test_delivery_desc"}}" data-link="{{.Link}}/test" data-redirect="{{.Link}}">{{.locale.Tr "repo.settings.webhook.test_delivery"}}</button>
			</div>
		{{end}}
	</h4>
	<div class="ui attached segment">
		<div class="ui list">
			{{range .History}}
				<div class="item">
					<div class="meta">
						{{if .IsSucceed}}
							<span class="text green">{{svg "octicon-check"}}</span>
						{{else}}
							<span class="text red">{{svg "octicon-alert"}}</span>
						{{end}}
						<a class="ui primary sha label toggle button" data-target="#info-{{.ID}}">{{.UUID}}</a>
						<div class="ui right">
							<span class="text grey time">
								{{.DeliveredString}}
							</span>
						</div>
					</div>
					<div class="info hide" id="info-{{.ID}}">
						<div class="ui top attached tabular menu">
							<a class="item active" data-tab="request-{{.ID}}">{{$.locale.Tr "repo.settings.webhook.request"}}</a>
							<a class="item" data-tab="response-{{.ID}}">
								{{$.locale.Tr "repo.settings.webhook.response"}}
								{{if .ResponseInfo}}
									{{if .IsSucceed}}
										<span class="ui green label">{{.ResponseInfo.Status}}</span>
									{{else}}
										<span class="ui red label">{{.ResponseInfo.Status}}</span>
									{{end}}
								{{else}}
									<span class="ui label">N/A</span>
								{{end}}
							</a>
							{{if or $.Permission.IsAdmin $.IsOrganizationOwner $.PageIsAdmin}}
							<div class="right menu">
								<form class="item" action="{{$.Link}}/replay/{{.UUID}}" method="post">
									{{$.CsrfTokenHtml}}
									<button class="ui tiny button tooltip" data-content="{{$.locale.Tr "repo.settings.webhook.replay.description"}}">{{svg "octicon-sync"}}</button>
								</form>
							</div>
							{{end}}
						</div>
						<div class="ui bottom attached tab segment active" data-tab="request-{{.ID}}">
							{{if .RequestInfo}}
								<h5>{{$.locale.Tr "repo.settings.webhook.headers"}}</h5>
								<pre class="webhook-info"><strong>Request URL:</strong> {{.RequestInfo.URL}}
<strong>Request method:</strong> {{if .RequestInfo.HTTPMethod}}{{.RequestInfo.HTTPMethod}}{{else}}POST{{end}}
{{range $key, $val := .RequestInfo.Headers}}<strong>{{$key}}:</strong> {{$val}}
{{end}}</pre>
								<h5>{{$.locale.Tr "repo.settings.webhook.payload"}}</h5>
								<pre class="webhook-info"><code class="json">{{.PayloadContent}}</code></pre>
							{{else}}
								N/A
							{{end}}
						</div>
						<div class="ui bottom attached tab segment" data-tab="response-{{.ID}}">
							{{if .ResponseInfo}}
								<h5>{{$.locale.Tr "repo.settings.webhook.headers"}}</h5>
								<pre class="webhook-info">{{range $key, $val := .ResponseInfo.Headers}}<strong>{{$key}}:</strong> {{$val}}
{{end}}</pre>
								<h5>{{$.locale.Tr "repo.settings.webhook.body"}}</h5>
								<pre class="webhook-info"><code>{{.ResponseInfo.Body}}</code></pre>
							{{else}}
								N/A
							{{end}}
						</div>
					</div>
				</div>
			{{end}}
		</div>
	</div>
{{end}}