// SPDX-License-Identifier: AGPL-3.0-or-later

package web

import (
	"strconv"
	"strings"
)

// MRList is the list of the merge requests of a repository: the open ones,
// then the merged and closed ones.
templ MRList(l Layout, p MRListPage) {
	@Shell(l, mrListRail(p)) {
		if p.Live {
			@LiveSlot("mr-notice")
		}
		<div class="filter">
			<label for="mr-filter" class="sr">filter</label>
			<input
				id="mr-filter"
				type="search"
				data-filter=".mrs tbody tr"
				placeholder="Filter by title, branch, author or state…"
				autocomplete="off"
				hx-on:input="ermite.filter(this)"
			/>
		</div>
		if p.Newest == "" {
			<h2 class="rule-h"><span>Open</span><span class="count">{ itoa(len(p.Open)) }</span></h2>
			@mrRows(p.Open, "Open merge requests")
			if len(p.Open) == 0 {
				<p class="lede dim">no open merge requests.</p>
			}
			if p.OpenNote != "" {
				<p class="note">{ p.OpenNote }</p>
			}
		}
		<h2 class="rule-h"><span>Merged and closed</span><span class="count">{ itoa(len(p.Done)) }</span></h2>
		@mrRows(p.Done, "Merged and closed merge requests")
		if len(p.Done) == 0 {
			<p class="lede dim">nothing merged or closed yet.</p>
		}
		if p.Older != "" || p.Newest != "" {
			<nav class="pager" aria-label="Pages">
				if p.Newest != "" {
					<a class="btn" href={ templ.SafeURL(p.Newest) }>← Newest</a>
				} else {
					<span class="btn" aria-disabled="true">← Newest</span>
				}
				if p.Older != "" {
					<a class="btn" href={ templ.SafeURL(p.Older) } rel="next">Older →</a>
				} else {
					<span class="btn" aria-disabled="true">Older →</span>
				}
			</nav>
		}
	}
}

templ mrRows(rows []MRRow, label string) {
	if len(rows) > 0 {
		<table class="list mrs" aria-label={ label }>
			<tbody data-rows>
				for _, m := range rows {
					<tr data-cursor?={ m.Cursor } data-state={ m.State }>
						<td class="c-n mute">{ m.Number }</td>
						<td class="c-state">{ m.State }</td>
						<td class="c-subject"><a href={ templ.SafeURL(m.Href) }>{ m.Title }</a> <span class="mute">{ m.Branches }</span></td>
						<td class="c-who dim">{ m.Author }</td>
						<td class="c-when nowrap dim">
							if m.WhenAt != "" {
								<time datetime={ m.WhenAt } title={ m.WhenAt }>{ m.When }</time>
							}
						</td>
					</tr>
				}
			</tbody>
		</table>
	}
}

templ mrListRail(p MRListPage) {
	<section aria-labelledby="r-states">
		<h2 id="r-states">States</h2>
		<dl class="kv">
			<dt>open</dt>
			<dd>awaits review</dd>
			<dt>merged</dt>
			<dd>the target took the branch</dd>
			<dt>closed</dt>
			<dd>refused, branch kept</dd>
		</dl>
	</section>
	<section aria-labelledby="r-new">
		<h2 id="r-new">Open one</h2>
		if len(p.Branches) > 0 {
			<p class="dim">compare a branch with { p.Default }:</p>
			<nav class="outline" aria-label="Branches">
				for _, b := range p.Branches {
					<a href={ templ.SafeURL(b.Href) }>{ b.Name }</a>
				}
			</nav>
		} else {
			<p class="dim">there is no other branch to merge yet.</p>
		}
		@CloneBlock(p.CLI)
	</section>
}

