{% extends "baseTemplate/index.html" %}
{% load static %}
{% comment %}
The image library.

/docker/fetchImages returns only the images this account pulled (an
administrator sees every row). Pulls run in the background: the endpoint hands
back a token, and this page watches its progress in the same fetch.
{% endcomment %}

{% block title %}Docker images{% endblock %}

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

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

  <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-layer-group me-2"></i>Images</h1>
      <p class="cpd-muted mb-0 small">Images your account has pulled onto this server.</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/containers" class="btn btn-outline-secondary btn-sm">
        <i class="fas fa-cubes me-1"></i>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>

  {% if dockerAvailable == 1 %}
  <div class="cpd-card p-3 mb-4">
    <form ng-submit="pull()" novalidate>
      <label class="form-label fw-semibold" for="cpdPullRef">Pull an image</label>
      <div class="row g-2">
        <div class="col-md-8">
          <input id="cpdPullRef" type="text" class="form-control cpd-mono"
                 ng-model="pullReference" ng-disabled="pulling"
                 placeholder="nginx:1.27-alpine"
                 aria-describedby="cpdPullHelp">
        </div>
        <div class="col-md-4 d-grid">
          <button type="submit" class="btn btn-primary"
                  ng-disabled="pulling || !pullReference">
            <i class="fas fa-download me-1"></i>
            <span ng-bind="pulling ? 'Pulling…' : 'Pull image'"></span>
          </button>
        </div>
      </div>
      <div id="cpdPullHelp" class="cpd-hint mt-2">
        Repository and tag, for example <span class="cpd-mono">nginx:1.27-alpine</span> or
        <span class="cpd-mono">ghcr.io/acme/api:2.1</span>. Without a tag,
        <span class="cpd-mono">latest</span> is used. Large images take a few minutes —
        the pull continues even if you leave this page.
      </div>
    </form>

    <div ng-repeat="job in pulls" ng-cloak class="mt-3">
      <div class="d-flex justify-content-between align-items-center small">
        <span class="cpd-mono" ng-bind="job.reference"></span>
        <span class="cpd-state" ng-class="jobClass(job.state)" ng-bind="job.state"></span>
      </div>
      <div class="progress mt-1" style="height: 0.4rem;" ng-if="job.state === 'running'">
        <div class="progress-bar progress-bar-striped progress-bar-animated"
             role="progressbar" ng-style="{width: (job.progress || 5) + '%'}"
             aria-valuemin="0" aria-valuemax="100"></div>
      </div>
      <div class="cpd-hint mt-1" ng-bind="job.message"></div>
    </div>
  </div>
  {% endif %}

  <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 images…" aria-label="Search images">
        </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">Image</th>
            <th scope="col">Image id</th>
            <th scope="col">Size</th>
            <th scope="col" ng-if="isAdmin">Owner</th>
            <th scope="col">Pulled</th>
            <th scope="col" class="text-end">Actions</th>
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat="image in images | filter:matches" ng-cloak>
            <td>
              <span class="fw-semibold cpd-mono" ng-bind="image.reference"></span>
              <div class="small cpd-muted" ng-show="!image.present">
                Not on disk any more
              </div>
            </td>
            <td class="cpd-mono" ng-bind="image.imageId || '—'"></td>
            <td ng-bind="image.size | cpBytes"></td>
            <td ng-if="isAdmin" ng-bind="image.owner"></td>
            <td class="small cpd-muted" ng-bind="image.pulled | date:'short'"></td>
            <td class="text-end">
              <button type="button" class="btn btn-outline-danger btn-sm"
                      ng-click="remove(image)" ng-disabled="busy"
                      title="Delete image">
                <i class="fas fa-trash"></i>
              </button>
            </td>
          </tr>
          <tr ng-show="busy" ng-cloak>
            <td colspan="6" 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 && images.length === 0" ng-cloak>
            <td colspan="6" class="text-center cpd-muted py-4">
              No images yet. Pull one above to get started.
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

</div>
{% endblock %}

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