{% extends "baseTemplate/index.html" %}
{% load static %}
{% comment %}
The container list.

Every row comes from /docker/fetchContainers, which is narrowed to the caller
server side and re-reads the live state from the daemon on each call — the
badge reflects what Docker says now, not what the panel last wrote down.
{% endcomment %}

{% block title %}Containers{% endblock %}

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

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

  <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-cubes me-2"></i>Containers</h1>
      <p class="cpd-muted mb-0 small">
        Containers managed by CloudPanel. Published ports are bound to the loopback
        interface — proxy them from your site's vhost to expose one publicly.
      </p>
    </div>
    <div class="d-flex gap-2">
      <a href="/docker/" class="btn btn-outline-secondary btn-sm">
        <i class="fab fa-docker me-1"></i>Overview
      </a>
      <a href="/docker/images" class="btn btn-outline-secondary btn-sm">
        <i class="fas fa-layer-group me-1"></i>Images
      </a>
      {% if dockerAvailable == 1 %}
        <a href="/docker/createContainer" class="btn btn-primary btn-sm">
          <i class="fas fa-plus me-1"></i>New container
        </a>
      {% endif %}
    </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>

  <div class="cpd-card">
    <div class="row g-2 align-items-center p-3">
      <div class="col-md-6">
        <div class="input-group">
          <span class="input-group-text"><i class="fas fa-magnifying-glass"></i></span>
          <input type="search" class="form-control" ng-model="search"
                 placeholder="Search by name, image, domain or state…"
                 aria-label="Search containers">
        </div>
      </div>
      <div class="col-md-6 text-md-end">
        <button type="button" class="btn btn-outline-secondary btn-sm"
                ng-click="load()" ng-disabled="busy">
          <i class="fas fa-rotate me-1"></i>Refresh
        </button>
      </div>
    </div>

    <div class="table-responsive px-3 pb-3">
      <table class="table table-hover align-middle mb-0">
        <thead>
          <tr>
            <th scope="col">Container</th>
            <th scope="col">Image</th>
            <th scope="col">Website</th>
            <th scope="col">Ports</th>
            <th scope="col">Limits</th>
            <th scope="col">State</th>
            <th scope="col" class="text-end">Actions</th>
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat="c in containers | filter:matches" ng-cloak>
            <td>
              <a class="text-decoration-none fw-semibold" ng-href="{$ c.detailURL $}"
                 ng-bind="c.shortName"></a>
              <div class="small cpd-muted cpd-mono" ng-bind="c.name"></div>
            </td>
            <td class="cpd-mono" ng-bind="c.image"></td>
            <td class="cpd-mono" ng-bind="c.domain || '—'"></td>
            <td class="cpd-mono" ng-bind="c.portSummary || '—'"></td>
            <td class="small cpd-muted">
              <span ng-bind="c.memoryLimit"></span> ·
              <span ng-bind="c.cpuLimit"></span> CPU
            </td>
            <td>
              <span class="cpd-state" ng-class="stateClass(c.status)" ng-bind="c.status"></span>
            </td>
            <td class="text-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(c, 'start')" ng-disabled="pending[c.id] || c.running"
                        title="Start"><i class="fas fa-play"></i></button>
                <button type="button" class="btn btn-outline-secondary"
                        ng-click="act(c, 'stop')" ng-disabled="pending[c.id] || !c.running"
                        title="Stop"><i class="fas fa-stop"></i></button>
                <button type="button" class="btn btn-outline-secondary"
                        ng-click="act(c, 'restart')" ng-disabled="pending[c.id]"
                        title="Restart"><i class="fas fa-rotate-right"></i></button>
                <a class="btn btn-outline-secondary" ng-href="{$ c.detailURL $}"
                   title="Logs and stats"><i class="fas fa-chart-line"></i></a>
                <button type="button" class="btn btn-outline-danger"
                        ng-click="remove(c)" ng-disabled="pending[c.id]"
                        title="Delete"><i class="fas fa-trash"></i></button>
              </div>
            </td>
          </tr>
          <tr ng-show="busy" ng-cloak>
            <td colspan="7" class="text-center cpd-muted py-4">
              <i class="fas fa-circle-notch fa-spin me-1"></i>Loading…
            </td>
          </tr>
          <tr ng-show="!busy && containers.length === 0" ng-cloak>
            <td colspan="7" class="text-center cpd-muted py-4">
              No containers yet.
              {% if dockerAvailable == 1 %}
                <a href="/docker/createContainer">Create one</a>.
              {% endif %}
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

</div>
{% endblock %}

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