{% extends "base.html" %}

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

{% block content %}
<script type="module" src="/static/scripts/components/editor/script.js" defer></script>
<main>
	<header>
		<h1>Stack details for <span class="stack-name">{{stack_name}}</span></h1>
		<div class="actions">
			<form action="./start" method="POST">
				<button title="Start all containers" type="submit">
					Start
				</button>
			</form>
			<form action="./restart" method="POST">
				<button title="Restart containers" type="submit">
					Restart
				</button>
			</form>
			<form action="./stop" method="POST">
				<button title="Stop all containers" type="submit">
					Stop
				</button>
			</form>
			<form action="./down" method="POST">
				<button title="Stop and remove all resources" type="submit">
					Down
				</button>
			</form>
			<form action="./delete" method="GET">
				<button title="Stop and delete everything" type="submit">
					Delete
				</button>
			</form>
		</div>
	</header>
	<section class="container-list">
		<h2>Containers</h2>
		<table class="containers table">
			<thead>
				<tr>
					<th>Name</th>
					<th>State</th>
					<th>Image</th>
				</tr>
			</thead>
			<tbody>
				{% for container in containers %}
				<tr>
					<td><a href="/container/{{container.name}}/">{{container.name}}</a></td>
					<td class="status {{container.state}}">{{container.state}}</td>
					<td>{{container.image}}</td>
				</tr>
				{% endfor %}
			</tbody>
		</table>
	</section>
	<section class="editor">
		<h2>
			Editor
			<form action="./history"><button title="View past versions">History</button></form>
		</h2>
		<form method="POST" enctype="multipart/form-data" action="./edit" id="editor-form">
			<div class="error"></div>
			{% for (filename, content) in files %}
			<script type="stackfile" data-name="{{filename}}">{{content|safe}}</script>
			<noscript>
				<h3>{{filename}}</h3>
				<textarea name="files/{{filename}}" class="nojs-editor">{{content|safe}}</textarea>
			</noscript>
			{% endfor %}
			<file-editor></file-editor>
			<div class="row">
				<input style="flex:1" name="commit_message" type="text"
					placeholder="What did you change?" />
				<div id="editor-extra"></div>
				<button class="wide" type="submit">Deploy</button>
			</div>
		</form>
	</section>
</main>

<link rel="stylesheet" href="/static/css/editor.css" />
<link rel="stylesheet" href="/static/css/resource.css" />
<style scoped>
	main {
		display: flex;
		flex-direction: column;
		gap: 1rem;
	}

	.containers {
		& .status {
			text-align: center;
			font-weight: bold;
			color: white;
			padding: 0 10px;

			&.exited {
				background-color: var(--danger-bright);
			}

			&.running {
				background-color: var(--success-bright);
			}
		}
	}

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

<script type="module">
	const editor = document.querySelector("file-editor");
	const form = document.getElementById("editor-form");
	document.querySelectorAll("script[type=stackfile]").forEach((script) => {
		editor.addFile(script.dataset.name, script.innerText);
	});
	editor.setCurrent("arion-compose.nix");

	/* Enforce check pre-submit */
	//add_check(form, editor);
	form.addEventListener("formdata", (ev) => {
		editor.files().forEach(([filename, content]) => {
			ev.formData.set(`files/${filename}`, content);
		});
	});
</script>

{% endblock %}