// MergeRequest is a merge request: its facts, its description, the diff with
// the notes under their lines, the general comments; and in the rail the merge
// form, the checks, the settings, the commits and the files.
templ MergeRequest(l Layout, p MRPage) {
	@Shell(l, mrRail(p)) {
		<section class="mr-card">
			<header class="show mr-h">
				<h1><span class="mute">{ p.Number }</span> { p.Title }</h1>
				<dl class="kv show-kv">
					<dt>state</dt>
					<dd class="mr-state" data-state={ p.State }>
						{ p.State }
						if p.MergedShort != "" {
							{ " · " }<a href={ templ.SafeURL(p.MergedHref) }>{ p.MergedShort }</a>{ " · " + p.MergeMode }
						}
					</dd>
					<dt>branch</dt>
					<dd>
						@branchLink(p.Source, p.SourceHref)
						{ " → " }
						@branchLink(p.Target, p.TargetHref)
					</dd>
					<dt>opened</dt>
					<dd>
						{ p.Opened.Name }
						if p.Opened.WhenAt != "" {
							{ " · " }<time datetime={ p.Opened.WhenAt } title={ p.Opened.Abs }>{ p.Opened.When }</time>
						}
					</dd>
					if p.UpdatedAt != "" {
						<dt>updated</dt>
						<dd><time datetime={ p.UpdatedAt }>{ p.Updated }</time></dd>
					}
				</dl>
			</header>
			if p.Desc != "" {
				<article class="mr-desc prose" aria-label="description" hx-ignore>
					@templ.Raw(string(p.Desc))
				</article>
			}
		</section>
		if p.Deleting != "" {
			<p class="note" role="status">merged. the branch { p.Deleting } is being deleted.</p>
		}
		if p.MergeError != "" {
			<p class="d-err" role="alert">{ p.MergeError }</p>
		}
		@LiveSlot("mr-notice")
		if p.Since != nil {
			<nav class="since" aria-label="Diff range">
				<a
					href={ templ.SafeURL(p.Since.AllHref) }
					if !p.Since.Current {
						aria-current="page"
					}
				>all changes <span class="mute">vs { p.Target }</span></a>
				<a
					href={ templ.SafeURL(p.Since.SinceHref) }
					if p.Since.Current {
						aria-current="page"
					}
				>since your last read <span class="mute">{ p.Since.ReadShort } → { p.Since.HeadShort }</span></a>
			</nav>
		}
		if p.SinceNote != "" {
			<p class="notice">{ p.SinceNote }</p>
		}
		@mrBar(p)
		if p.Invisible {
			<p class="notice">
				this diff holds invisible characters (direction controls, zero-width characters). They are shown as
				<span class="inv">&lt;U+XXXX&gt;</span> markers, never applied.
			</p>
		}
		if p.Note != "" {
			<p class="notice">{ p.Note }</p>
		}
		<div
			id="diffs"
			data-mr
			if p.Canonical != "" {
				data-canonical={ p.Canonical }
			}
			if p.Both {
				data-diff={ p.View }
			} else {
				data-view={ p.View }
			}
			if p.Both && !p.Pinned {
				hx-live="this.dataset.diff = sessionStorage.getItem('diff') || this.dataset.diff"
			}
		>
			for _, f := range p.Files {
				@DiffFileView(f, p.DiffView)
			}
			if len(p.Files) == 0 {
				<p class="note">no changed files.</p>
			}
		</div>
		<h2 class="rule-h" id="comments"><span>Comments</span><span class="count">{ itoa(p.NUnresolved) } open / { itoa(p.NComments) }</span></h2>
		for _, c := range p.Loose {
			@commentView(c, "")
		}
		for _, c := range p.General {
			@commentView(c, "")
		}
		if p.NComments == 0 {
			<p class="dim">no comments yet.</p>
		}
		if p.GeneralForm != nil {
			@commentForm(*p.GeneralForm, "")
		}
	}
}

templ branchLink(name, href string) {
	if href != "" {
		<a href={ templ.SafeURL(href) }>{ name }</a>
	} else {
		{ name }
	}
}

// lineNotes are the comments under a line of the diff, and the form to write
// one when the reader asked for it. The diff is in the page twice (unified and
// split); the suffix keeps the ids unique, the unified table having none.
templ lineNotes(notes []CommentView, form *CommentForm, suffix string) {
	for _, c := range notes {
		@commentView(c, suffix)
	}
	if form != nil {
		@commentForm(*form, suffix)
	}
}

