{% extends "base.html" %}

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

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

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

	li {
		display: flex;
		align-items: center;
		margin-bottom: 0.5rem;
		gap: 0.5rem;
		border-left: 5px solid #E5484D;
		padding-left: 0.5ch;

		&.active {
			border-left-color: #33B074;
		}
	}
</style>
{% endblock %}