{% extends "admin_base.html" %}
{% from "_macros.html" import modal %}
{% block extra_head %}
{{ super() }}
<link rel="stylesheet" href="{{ static_url('/static/css/containers.css') }}">
{% endblock %}
{% block admin_content %}
<div class="admin-toolbar">
    <h2>Containers</h2>
    <span class="admin-count">{{ instances|length }} instances</span>
    <a href="#" class="admin-btn admin-btn-primary" data-modal="cm-admin-create-modal">New instance</a>
</div>

<div class="admin-table-wrap">
    <table class="admin-table" id="cm-admin-list" data-endpoint="/admin/containers/data">
        <caption class="sr-only">Container instances</caption>
        <thead>
            <tr>
                <th scope="col">Instance</th>
                <th scope="col">Project</th>
                <th scope="col">Status</th>
                <th scope="col">Boot</th>
                <th scope="col">Ingress</th>
                <th scope="col">Restart</th>
                <th scope="col">Boot on start</th>
                <th scope="col">Actions</th>
            </tr>
        </thead>
        <tbody id="cm-admin-rows" aria-live="polite">
            {% for inst in instances %}
            <tr class="cm-row" data-uid="{{ inst['uid'] }}" data-slug="{{ inst['project_slug'] }}" data-name="{{ inst['name'] }}">
                <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>{{ inst['boot_language'] or 'none' }}</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>{% if inst['start_on_boot'] %}<span class="cm-badge cm-running">on</span>{% else %}<span class="cm-muted">off</span>{% endif %}</td>
                <td class="cm-actions">
                    {% if inst['can_manage'] %}
                    <button class="admin-btn admin-btn-sm" data-cm-action="start" aria-label="Start {{ inst['name'] }}">Start</button>
                    <button class="admin-btn admin-btn-sm" data-cm-action="stop" aria-label="Stop {{ inst['name'] }}">Stop</button>
                    <button class="admin-btn admin-btn-sm" data-cm-action="restart" aria-label="Restart {{ inst['name'] }}">Restart</button>
                    <button class="admin-btn admin-btn-sm" data-cm-action="terminal" aria-label="Open terminal for {{ inst['name'] }}">Terminal</button>
                    <a class="admin-btn admin-btn-sm" href="/admin/containers/{{ inst['uid'] }}/edit" aria-label="Edit {{ inst['name'] }}">Edit</a>
                    <button class="admin-btn admin-btn-sm admin-btn-danger" data-cm-action="delete" aria-label="Delete {{ inst['name'] }}">Delete</button>
                    {% else %}
                    <span class="cm-muted">view only</span>
                    {% endif %}
                </td>
            </tr>
            {% else %}
            <tr><td colspan="8" class="admin-empty">No container instances yet. Create one above or open a project's container manager.</td></tr>
            {% endfor %}
        </tbody>
    </table>
</div>

{% call modal('cm-admin-create-modal', 'New container instance', wide=true) %}
<form id="cm-admin-create-form" class="cm-form">
    <label>Project
        <input type="text" name="project_query" autocomplete="off" placeholder="Search projects by title" data-search="project">
        <input type="hidden" name="project_slug">
        <ul class="cm-suggest" data-suggest="project" aria-live="polite" aria-label="Project suggestions"></ul>
    </label>
    <label>Run as user (identity + API key only)
        <input type="text" name="run_as_query" autocomplete="off" placeholder="Search a user (optional)" data-search="user">
        <input type="hidden" name="run_as_uid">
        <ul class="cm-suggest" data-suggest="user" aria-live="polite" aria-label="User suggestions"></ul>
    </label>
    <label>Name
        <input type="text" name="name" maxlength="64" required aria-required="true">
    </label>
    <label>Boot language
        <select name="boot_language">
            {% for lang in boot_languages %}
            <option value="{{ lang }}">{{ lang }}</option>
            {% endfor %}
        </select>
    </label>
    <label data-boot="script">Boot script
        <textarea name="boot_script" rows="8" spellcheck="false" placeholder="python or bash source run on launch"></textarea>
    </label>
    <label data-boot="command">Boot command (used when no boot script)
        <input type="text" name="boot_command" maxlength="500" placeholder="e.g. python app.py">
    </label>
    <label>Restart policy
        <select name="restart_policy">
            {% for policy in restart_policies %}
            <option value="{{ policy }}">{{ policy }}</option>
            {% endfor %}
        </select>
    </label>
    <label>Ports
        <input type="text" name="ports" maxlength="500" placeholder="8899 or 20001:8080 per line">
    </label>
    <label>Environment
        <textarea name="env" rows="3" spellcheck="false" placeholder="KEY=value per line"></textarea>
    </label>
    <div class="cm-form-row">
        <label>CPU limit
            <input type="text" name="cpu_limit" maxlength="16" placeholder="1 or 1.5">
        </label>
        <label>Memory limit
            <input type="text" name="mem_limit" maxlength="16" placeholder="512m or 1g">
        </label>
    </div>
    <label>Ingress slug
        <input type="text" name="ingress_slug" maxlength="64" placeholder="optional public /p/<slug>">
    </label>
    <label>Ingress port
        <input type="number" name="ingress_port" min="1" max="65535" placeholder="container port to publish">
    </label>
    <label class="cm-check"><input type="checkbox" name="start_on_boot"> Start on container service boot</label>
    <label class="cm-check"><input type="checkbox" name="autostart" checked> Start immediately</label>
    <div class="modal-footer">
        <button type="submit" class="btn btn-primary">Create instance</button>
    </div>
</form>
{% endcall %}
{% endblock %}
{% block extra_js %}
<script type="module">
import { ContainerList } from "{{ static_url('/static/js/ContainerList.js') }}";
const list = new ContainerList(document.getElementById("cm-admin-list"));
list.init();
window.app.containerList = list;
</script>
{% endblock %}