{% extends "base.html" %}

{% block title %}Viewing {{stack_name}}{% endblock %}

{% block content %}
<main>
	<h1>Stack details for <span class="stack-name">{{stack_name}}</span></h1>
	<h2>Status</h2>
	<table class="containers">
		<thead>
			<tr>
				<th>Name</th>
				<th>State</th>
				<th>Image</th>
			</tr>
		</thead>
		<tbody>
			{% for container in containers %}
			<tr>
				<td>{{container.name}}</td>
				<td class="status {{container.state}}">{{container.state}}</td>
				<td>{{container.image}}</td>
			</tr>
			{% endfor %}
		</tbody>
	</table>
	<h2>Editor</h2>
	<textarea id="editor">{{file_contents}}</textarea>
</main>

<style scoped>
	main {
		display: flex;
		flex-direction: column;
		gap: 1rem;
	}

	h2 {
		text-transform: uppercase;
		margin: 0;
		padding: 0;
	}

	pre {
		margin: 0;
		padding: 0;
	}

	.containers {
		background-color: #171625;
		border: 3px solid #5958B1;
		border-radius: 3px;

		& th,
		& td {
			padding: 3px 5px;
		}

		& th {
			font-weight: bold;
		}

		& thead {
			background-color: #202248;
		}

		& .status {
			text-align: center;
			font-weight: bold;
			color: white;

			&.exited {
				background-color: #E5484D;
			}

			&.running {
				background-color: #46A758;
			}
		}
	}

	.stack-name {
		color: #E796F3;
	}

	.ace_editor {
		min-height: 50vh;
		border: 3px solid #5958B1;
		border-radius: 3px;
	}
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.31.2/ace.min.js"
	integrity="sha512-4qIbBlcJOvbOmEB50FfnviJ9jOCen2yhi4skodkbTLU/uJJdULPxlX2R9Enf1oOBleUK9KD3fGmMcnItFQdNeA=="
	crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
	var editor = ace.edit("editor");
	editor.setTheme("ace/theme/dracula");
	editor.session.setMode("ace/mode/nix");
</script>

{% endblock %}