// 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 row of a repository in the home list. On the left what
// it is: name, description, topics and the pulse of its activity; on the
// right its figures and CI state over its newest commits. 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 }>
		<div class="repo-main">
			<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>
			}
			if len(r.Topics) > 0 {
				<ul class="repo-topics" aria-label={ "Topics of " + r.Name } data-fit>
					for _, t := range r.Topics {
						<li>{ t }</li>
					}
				</ul>
			} else {
				<div class="repo-topics" aria-hidden="true"></div>
			}
			if r.Stats != nil && r.Stats.Pulse != nil {
				@pulse(r.Stats.Pulse)
			} else {
				<div class="repo-pulse" aria-hidden="true"></div>
			}
		</div>
		<div class="repo-head">
			<dl class="repo-stats" aria-label={ "Figures of " + r.Name }>
				if s := r.Stats; s != nil {
					<div><dt>commits</dt><dd>{ s.Commits }</dd></div>
					<div><dt>last 30 days</dt><dd>{ s.Recent }</dd></div>
				}
				<div>
					<dt>last activity</dt>
					if r.ActiveAt != "" {
						<dd><time datetime={ r.ActiveAt } title={ r.ActiveAt }>{ r.Active }</time></dd>
					} else {
						<dd class="mute">never</dd>
					}
				</div>
				if s := r.Stats; s != nil && s.Tag != "" {
					<div class="rs-tag">
						<dt>last tag</dt>
						if s.TagHref != "" {
							<dd><a href={ templ.SafeURL(s.TagHref) } title={ s.Tag + " · made " + s.TagWhen }>{ s.Tag }</a></dd>
						} else {
							<dd title={ s.Tag + " · made " + s.TagWhen }>{ s.Tag }</dd>
						}
					</div>
				}
			</dl>
			if r.CI != nil {
				<a class="repo-ci" href={ templ.SafeURL(r.CI.Href) } title={ r.CI.Title }>
					<span class={ "ck", "ck-" + r.CI.Kind } aria-hidden="true"></span>
					<span class="sr">CI: </span>{ r.CI.Label }
				</a>
			}
		</div>
		if len(r.Commits) > 0 {
			<ul
				class="repo-commits"
				data-full?={ len(r.Commits) == homeRecent }
				aria-label={ "Recent commits of " + r.Name }
			>
				for _, c := range r.Commits {
					<li>
						<a class="rc-sha" href={ templ.SafeURL(c.CHref) }>{ c.Short }</a>
						<span class="rc-subject" title={ c.Subject }>{ c.Subject }</span>
						if c.WhenAt != "" {
							<time class="dim" datetime={ c.WhenAt } title={ c.WhenAt }>{ c.When }</time>
						}
					</li>
				}
			</ul>
		} else if r.NoCommits {
			<p class="repo-commits mute">no commits yet</p>
		}
	</li>
}

// pulse is the activity curve of a home row: a smooth line over a fading
// area on a faint grid, and a dot at today, in colour while the repository
// is active. Nothing moves: the page stays idle. The SVG scales evenly with
// its column, so the dot stays round.
templ pulse(h *Heartbeat) {
	<figure class="repo-pulse" data-live?={ h.Live }>
		<svg viewBox="0 0 600 64" role="img" aria-label={ h.Label } focusable="false">
			<defs>
				<linearGradient id={ h.GradID } x1="0" y1="0" x2="0" y2="1">
					<stop class="pulse-stop-top" offset="0"></stop>
					<stop class="pulse-stop-bottom" offset="1"></stop>
				</linearGradient>
			</defs>
			<path class="pulse-grid" d="M0 21.5 H600 M0 42.5 H600 M0 63.5 H600" vector-effect="non-scaling-stroke"></path>
			<path class="pulse-area" d={ h.Area } fill={ "url(#" + h.GradID + ")" }></path>
			<path class="pulse-line" d={ h.Line } vector-effect="non-scaling-stroke"></path>
			<circle class="pulse-dot" cx={ h.X } cy={ h.Y } r="3.5"></circle>
		</svg>
	</figure>
}

// 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="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>
}