|
{% extends 'settings/index.html' %}
|
|
|
|
{% block header_text %}<h1><i class="fa-solid fa-database"></i> Containers</h1>{% endblock %}
|
|
|
|
{% block main %}
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Containers - List</title>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
|
|
<style>
|
|
.actions {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
.container-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
.container-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 1rem;
|
|
border-radius: 8px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.container-info {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
flex: 1;
|
|
min-width: 220px;
|
|
}
|
|
.container-name {
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
}
|
|
@media (max-width: 600px) {
|
|
.container-row { flex-direction: column; align-items: stretch; }
|
|
.actions { justify-content: flex-start; }
|
|
}
|
|
.topbar {
|
|
display: flex;
|
|
margin-bottom: 1rem;
|
|
}
|
|
button, a.button {
|
|
background: #198754; color: #fff; border: none; border-radius: 5px;
|
|
padding: 0.4rem 0.8rem; text-decoration: none; cursor: pointer;
|
|
transition: background 0.2s;
|
|
font-size: 1rem; display: inline-flex; align-items: center; gap: 0.4rem;
|
|
}
|
|
.button.delete { background: #dc3545; }
|
|
.button.edit { background: #0d6efd; }
|
|
.button.clone { background: #6c757d; }
|
|
.button.browse { background: #ffc107; color: #212529; }
|
|
.button.create { background: #20c997; margin-left: 0.5rem; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="topbar">
|
|
<a class="button create" href="/settings/containers/create.html">
|
|
<i class="fa-solid fa-plus"></i> New Container
|
|
</a>
|
|
</div>
|
|
<section class="container-list">
|
|
{% for container in containers %}
|
|
<div class="container-row">
|
|
<div class="container-info">
|
|
<span class="container-name"><i class="fa-solid fa-box"></i> {{ container.name }}</span>
|
|
<span title="Status"><i class="fa-solid fa-info-circle"></i> {{ container.status }}</span>
|
|
<span title="Readonly">
|
|
<i class="fa-solid {% if container.readonly %}fa-lock{% else %}fa-lock-open{% endif %}"></i>
|
|
{% if container.readonly %}Readonly{% else %}Writable{% endif %}
|
|
</span>
|
|
</div>
|
|
<div class="actions">
|
|
<a class="button edit" href="/settings/containers/container/{{ container.id }}/update.html">
|
|
<i class="fa-solid fa-pen"></i> Edit
|
|
</a>
|
|
<a class="button delete" href="/settings/containers/container/{{ container.id }}/delete.html">
|
|
<i class="fa-solid fa-trash"></i> Delete
|
|
</a>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</section>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
{% endblock %}
|