// commentView is a note: a ruled block, under its line in the diff or in the
// list of comments. Body comes only from the safe Markdown renderer.
templ commentView(c CommentView, suffix string) {
	<div class="cmt" id={ "c" + c.ID + suffix } data-resolved={ boolText(c.Resolved) } data-thread?={ c.Reply != nil }>
		<p class="c-head">
			<span class="c-who">{ c.Author }</span>
			if c.WhenAt != "" {
				{ " " }<time class="mute" datetime={ c.WhenAt } title={ c.Abs }>{ c.When }</time>
			}
			if c.Resolved {
				{ " " }<span class="c-state">resolved</span>
			}
			if c.Outdated {
				{ " " }<span class="c-state" title="written on an earlier head; the line may have moved">outdated</span>
			}
			if c.Where != "" {
				{ " " }<span class="c-where mute">{ c.Where }</span>
			}
		</p>
		if len(c.Parts) > 0 {
			<p class="c-text">@userText(c.Parts)</p>
		} else if c.Deleted {
			if c.Verdict != "" {
				<p class="mute">text deleted</p>
			} else {
				<p class="mute">deleted note</p>
			}
		} else {
			<div class="c-body prose">
				if suffix == "-s" {
					@templ.Raw(string(c.BodySplit))
				} else {
					@templ.Raw(string(c.Body))
				}
			</div>
		}
		if c.Edited {
			<span class="mute">edited</span>
		}
		if c.Verdict != "" {
			<span class="c-state">{ c.Verdict }</span>
		}
		if c.Range != "" {
			<span class="mute">{ c.Range }</span>
		}
		if c.Quote != "" {
			<button type="button" class="btn" data-js data-quote={ c.Quote }>Quote</button>
		}
		if c.Edit != nil {
			<details><summary>Edit</summary><form method="post" action={ templ.SafeURL(c.Edit.Action) }><input type="hidden" name="from" value={ itoa(c.Edit.From) }/><textarea name="text" maxlength="8000">{ c.Edit.Text }</textarea><button class="btn" type="submit">Save</button></form></details>
		}
		if c.Delete != nil {
			<details><summary>Delete</summary><form method="post" action={ templ.SafeURL(c.Delete.Action) }><input type="hidden" name="from" value={ itoa(c.Delete.From) }/><p>Delete this note?</p><button class="btn" type="submit">Confirm delete</button></form></details>
		}
		for _, reply := range c.Replies {
			@commentView(reply, suffix)
		}
		if c.Reply != nil {
			<details data-reply>
				<summary>Reply</summary>@commentForm(*c.Reply, suffix)
			</details>
		}
		if c.Resolve != nil {
			<form class="c-act" method="post" action={ templ.SafeURL(c.Resolve.Action) }>
				<input type="hidden" name="resolved" value={ boolText(c.Resolve.Value) }/>
				if c.Resolve.From > 0 {
					<input type="hidden" name="from" value={ itoa(c.Resolve.From) }/>
				}
				<button type="submit" class="btn">{ c.Resolve.Label }</button>
			</form>
		}
	</div>
}

func boolText(b bool) string {
	if b {
		return "true"
	}
	return "false"
}

// commentForm writes a comment, general or on a line.
templ commentForm(f CommentForm, suffix string) {
	<form class="cform" method="post" action={ templ.SafeURL(f.Action) }>
		<label for={ f.ID + suffix }>{ f.Title }</label>
		<textarea
			id={ f.ID + suffix }
			name="text"
			rows="3"
			maxlength="8000"
			if f.Plain {
				required
				placeholder="plain text, 8000 characters at most"
			} else {
				placeholder="Markdown, 8000 characters at most"
			}
			if f.Focus {
				autofocus
			}
		></textarea>
		if f.Path != "" {
			<input type="hidden" name="path" value={ f.Path }/>
			<input type="hidden" name="line" value={ f.Line }/>
			<input type="hidden" name="side" value={ f.Side }/>
			<label>from line <input type="number" name="start_line" min="1" value={ f.StartLine }/></label>
		}
		if f.ReplyTo != "" {
			<input type="hidden" name="reply_to" value={ f.ReplyTo }/>
		}
		if f.Path == "" && f.ReplyTo == "" && !f.Plain {
			<fieldset><legend>Verdict</legend><label><input type="radio" name="verdict" value="" checked/>Note</label><label><input type="radio" name="verdict" value="approve"/>Approve</label><label><input type="radio" name="verdict" value="changes_requested"/>Request changes</label></fieldset>
		}
		if f.From > 0 {
			<input type="hidden" name="from" value={ itoa(f.From) }/>
		}
		<div class="f-btns">
			<button type="submit" class="btn primary">Comment</button>
			if f.Cancel != "" {
				<a class="btn" href={ templ.SafeURL(f.Cancel) }>Cancel</a>
			}
		</div>
	</form>
}

