{% extends "base.html" %}

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

{% block content %}
<main>
	<section class="system-info">
		<article>
			<table>
				<tbody>
					<tr>
						<th>Hostname</th>
						<td colspan="2">
							{{ system.host_name }}
						</td>
					</tr>
					<tr>
						<th>OS info</th>
						<td colspan="2">
							{{ system.name }} {{ system.os_version }} (kernel {{
							system.kernel_version }})
						</td>
					</tr>
					<tr>
						<th>Load Avg</th>
						<td colspan="2">
							{{ system.load_average.0 }},
							{{ system.load_average.1 }},
							{{ system.load_average.2 }}
						</td>
					</tr>
					<tr>
						<th>Memory</th>
						<td>
							{{ system.used_memory|filesizeformat }}
							/ {{ system.total_memory|filesizeformat }}
						</td>
						<td>
							<progress id="memory" value="{{system.used_memory}}"
								max="{{system.total_memory}}">
								{{
								"{:.2}"|format(system.used_memory/system.total_memory*100)
								}}%
							</progress>
						</td>
					</tr>
				</tbody>
			</table>


		</article>
		<article>
			<table>
				<tbody>

					{% for disk in system.disks %}
					<tr>
						<th title="{{disk.device_name}}">{{disk.mount_point}}</th>
						<td>
							{{ (disk.total_space-disk.available_space)|filesizeformat }}
							/ {{ disk.total_space|filesizeformat }}
						</td>
						<td>
							<progress id="disk-{{disk.device_name}}"
								value="{{disk.total_space-disk.available_space}}"
								max="{{disk.total_space}}">
							</progress>
						</td>
					</tr>
					{% endfor %}
				</tbody>
			</table>
		</article>
	</section>
	<section class="stack-list">
		<h2>Stacks</h2>
		<ul>
			{% for stack in info.stacks %}
			<li class="{% if stack.active %}active{% endif %}"><a
					href="/stack/{{stack.name}}/">{{stack.name}}</a>
			</li>
			{% endfor %}
		</ul>
	</section>
	<section class="container-list">
		<h2>Containers</h2>
		<table class="containers">
			<thead>
				<tr>
					<th>Name</th>
					<th>Stack</th>
					<th>State</th>
					<th>Image</th>
				</tr>
			</thead>
			<tbody>
				{% for container in info.containers %}
				<tr>
					<td><a href="/container/{{container.name}}/">{{container.name}}</a></td>
					<td>{{container.stack().unwrap_or_default()}}</td>
					<td class="status {{container.state}}">{{container.state}}</td>
					<td>{{container.image}}</td>
				</tr>
				{% endfor %}
			</tbody>
		</table>
	</section>
</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;
		}
	}

	.containers {
		background-color: var(--bg-raised);
		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;
			padding: 0 10px;

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

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

	.container-list {
		grid-area: con;
	}

	.stack-list {
		grid-area: stk;
	}

	.system-info {
		grid-area: sys;
		display: flex;
		gap: 1rem;

		& th {
			font-weight: bold;
			padding-right: 2ch;
			text-align: left;
		}
	}

	@media (min-width: 1000px) {
		main {
			display: grid;
			grid-template-areas:
				"sys sys"
				"stk con";

			grid-template-rows: 100px 1fr;
			grid-template-columns: 1fr 1fr;
		}
	}
</style>
{% endblock %}