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

package web

import "strings"

// OverlayHelp is the keyboard map panel.
templ OverlayHelp() {
	<dialog id="panel-help" class="panel modal" aria-label="Keyboard shortcuts" hx-on:keydown="event.key === 'Escape' && (event.preventDefault(), this.close())" hx-on:click="event.target === this && this.close()">
		<div class="panel-head"><h2>Keyboard shortcuts</h2><button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()"><kbd>esc</kbd> close</button></div>
		<dl class="keys">
			<div><dt><kbd>ctrl k</kbd> <kbd>:</kbd></dt><dd>go to a section, branch, tag, file or repository</dd></div>
			<div><dt><kbd>?</kbd></dt><dd>this list</dd></div>
			<div><dt><kbd>j</kbd> <kbd>k</kbd></dt><dd>move the row cursor down / up</dd></div>
			<div><dt><kbd>enter</kbd></dt><dd>open the row under the cursor</dd></div>
			<div><dt><kbd>g g</kbd> <kbd>G</kbd></dt><dd>first / last row</dd></div>
			<div><dt><kbd>/</kbd></dt><dd>filter the list; on Files, find a file in the repository</dd></div>
			<div><dt><kbd>b</kbd></dt><dd>{ "switch" } branch or tag</dd></div>
			<div><dt><kbd>s</kbd> <kbd>t</kbd> <kbd>c</kbd> <kbd>r</kbd> <kbd>m</kbd></dt><dd>tabs: summary, files, commits, branches &amp; tags, merge requests</dd></div>
			<div><dt><kbd>g h</kbd></dt><dd>home</dd></div>
			<div><dt><kbd>y</kbd></dt><dd>copy a permalink pinned to the commit</dd></div>
			<div><dt><kbd>d</kbd> <kbd>u</kbd> <kbd>x</kbd></dt><dd>diff: split / unified / collapse or expand all</dd></div>
			<div><dt><kbd>n</kbd></dt><dd>merge request: next note in the diff</dd></div>
			<div><dt><kbd>esc</kbd></dt><dd>close a dialog, leave a field</dd></div>
		</dl>
	</dialog>
}

// OverlayRefs is the ref switcher. It exists only inside a repository.
templ OverlayRefs(l Layout) {
	if l.Ref != "" {
		<dialog id="panel-refs" class="panel modal" aria-label="Switch ref" hx-on:keydown="event.key === 'Escape' && (event.preventDefault(), this.close())" hx-on:click="event.target === this && this.close()">
			<div class="panel-head">
				<label for="refs-filter" class="sr">filter branches and tags</label>
				<input
					id="refs-filter"
					type="search"
					placeholder="Switch branch or tag…"
					autocomplete="off"
					data-pick="#panel-refs li"
					hx-on:input="ermite.filter(this)"
				/>
				<button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()"><kbd>esc</kbd></button>
			</div>
			<div class="panel-cols" data-picklist>
				<section aria-label="Branches">
					<h2>Branches <span class="count">{ itoa(len(l.Heads)) }</span></h2>
					<ul>
						for _, r := range l.Heads {
							@refItem(r)
						}
					</ul>
				</section>
				<section aria-label="Tags">
					<h2>Tags <span class="count">{ itoa(len(l.Tags)) }</span></h2>
					<ul>
						for _, r := range l.Tags {
							@refItem(r)
						}
					</ul>
				</section>
			</div>
		</dialog>
	}
}

templ refItem(r RefItem) {
	<li>
		<a
			href={ templ.SafeURL(r.Href) }
			if r.Current {
				aria-current="true"
			}
		>
			<span class="mark" aria-hidden="true">
				if r.Current {
					●
				} else {
					&nbsp;
				}
			</span>{ r.Name }
		</a>
	</li>
}

// OverlayCmd is the ":" command line: one filterable list mixing sections,
// refs and repos.
templ OverlayCmd(items []CmdItem) {
	<dialog id="panel-cmd" class="panel modal" aria-label="Go to" hx-on:close="ermiteFinder.paletteClose()" hx-on:keydown="event.key === 'Escape' && (event.preventDefault(), this.close())" hx-on:click="event.target === this && this.close()">
		<div class="panel-head">
			<label for="cmd-q" class="sr">go to</label>
			<input
				id="cmd-q"
				type="search"
				placeholder="Go to a section, branch, tag, file or repository…"
				autocomplete="off"
				spellcheck="false"
				aria-controls="cmd-list"
				hx-on:input="ermite.cmdFilter(this); ermiteFinder.palette(this)"
				hx-on:keydown="ermite.cmdKey(event)"
			/>
			<button type="button" class="panel-x" aria-label="Close" hx-on:click="closest('dialog').close()"><kbd>esc</kbd></button>
		</div>
		<ul id="cmd-list" class="cmd-list" aria-label="Targets">
			for i, c := range items {
				<li data-k={ strings.ToLower(c.Kind + " " + c.Label) } data-cursor?={ i == 0 }><a href={ templ.SafeURL(c.Href) } tabindex="-1"><span class="lbl">{ c.Label }</span><span class="k">{ c.Kind }</span></a></li>
			}
		</ul>
		<p class="panel-foot"><span><kbd>↑</kbd><kbd>↓</kbd> move</span><span><kbd>enter</kbd> open</span><span><kbd>esc</kbd> close</span></p>
	</dialog>
}