templ mrRail(p MRPage) {
	<section aria-labelledby="r-files" class="r-files">
		<h2 id="r-files">
			Files <span class="count">{ itoa(len(p.Files)) }</span><kbd aria-hidden="true">g f</kbd>
			<button type="button" class="btn icon fold" data-js aria-expanded="true" title="fold the list of files" hx-on:click="ermiteMR.foldFiles()">
				<span class="ico i-chevron" aria-hidden="true"></span><span class="sr">fold the list of files</span>
			</button>
		</h2>
		@FileList(p.Files)
	</section>
	if len(p.Verdicts) > 0 {
		<section>
			<h2>Verdicts</h2>
			<ul>
				for _, v := range p.Verdicts {
					<li>
						<a href={ templ.SafeURL(v.Href) }>{ v.Author }: { v.Label }</a>
						if v.Stale {
							<span class="mute">(stale)</span>
						}
					</li>
				}
			</ul>
		</section>
	}
	@MRChecks(p.Checks)
	<section aria-labelledby="r-commits">
		<h2 id="r-commits">Commits <span class="count">{ itoa(len(p.Commits)) }</span></h2>
		<ul class="pcommits">
			for _, c := range p.Commits {
				<li data-new?={ c.New }>
					<a href={ templ.SafeURL(c.Href) }>{ c.Short }</a>
					<span class="s">{ c.Subject }</span>
					if c.Sig != nil {
						@signaturePill(c.Sig)
					}
					<span class="mute">
						{ c.Author }
						if c.WhenAt != "" {
							{ " · " }<time datetime={ c.WhenAt }>{ c.When }</time>
						}
						if c.New {
							{ " · new" }
						}
					</span>
				</li>
			}
		</ul>
		if len(p.Commits) == 0 {
			<p class="dim">no commit to merge.</p>
		}
		if p.CommitsNote != "" {
			<p class="note">{ p.CommitsNote }</p>
		}
	</section>
	<section aria-labelledby="r-settings">
		<h2 id="r-settings">Settings</h2>
		<dl class="kv">
			<dt>modes</dt>
			<dd>{ strings.Join(p.Modes, ", ") }</dd>
			<dt>checks</dt>
			<dd>
				if p.ChecksBlock {
					failing ones block the merge
				} else {
					do not block the merge
				}
			</dd>
		</dl>
	</section>
}

// mrBar is the bar above the diff, which follows the review: the totals, the
// layout of the diff, the state of the checks and, for the owner of an open
// request, the merge menu and the other actions. Each menu is a <details>: it
// works without scripts; with them, M and the keys of the menu drive it.
templ mrBar(p MRPage) {
	<div class="diff-tools mr-bar" role="group" aria-label="Diff view and merge">
		<span class="dim">{ plural(p.NFiles, "file", "files") } · <span class="plus">+{ itoa(p.Adds) }</span> <span class="minus">-{ itoa(p.Dels) }</span></span>
		@diffViewMenu(p.DiffView)
		<span class="grow"></span>
		@MRChecksSum(p.ChecksSum)
		if p.Box != nil {
			@mergeMenu(p)
			@moreMenu(p)
		}
	</div>
}

