{% extends "base.html" %}

{% block title %}Overview{% endblock %}

{% block content %}
<main>
	<h2>All stacks</h2>
	<ul>
		{% for stack in stacks %}
		<li><a href="/stack/{{stack.name}}">{{stack.name}}</a> {% if !stack.active %}<div class="stopped">
				INACTIVE</div>{% endif %}</li>
		{% endfor %}
	</ul>
</main>

<style scoped>
	ul {
		margin: 0;
		padding: 0;
	}

	li {
		display: flex;
		align-items: center;
		margin-bottom: 0.5rem;
		gap: 0.5rem;

		.stopped {
			background-color: #E5484D;
			padding: 2px 4px;
			border-radius: 4px;
			font-size: 11pt;
		}
	}
</style>
{% endblock %}