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

package web

// Facts is a key/value block on an 11ch key column.
templ Facts(facts []Fact) {
	<dl class="kv">
		for _, f := range facts {
			<dt>{ f.Key }</dt>
			@FactValue(f)
		}
	</dl>
}

// CloneBlock is a block of copyable shell lines; each has its own [copy]
// button, whose label says "copied" for 1.5 s.
templ CloneBlock(c Clone) {
	<div class="clone" id={ c.ID }>
		for _, line := range c.Lines {
			<div class="clone-line">
				<span class="mute" aria-hidden="true">$ </span><code>{ line }</code>
				<button
					type="button"
					class="btn copy"
					data-js
					data-label="Copy"
					aria-label={ "copy: " + line }
					hx-on:click="ermite.copy(this)"
				>Copy</button>
			</div>
		}
	</div>
}

// HomeRowView is the card of a repository in the home list. Its id is the
// target of SSE swaps; the name link comes first, `enter` follows it.
templ HomeRowView(r HomeRow) {
	<li id={ r.ID } class="repo" data-cursor?={ r.Cursor }>
		<h2 class="repo-name">
			<a href={ templ.SafeURL(r.Href) }>{ r.Name }</a>
			if r.Private {
				<span class="pill">private</span>
			}
			if r.Fresh {
				<span class="pill new">new push</span>
			}
		</h2>
		if r.Desc != "" {
			<p class="repo-desc">{ r.Desc }</p>
		} else {
			<p class="repo-desc mute">no description</p>
		}
		<p class="repo-meta">
			if r.Branch != "" {
				<span class="repo-branch"><span class="ico i-branch" aria-hidden="true"></span>{ r.Branch }</span>
			}
			if r.PushedAt != "" {
				<span>pushed <time datetime={ r.PushedAt } title={ r.PushedAt }>{ r.Pushed }</time></span>
			} else {
				<span>never pushed</span>
			}
		</p>
	</li>
}

// Outline is the README outline; levels indent by 2ch, the h1 is bold.
templ Outline(headings []Heading) {
	<nav class="outline" aria-label="Outline">
		for _, h := range headings {
			<a class={ "l" + itoa(h.Level) } href={ templ.SafeURL("#" + h.ID) }>{ h.Text }</a>
		}
	</nav>
}

// ReadmeCard is a README in a card whose header names the file.
templ ReadmeCard(r Readme) {
	<section class="card readme" aria-labelledby="readme-h">
		<h2 class="card-h" id="readme-h">
			<span class="ico i-file" aria-hidden="true"></span>
			{ r.Name }
		</h2>
		@ReadmeView(r)
	</section>
}

// ReadmeView is a rendered README. Its HTML comes from the Markdown
// renderer, which drops raw HTML and filters URLs.
templ ReadmeView(r Readme) {
	<article class="prose" aria-label={ r.Name } hx-ignore>
		if r.Note != "" {
			<p class="dim">{ r.Note }</p>
		} else {
			@templ.Raw(r.HTML)
		}
	</article>
}

// CommitRows is a cursor table of commits: sha, subject with inline refs,
// author, relative date (absolute in the title).
templ CommitRows(rows []CommitRow) {
	<table class="list commits" aria-label="Commits">
		<tbody data-rows>
			for _, c := range rows {
				<tr
					if c.ID != "" {
						id={ c.ID }
					}
					data-cursor?={ c.Cursor }
				>
					<td class="cur" aria-hidden="true"></td>
					<td class="c-sha mute">{ c.Short }</td>
					<td class="c-subject">
						<a href={ templ.SafeURL(c.CHref) }>{ c.Subject }</a>
						if c.Merge {
							<span class="pill">merge</span>
						}
						for _, b := range c.Branches {
							<span class="pill">{ b }</span>
						}
						for _, t := range c.Tags {
							<span class="pill tag"><span class="sr">tag </span>{ t }</span>
						}
					</td>
					<td class="c-ck">@CommitChecks(c.Checks)</td>
					<td class="c-who dim">{ c.Author }</td>
					<td class="c-when nowrap dim"><time datetime={ c.WhenAt } title={ c.WhenAt }>{ c.When }</time></td>
				</tr>
			}
		</tbody>
	</table>
}