// mergeMenu is the merge of an open request, for the owner: the form (it
// carries the head that was read), or "Ready for review" for a draft. The
// mode and the branch deletion have keys (1-3, D) while it is open.
//
// The badge is a live slot (mr-mergeability); the modes and the button read
// its data-* attributes (hx-live bindings), so that they follow the slot when
// the stream replaces its content. The server renders the same state in the
// attributes, for a page without scripts.
templ mergeMenu(p MRPage) {
	<details class="menu mmenu" id="merge-menu" data-state="open" open?={ p.Box.Error != "" }>
		<summary class="btn primary" aria-keyshortcuts="Shift+M">
			if p.Box.ReadyAction != "" {
				Draft
			} else {
				Merge
			}
			<kbd aria-hidden="true">M</kbd>
		</summary>
		<div class="menu-pop" role="group" aria-label="Merge">
			<dl class="kv">
				<dt>head</dt>
				<dd>
					if p.Box.HeadGone {
						gone: the source branch was deleted
					} else {
						{ p.HeadShort }
					}
				</dd>
				<dt>into</dt>
				<dd>{ p.Target }</dd>
			</dl>
			if p.Box.Error != "" {
				<p class="d-err" role="alert">{ p.Box.Error }</p>
			}
			if p.Box.ReadyAction != "" {
				<p class="d-draft">this is a draft: it cannot be merged until it is ready for review.</p>
				<form class="d-btns" method="post" action={ templ.SafeURL(p.Box.ReadyAction) }>
					<button type="submit" class="btn primary" data-default title="remove the draft prefix from the title">Ready for review</button>
				</form>
			} else if !p.Box.HeadGone {
				@mrMergeabilitySlot(p.Box.Mergeability)
				<form class="d-acts" method="post" action={ templ.SafeURL(p.Box.MergeAction) }>
					<input type="hidden" name="head_id" value={ p.Box.Head }/>
					<fieldset class="d-modes">
						<legend class="sr">merge mode</legend>
						for i, m := range p.Box.Modes {
							<label>
								<input
									type="radio"
									name="mode"
									value={ m.Value }
									checked?={ i == p.Box.Checked() }
									disabled?={ m.Disabled }
									title={ m.Reason }
									:disabled="this.value === 'fast-forward' ? q('[data-mergeability]').data.ffOk !== true : q('[data-mergeability]').data.mergeOk !== true"
									:title="this.value === 'fast-forward' ? q('[data-mergeability]').data.ffReason : q('[data-mergeability]').data.mergeReason"
								/>
								{ m.Label }
								if i < 9 {
									<kbd aria-hidden="true">{ itoa(i + 1) }</kbd>
								}
							</label>
						}
					</fieldset>
					if p.Box.Signed {
						<p class="d-note" id="mr-signing">
							squash and merge commits are signed with ermite's own key (generated on first start).
							if p.Box.Fingerprint != "" {
								fingerprint <code>{ p.Box.Fingerprint }</code>
							}
							<code>ermite signing-key show</code> prints it.
						</p>
					}
					if p.Box.CanDeleteBranch {
						<label class="d-check"><input type="checkbox" name="delete_branch" value="1"/> delete { p.Source } after the merge <kbd aria-hidden="true">D</kbd></label>
					}
					<div class="d-btns">
						<button
							type="submit"
							class="btn primary"
							data-default
							disabled?={ !p.Box.CanMerge() }
							title={ p.Box.MergeTitle() }
							:disabled="!this.form.querySelector('input[name=mode]:checked:not(:disabled)')"
							:title="(this.form.querySelector('input[name=mode]:checked') || {}).title || ''"
						>Merge into { p.Target }</button>
					</div>
				</form>
			}
		</div>
	</details>
}

// MRMergeability is the content of the mergeability slot: the badge, and the
// state the controls of the merge box read.
templ MRMergeability(v MergeabilityView) {
	<span
		data-mergeability
		data-state={ v.State }
		data-ff-ok={ strconv.FormatBool(v.FFOk) }
		data-merge-ok={ strconv.FormatBool(v.MergeOk) }
		data-ff-reason={ v.FFReason }
		data-merge-reason={ v.MergeReason }
	>
		<span class="badge" data-state={ v.State }>{ v.Label }</span>
		if v.Detail != "" {
			{ " " }<span class="dim">{ v.Detail }</span>
		}
	</span>
	if len(v.Paths) > 0 {
		<ul class="mg-paths" aria-label="conflicting files">
			for _, path := range v.Paths {
				<li><code>{ path }</code></li>
			}
		</ul>
	}
	if v.PathsNote != "" {
		<p class="dim">{ v.PathsNote }</p>
	}
}

// mrMergeabilitySlot is the status region of the badge, with its content: the
// stream replaces the children, never the element (see LiveSlot).
templ mrMergeabilitySlot(v MergeabilityView) {
	<div id="mr-mergeability" class="live-slot" role="status" data-slot>
		@MRMergeability(v)
	</div>
}

// MRMergeabilityFragment is the slot as the stream sends it.
templ MRMergeabilityFragment(v MergeabilityView) {
	@mrMergeabilitySlot(v)
}

