{% extends "admin_base.html" %}
{% block extra_head %}
{{ super() }}
<link rel="stylesheet" href="/static/css/containers.css">
{% endblock %}
{% block admin_content %}
<div class="admin-toolbar">
    <h2>Containers</h2>
    <span class="admin-count">{{ instances|length }} instances</span>
</div>

<div class="admin-table-wrap">
    <table class="admin-table" id="cm-admin-list" data-endpoint="/admin/containers/data">
        <thead>
            <tr>
                <th>Instance</th>
                <th>Project</th>
                <th>Status</th>
                <th>Ingress</th>
                <th>Restart</th>
                <th></th>
            </tr>
        </thead>
        <tbody id="cm-admin-rows">
            {% for inst in instances %}
            <tr class="cm-row" data-uid="{{ inst['uid'] }}">
                <td><a class="cm-row-name" href="/admin/containers/{{ inst['uid'] }}">{{ inst['name'] }}</a></td>
                <td>
                    {% if inst['project_slug'] %}
                    <a class="cm-row-project" href="/projects/{{ inst['project_slug'] }}/containers">{{ inst['project_title'] or inst['project_slug'] }}</a>
                    {% else %}<span class="cm-muted">-</span>{% endif %}
                </td>
                <td><span class="cm-badge cm-{{ inst['status'] }}">{{ inst['status'] }}</span></td>
                <td>
                    {% if inst['ingress_slug'] %}
                    <a href="/p/{{ inst['ingress_slug'] }}" target="_blank" rel="noopener">/p/{{ inst['ingress_slug'] }}</a>
                    {% else %}<span class="cm-muted">-</span>{% endif %}
                </td>
                <td>{{ inst['restart_policy'] or 'never' }}</td>
                <td><a class="admin-btn admin-btn-sm" href="/admin/containers/{{ inst['uid'] }}">Manage &rarr;</a></td>
            </tr>
            {% else %}
            <tr><td colspan="6" class="admin-empty">No container instances yet. Open a project's container manager to launch one.</td></tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% endblock %}
{% block extra_js %}
<script type="module">
import { ContainerList } from "/static/js/ContainerList.js";
const list = new ContainerList(document.getElementById("cm-admin-list"));
list.init();
window.app.containerList = list;
</script>
{% endblock %}