{% extends "base.html" %}
{% from "_macros.html" import modal %}
{% block extra_head %}
<link rel="stylesheet" href="/static/css/containers.css">
{% endblock %}
{% block content %}
<div class="ci-page" id="container-instance"
     data-slug="{{ project_slug }}"
     data-uid="{{ instance['uid'] }}"
     data-name="{{ instance['name'] }}"
     data-status="{{ instance['status'] }}">
    <div class="ci-header">
        <a href="/admin/containers" class="back-link">&larr; Containers</a>
        <div class="ci-titlebar">
            <h1 class="ci-title">{{ instance['name'] }}</h1>
            <span class="cm-badge cm-{{ instance['status'] }}" id="ci-status">{{ instance['status'] }}</span>
        </div>
        {% if project %}
        <a class="ci-project" href="/projects/{{ project_slug }}/containers">{{ project['title'] or project_slug }}</a>
        {% endif %}
    </div>

    <div class="ci-grid">
        <section class="card ci-card ci-actions-card">
            <h2>Controls</h2>
            <div class="ci-actions" id="ci-actions"></div>
            <div class="ci-runtime">
                <div class="ci-kv"><span>Command</span><code>{{ runtime['command'] }}</code></div>
                <div class="ci-kv"><span>Restart policy</span><code>{{ instance['restart_policy'] or 'never' }}</code></div>
                <div class="ci-kv"><span>Restarts</span><code>{{ runtime['restart_count'] }}</code></div>
                <div class="ci-kv"><span>Container</span><code id="ci-container-id">{{ runtime['container_id'] or '-' }}</code></div>
                <div class="ci-kv"><span>Image</span><code>ppy:latest</code></div>
            </div>
            {% if instance['ingress_slug'] %}
            <div class="ci-ingress" id="ci-ingress">
                <span class="ci-ingress-label">Ingress</span>
                <a href="/p/{{ instance['ingress_slug'] }}" target="_blank" rel="noopener">/p/{{ instance['ingress_slug'] }}</a>
                <span class="cm-muted">container port {{ instance['ingress_port'] or '(first mapped)' }}</span>
            </div>
            {% endif %}
        </section>

        <section class="card ci-card ci-metrics-card">
            <h2>Metrics</h2>
            <div class="ci-metrics" id="ci-metrics">
                <div class="ci-metric"><span class="ci-metric-label">Samples</span><span class="ci-metric-value" data-metric="samples">{{ stats['samples'] }}</span></div>
                <div class="ci-metric"><span class="ci-metric-label">CPU avg</span><span class="ci-metric-value" data-metric="cpu_avg">{{ stats['cpu_avg'] }}%</span></div>
                <div class="ci-metric"><span class="ci-metric-label">CPU p95</span><span class="ci-metric-value" data-metric="cpu_p95">{{ stats['cpu_p95'] }}%</span></div>
                <div class="ci-metric"><span class="ci-metric-label">Mem max</span><span class="ci-metric-value" data-metric="mem_max">{{ stats['mem_max'] }}</span></div>
            </div>
        </section>
    </div>

    <section class="card ci-card">
        <div class="ci-card-head">
            <h2>Schedules</h2>
            <button type="button" class="btn btn-secondary btn-sm" data-modal="ci-schedule-modal">Add schedule</button>
        </div>
        <ul class="ci-schedules" id="ci-schedules">
            {% for s in schedules %}
            <li class="ci-schedule" data-sid="{{ s['uid'] }}">
                <span class="ci-schedule-action">{{ s['action'] }}</span>
                <span class="ci-schedule-next">next {{ s['next_run_at'] or '-' }}</span>
                <span class="cm-muted">runs {{ s['run_count'] or 0 }}</span>
                <button type="button" class="btn btn-secondary btn-sm" data-schedule-delete="{{ s['uid'] }}">Delete</button>
            </li>
            {% else %}
            <li class="cm-muted ci-schedule-empty">No schedules.</li>
            {% endfor %}
        </ul>
    </section>

    <section class="card ci-card">
        <h2>Exec</h2>
        <div class="ci-exec">
            <input type="text" id="ci-exec-input" placeholder="one-shot command, e.g. ls -la /app">
            <button type="button" class="btn btn-secondary" id="ci-exec-run">Run</button>
            <button type="button" class="btn btn-secondary" id="ci-term-toggle">Open terminal</button>
        </div>
        <div class="ci-terminal" id="ci-terminal" hidden>
            <pre class="ci-log ci-term-output" id="ci-term"></pre>
        </div>
    </section>

    <section class="card ci-card">
        <h2>Logs</h2>
        <pre class="ci-log" id="ci-log"></pre>
    </section>
</div>

{% call modal('ci-schedule-modal', 'Add schedule') %}
<form id="ci-schedule-form" class="cm-modal-form">
    <div class="grid-2col">
        <div class="auth-field">
            <label for="ci-sched-action">Action</label>
            <select id="ci-sched-action" name="action">
                <option value="start">start</option>
                <option value="stop">stop</option>
            </select>
        </div>
        <div class="auth-field">
            <label for="ci-sched-kind">Kind</label>
            <select id="ci-sched-kind" name="kind">
                <option value="cron">cron</option>
                <option value="interval">interval</option>
                <option value="once">once</option>
            </select>
        </div>
    </div>
    <div class="auth-field auth-field-gap" data-sched-field="cron">
        <label for="ci-sched-cron">Cron expression</label>
        <input type="text" id="ci-sched-cron" name="cron" placeholder="0 3 * * *">
    </div>
    <div class="auth-field auth-field-gap" data-sched-field="interval" hidden>
        <label for="ci-sched-every">Every (seconds)</label>
        <input type="number" id="ci-sched-every" name="every_seconds" min="1" placeholder="3600">
    </div>
    <div class="auth-field auth-field-gap" data-sched-field="once" hidden>
        <label for="ci-sched-delay">Delay (seconds from now)</label>
        <input type="number" id="ci-sched-delay" name="delay_seconds" min="1" placeholder="60">
    </div>
    <div class="modal-footer">
        <button type="button" class="modal-close btn btn-secondary">Cancel</button>
        <button type="submit" class="btn btn-primary">Add</button>
    </div>
</form>
{% endcall %}
{% endblock %}
{% block extra_js %}
<script type="module">
import { ContainerInstance } from "/static/js/ContainerInstance.js";
const root = document.getElementById("container-instance");
const instance = new ContainerInstance(root);
instance.init();
window.app.containerInstance = instance;
</script>
{% endblock %}