// moreMenu is what else the owner does with an open request: mark the head
// read, close it, merge it from a terminal.
templ moreMenu(p MRPage) {
	<details class="menu omenu">
		<summary class="btn icon" aria-label="More actions" title="more actions">⋯</summary>
		<div class="menu-pop" role="group" aria-label="More actions">
			if p.Box.CanMarkRead {
				<form method="post" action={ templ.SafeURL(p.Box.ReadAction) }>
					<input type="hidden" name="head_id" value={ p.Box.Head }/>
					<button type="submit" title="the next visit can show only what changed after this head" class="btn" aria-keyshortcuts="Shift+R" data-read>Mark read <kbd aria-hidden="true">R</kbd></button>
				</form>
			}
			<form method="post" action={ templ.SafeURL(p.Box.CloseAction) }>
				<button type="submit" title="close without merging; the branch is kept" class="btn danger">Close</button>
			</form>
			if !p.Box.HeadGone && p.Box.ReadyAction == "" {
				<details class="d-or">
					<summary class="mute">or from a terminal</summary>
					@CloneBlock(p.Box.CLI)
				</details>
			}
		</div>
	</details>
}

templ Compare(l Layout, p ComparePage) {
	@Shell(l, compareRail(p)) {
		<header class="show mr-h">
			<h1>{ p.Source } → { p.Target }</h1>
			<dl class="kv show-kv">
				<dt>branch</dt>
				<dd><a href={ templ.SafeURL(p.SourceHref) }>{ p.Source }</a></dd>
				<dt>target</dt>
				<dd><a href={ templ.SafeURL(p.TargetHref) }>{ p.Target }</a></dd>
				<dt>ahead</dt>
				<dd>{ p.AheadText }</dd>
			</dl>
		</header>
		if p.Note != "" {
			<p class="notice">{ p.Note }</p>
		}
		if p.Existing != nil {
			<p class="notice">an open merge request already covers these branches: <a href={ templ.SafeURL(p.Existing.Href) }>{ p.Existing.Label }</a></p>
		}
		if p.Create != nil {
			<form class="cform create" method="post" action={ templ.SafeURL(p.Create.Action) }>
				<input type="hidden" name="source" value={ p.Create.Source }/>
				<input type="hidden" name="target" value={ p.Create.Target }/>
				<label for="mr-title">title</label>
				<input id="mr-title" name="title" type="text" maxlength="120" required value={ p.Create.Title } autocomplete="off"/>
				<label for="mr-desc">description</label>
				<textarea id="mr-desc" name="description" rows="4" maxlength="8000" placeholder="Markdown, optional"></textarea>
				<div class="f-btns">
					<button type="submit" class="btn primary">Create merge request</button>
				</div>
			</form>
		}
		if p.HasDiff {
			<div class="diff-tools" role="group" aria-label="Diff view">
				<span class="dim">{ plural(p.NFiles, "file", "files") } · <span class="plus">+{ itoa(p.Adds) }</span> <span class="minus">-{ itoa(p.Dels) }</span></span>
				<span class="grow"></span>
				@diffViewMenu(p.DiffView)
			</div>
			if p.Invisible {
				<p class="notice">
					this diff holds invisible characters (direction controls, zero-width characters). They are shown as
					<span class="inv">&lt;U+XXXX&gt;</span> markers, never applied.
				</p>
			}
			<div
				id="diffs"
				if p.Both {
					data-diff={ p.View }
				} else {
					data-view={ p.View }
				}
				if p.Both && !p.Pinned {
					hx-live="this.dataset.diff = sessionStorage.getItem('diff') || this.dataset.diff"
				}
			>
				for _, f := range p.Files {
					@DiffFileView(f, p.DiffView)
				}
			</div>
		}
	}
}

templ compareRail(p ComparePage) {
	<section aria-labelledby="r-ahead">
		<h2 id="r-ahead">Commits <span class="count">{ itoa(len(p.Ahead)) }</span></h2>
		<ul class="pcommits">
			for _, c := range p.Ahead {
				<li>
					<a href={ templ.SafeURL(c.CHref) }>{ c.Short }</a>
					<span class="s">{ c.Subject }</span>
					<span class="mute">
						{ c.Author }
						if c.WhenAt != "" {
							{ " · " }<time datetime={ c.WhenAt }>{ c.When }</time>
						}
					</span>
				</li>
			}
		</ul>
		if len(p.Ahead) == 0 {
			<p class="dim">no commit ahead of { p.Target }.</p>
		}
	</section>
	if p.HasDiff {
		<section aria-labelledby="r-files">
			<h2 id="r-files">Files <span class="count">{ itoa(len(p.Files)) }</span></h2>
			@FileList(p.Files)
		</section>
	}
	<section aria-labelledby="r-cli">
		<h2 id="r-cli">From a terminal</h2>
		@CloneBlock(p.CLI)
	</section>
}