{% extends "baseTemplate/index.html" %}
{% load static %}
{% comment %}
One container: lifecycle, logs, live stats and the constrained console.

The container was resolved server side out of a queryset already narrowed to
the caller, so this page never has to decide whether the visitor may see it.
Bootstrap data is handed over with |json_script — never through an inline
script string.
{% endcomment %}

{% block title %}{{ container.shortName }}{% endblock %}

{% block styles %}
  {% include "containerization/_dockerstyles.html" %}
{% endblock %}

{% block content %}
<div ng-controller="dockerDetailController">

  {{ containerJson|json_script:"cpdContainer" }}
  {{ execAllowed|json_script:"cpdExecAllowed" }}

  <div class="d-flex flex-wrap align-items-start justify-content-between gap-2 mb-4">
    <div>
      <h1 class="h4 mb-1">
        <i class="fas fa-cube me-2"></i>{{ container.shortName }}
      </h1>
      <p class="cpd-muted mb-0 small cpd-mono">
        {{ container.name }} · {{ container.image }}
        {% if container.website %} · {{ container.website.domain }}{% endif %}
      </p>
    </div>
    <div class="d-flex gap-2">
      <a href="/docker/containers" class="btn btn-outline-secondary btn-sm">
        <i class="fas fa-arrow-left me-1"></i>All containers
      </a>
    </div>
  </div>

  {% include "containerization/_unavailable.html" %}

  <div class="alert alert-danger py-2 px-3" ng-show="errorMessage" ng-cloak role="alert">
    <i class="fas fa-triangle-exclamation me-1"></i><span ng-bind="errorMessage"></span>
  </div>

  <!-- ------------------------------------------------------------- summary -->
  <div class="cpd-card p-3 mb-4">
    <div class="row g-3 align-items-center">
      <div class="col-md-3">
        <div class="cpd-tile__label mb-1">State</div>
        <span class="cpd-state" ng-class="stateClass(container.status)"
              ng-bind="container.status"></span>
      </div>
      <div class="col-md-3">
        <div class="cpd-tile__label mb-1">Ports</div>
        <div class="cpd-mono" ng-bind="container.portSummary || '—'"></div>
      </div>
      <div class="col-md-3">
        <div class="cpd-tile__label mb-1">Limits</div>
        <div class="cpd-mono">
          <span ng-bind="container.memoryLimit"></span> ·
          <span ng-bind="container.cpuLimit"></span> CPU
        </div>
      </div>
      <div class="col-md-3 text-md-end">
        <div class="btn-group btn-group-sm" role="group" aria-label="Container actions">
          <button type="button" class="btn btn-outline-secondary"
                  ng-click="act('start')" ng-disabled="busy || container.running"
                  title="Start"><i class="fas fa-play"></i></button>
          <button type="button" class="btn btn-outline-secondary"
                  ng-click="act('stop')" ng-disabled="busy || !container.running"
                  title="Stop"><i class="fas fa-stop"></i></button>
          <button type="button" class="btn btn-outline-secondary"
                  ng-click="act('restart')" ng-disabled="busy"
                  title="Restart"><i class="fas fa-rotate-right"></i></button>
          <button type="button" class="btn btn-outline-danger"
                  ng-click="remove()" ng-disabled="busy"
                  title="Delete"><i class="fas fa-trash"></i></button>
        </div>
      </div>
    </div>

    <hr class="my-3">

    <div class="row g-3 small">
      <div class="col-md-4">
        <div class="cpd-tile__label mb-1">Container id</div>
        <div class="cpd-mono" ng-bind="container.containerId || '—'"></div>
      </div>
      <div class="col-md-4">
        <div class="cpd-tile__label mb-1">Restart policy</div>
        <div class="cpd-mono" ng-bind="container.restartPolicy"></div>
      </div>
      <div class="col-md-4">
        <div class="cpd-tile__label mb-1">Created</div>
        <div ng-bind="container.dateCreated | date:'medium'"></div>
      </div>
      <div class="col-md-6" ng-show="container.envKeys.length" ng-cloak>
        <div class="cpd-tile__label mb-1">Environment</div>
        <div class="cpd-mono" ng-bind="container.envKeys.join(', ')"></div>
      </div>
      <div class="col-md-6" ng-show="container.volumes.length" ng-cloak>
        <div class="cpd-tile__label mb-1">Volumes</div>
        <div class="cpd-mono" ng-repeat="v in container.volumes">
          {$ v.host $} → {$ v.container $} ({$ v.mode $})
        </div>
      </div>
    </div>
  </div>

  <div class="row g-3">

    <!-- ---------------------------------------------------------- live stats -->
    <div class="col-lg-4">
      <div class="cpd-card p-3 h-100">
        <div class="d-flex justify-content-between align-items-center mb-2">
          <h2 class="h6 mb-0">Live stats</h2>
          <div class="form-check form-switch mb-0">
            <input class="form-check-input" type="checkbox" id="cpdAutoStats"
                   ng-model="autoStats" ng-change="toggleStats()">
            <label class="form-check-label small" for="cpdAutoStats">Auto</label>
          </div>
        </div>

        <div ng-show="stats" ng-cloak>
          <div class="cpd-stat">
            <span class="cpd-stat__label">CPU</span>
            <span class="cpd-stat__value" ng-bind="stats.cpu"></span>
          </div>
          <div class="cpd-stat">
            <span class="cpd-stat__label">Memory</span>
            <span class="cpd-stat__value" ng-bind="stats.memory"></span>
          </div>
          <div class="cpd-stat">
            <span class="cpd-stat__label">Memory %</span>
            <span class="cpd-stat__value" ng-bind="stats.memoryPercent"></span>
          </div>
          <div class="cpd-stat">
            <span class="cpd-stat__label">Network I/O</span>
            <span class="cpd-stat__value" ng-bind="stats.network"></span>
          </div>
          <div class="cpd-stat">
            <span class="cpd-stat__label">Block I/O</span>
            <span class="cpd-stat__value" ng-bind="stats.block"></span>
          </div>
          <div class="cpd-stat">
            <span class="cpd-stat__label">Processes</span>
            <span class="cpd-stat__value" ng-bind="stats.pids"></span>
          </div>
        </div>

        <p class="cpd-hint mb-0" ng-show="!stats" ng-cloak
           ng-bind="statsMessage || 'No sample yet.'"></p>

        <button type="button" class="btn btn-outline-secondary btn-sm mt-3 w-100"
                ng-click="loadStats()" ng-disabled="statsBusy">
          <i class="fas fa-gauge-high me-1"></i>Sample now
        </button>
      </div>
    </div>

    <!-- ----------------------------------------------------------- log viewer -->
    <div class="col-lg-8">
      <div class="cpd-card p-3 h-100">
        <div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-2">
          <h2 class="h6 mb-0">Logs</h2>
          <div class="d-flex align-items-center gap-2">
            <label class="small cpd-muted mb-0" for="cpdTail">Last</label>
            <select id="cpdTail" class="form-select form-select-sm" style="width: auto;"
                    ng-model="tail" ng-change="loadLogs()">
              <option ng-value="50">50 lines</option>
              <option ng-value="200">200 lines</option>
              <option ng-value="500">500 lines</option>
              <option ng-value="2000">2000 lines</option>
            </select>
            <button type="button" class="btn btn-outline-secondary btn-sm"
                    ng-click="loadLogs()" ng-disabled="logsBusy">
              <i class="fas fa-rotate me-1"></i>Refresh
            </button>
          </div>
        </div>
        <pre class="cpd-output" ng-bind="logs || 'No output yet.'"></pre>
      </div>
    </div>

    <!-- --------------------------------------------------------- exec console -->
    <div class="col-12">
      <div class="cpd-card p-3">
        <h2 class="h6 mb-2">Console</h2>
        <p class="cpd-hint">
          Read-only commands only — there is no shell here, on purpose. Allowed:
          <span class="cpd-mono" ng-bind="execAllowed.join(', ')"></span>.
        </p>
        <form ng-submit="runCommand()" novalidate>
          <div class="input-group">
            <span class="input-group-text cpd-mono">$</span>
            <input type="text" class="form-control cpd-mono" ng-model="command"
                   placeholder="ls -la /" aria-label="Command"
                   ng-disabled="!container.running || execBusy">
            <button type="submit" class="btn btn-primary"
                    ng-disabled="!container.running || execBusy || !command">
              <i class="fas fa-terminal me-1"></i>Run
            </button>
          </div>
        </form>
        <p class="cpd-hint mt-2 mb-0" ng-show="!container.running" ng-cloak>
          The container is not running, so nothing can be executed in it.
        </p>
        <pre class="cpd-output mt-3" ng-show="execOutput" ng-cloak ng-bind="execOutput"></pre>
      </div>
    </div>

    <!-- ------------------------------------------------------------- trail -->
    <div class="col-12">
      <div class="cpd-card p-3">
        <h2 class="h6 mb-3">Recent actions</h2>
        <div class="table-responsive">
          <table class="table table-sm align-middle mb-0">
            <thead>
              <tr>
                <th scope="col">When</th>
                <th scope="col">Action</th>
                <th scope="col">By</th>
                <th scope="col">Result</th>
                <th scope="col">Detail</th>
              </tr>
            </thead>
            <tbody>
              {% for entry in logEntries %}
                <tr>
                  <td class="small cpd-muted">{{ entry.dateCreated }}</td>
                  <td class="cpd-mono">{{ entry.action }}</td>
                  <td>{{ entry.userName }}</td>
                  <td>
                    {% if entry.success %}
                      <span class="cpd-state cpd-state--running">ok</span>
                    {% else %}
                      <span class="cpd-state cpd-state--danger">failed</span>
                    {% endif %}
                  </td>
                  <td class="small cpd-muted">{{ entry.message|truncatechars:120 }}</td>
                </tr>
              {% empty %}
                <tr>
                  <td colspan="5" class="text-center cpd-muted py-3">
                    Nothing recorded yet.
                  </td>
                </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>
    </div>

  </div>
</div>
{% endblock %}

{% block scripts %}
  <script src="{% static 'containerization/containerization.js' %}"></script>
{% endblock %}