{% extends "base.html" %}

{% block title %}Stack history for {{stack_name}}{% endblock %}

{% block content %}
<main>
	<header>
		<h1>Stack history for <span class="stack-name">{{stack_name}}</span></h1>
		<div id="page-actions">
		</div>
	</header>
	<section class="versions">
		{% for (i, commit) in commits.iter().enumerate() %}
		<article>
			<p>
				<time datetime="{{commit.date}}">{{commit.date_human()}}</time>
				<span class="commit_id">
					{{commit.oid[..7]}}
				</span>
			</p>
			<details open>
				<summary title="{{commit.message}} ({{commit.author}})">
					{{commit.message}}
				</summary>
				<code>
					{% for line in commit.diff() %}
					{% match line.chars().next() %}
					{% when Some with ('+') %}
					<pre class="add">{{line}}</pre>
					{% when Some with ('-') %}
					<pre class="del">{{line}}</pre>
					{% when _ %}
					<pre class="context">{{line}}</pre>
					{% endmatch %}
					{% endfor %}
				</code>
			</details>
			<div class="actions">
				{% if i == 0 %}
				<button disabled>CURRENT</button>
				{% else %}
				<form method="POST" action="./history/revert">
					<input type="hidden" name="oid" value="{{commit.oid}}" />
					<button type="submit">Revert to this revision</button>
				</form>
				{% endif %}
			</div>
		</article>
		{% endfor %}
	</section>
</main>

<style scoped>
	.stack-name {
		color: var(--text-accent);
	}

	summary {
		cursor: pointer;
	}

	.versions {
		display: flex;
		flex-direction: column;
		gap: 1ch;

		& article {
			border: 1px solid var(--table-border-color);
			background-color: var(--table-bg);
			border-radius: 3px;
			padding: 8px;
			display: flex;
			flex-direction: column;
			gap: 0.5ch;

			& p {
				font-size: 9pt;
				margin: 0;

				& .commit_id::before {
					content: " - ";
				}
			}

			& code {
				font-size: 10pt;
				background-color: var(--bg-raised);
				display: flex;
				flex-direction: column;
				border-radius: 5px;
				padding: 4px 6px;
				margin-top: 0.5ch;
			}

			& pre {
				&.context {
					color: var(--button-color);
				}

				&.add {
					color: var(--success-text);
				}

				&.del {
					color: var(--danger-text);
				}
			}
		}
	}

	.actions {
		& button {
			padding: 2px 6px;
			font-size: 10pt;
		}
	}

	header {
		margin-bottom: 1rem;
	}
</style>

<script type="module">
	const actions = document.getElementById("page-actions");
	const toggle_text = ["Collapse all", "Expand all"];

	/** @type {HTMLDetailsElement[]} */
	const versions = [...document.querySelectorAll(".versions details")];

	let toggle = document.createElement("button");
	toggle.type = "button";
	toggle.append(document.createTextNode(toggle_text[0]));
	toggle.addEventListener("click", () => {
		const index = toggle_text.indexOf(toggle.textContent);
		versions.forEach(version => { version.open = index == 1 });
		toggle.textContent = toggle_text[(index + 1) % 2];
	});
	actions.append(toggle);
</script>
{% endblock %}