{% extends "baseTemplate/index.html" %}
{% load static %}
{% comment %}
The create-container form.

Everything on this page is re-validated server side in
containerization.views._createContainerSubmit — the constraints repeated here
(unprivileged host ports, mounts inside the site home, memory and CPU ceilings)
exist so the operator sees them before submitting, not as the enforcement.

The website list is rendered from the server-side list of sites this account
owns; the name prefix is taken from the session, never from this form.
{% endcomment %}

{% block title %}New container{% endblock %}

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

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

  {{ userName|json_script:"cpdUserName" }}

  <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-plus me-2"></i>New container</h1>
      <p class="cpd-muted mb-0 small">
        Runs with all Linux capabilities dropped, no privilege escalation, a hard
        memory and CPU ceiling, and ports published on the loopback interface only.
      </p>
    </div>
    <a href="/docker/containers" class="btn btn-outline-secondary btn-sm">
      <i class="fas fa-arrow-left me-1"></i>Back to containers
    </a>
  </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 %}
  <form ng-submit="submit()" novalidate>
    <div class="row g-3">

      <!-- ------------------------------------------------------------- basics -->
      <div class="col-lg-6">
        <div class="cpd-card p-3 h-100">
          <h2 class="h6 mb-3">Basics</h2>

          <div class="mb-3">
            <label class="form-label" for="cpdImage">Image</label>
            <input id="cpdImage" type="text" class="form-control cpd-mono"
                   ng-model="form.image" placeholder="nginx:1.27-alpine" required>
            <div class="cpd-hint mt-1">
              Must already be pulled — see <a href="/docker/images">Images</a>.
            </div>
          </div>

          <div class="mb-3">
            <label class="form-label" for="cpdName">Name</label>
            <div class="input-group">
              <span class="input-group-text cpd-mono" ng-bind="prefix"></span>
              <input id="cpdName" type="text" class="form-control cpd-mono"
                     ng-model="form.name" placeholder="api" required>
            </div>
            <div class="cpd-hint mt-1">
              2–32 characters of a–z, 0–9, dot, dash or underscore. Your username is
              prefixed automatically so names cannot collide with another account's.
            </div>
          </div>

          <div class="mb-3">
            <label class="form-label" for="cpdDomain">Website</label>
            <select id="cpdDomain" class="form-select" ng-model="form.domain">
              <option value="">Not linked to a website</option>
              {% for site in websites %}
                <option value="{{ site }}">{{ site }}</option>
              {% endfor %}
            </select>
            <div class="cpd-hint mt-1">
              Required if you want bind mounts: they are confined to
              <span class="cpd-mono">/home/&lt;domain&gt;</span>.
            </div>
          </div>
        </div>
      </div>

      <!-- ------------------------------------------------------------- limits -->
      <div class="col-lg-6">
        <div class="cpd-card p-3 h-100">
          <h2 class="h6 mb-3">Limits and lifecycle</h2>

          <div class="row g-2 mb-3">
            <div class="col-sm-6">
              <label class="form-label" for="cpdMemory">Memory limit</label>
              <input id="cpdMemory" type="text" class="form-control cpd-mono"
                     ng-model="form.memoryLimit" placeholder="{{ memoryDefault }}">
              <div class="cpd-hint mt-1">16m – 32g. Swap is pinned to the same value.</div>
            </div>
            <div class="col-sm-6">
              <label class="form-label" for="cpdCpu">CPU limit (cores)</label>
              <input id="cpdCpu" type="text" class="form-control cpd-mono"
                     ng-model="form.cpuLimit" placeholder="{{ cpuDefault }}">
              <div class="cpd-hint mt-1">0.10 – 16.00.</div>
            </div>
          </div>

          <div class="mb-3">
            <label class="form-label" for="cpdRestart">Restart policy</label>
            <select id="cpdRestart" class="form-select" ng-model="form.restartPolicy">
              {% for policy in restartPolicies %}
                <option value="{{ policy }}">{{ policy }}</option>
              {% endfor %}
            </select>
          </div>

          <p class="cpd-hint mb-0">
            Every container also gets <span class="cpd-mono">--cap-drop ALL</span>,
            <span class="cpd-mono">--security-opt no-new-privileges</span> and a
            512-process ceiling. Host networking, host PID namespace and
            <span class="cpd-mono">--privileged</span> are never available here.
          </p>
        </div>
      </div>

      <!-- -------------------------------------------------------------- ports -->
      <div class="col-lg-6">
        <div class="cpd-card p-3 h-100">
          <div class="d-flex justify-content-between align-items-center mb-3">
            <h2 class="h6 mb-0">Port mappings</h2>
            <button type="button" class="btn btn-outline-secondary btn-sm" ng-click="addPort()"
                    aria-label="Add a port mapping">
              <i class="fas fa-plus" aria-hidden="true"></i>
            </button>
          </div>

          <div class="cpd-repeat-row" ng-repeat="p in form.ports" ng-cloak>
            <div class="row g-2 align-items-end">
              <div class="col-4">
                <label class="form-label small">Host</label>
                <input type="number" class="form-control form-control-sm cpd-mono"
                       ng-model="p.host" min="1024" max="65535" placeholder="8080"
                       aria-label="Host port">
              </div>
              <div class="col-4">
                <label class="form-label small">Container</label>
                <input type="number" class="form-control form-control-sm cpd-mono"
                       ng-model="p.container" min="1" max="65535" placeholder="80"
                       aria-label="Container port">
              </div>
              <div class="col-3">
                <label class="form-label small">Protocol</label>
                <select class="form-select form-select-sm" ng-model="p.protocol"
                        aria-label="Port protocol">
                  <option value="tcp">tcp</option>
                  <option value="udp">udp</option>
                </select>
              </div>
              <div class="col-1 text-end">
                <button type="button" class="btn btn-outline-danger btn-sm"
                        ng-click="removePort($index)" aria-label="Remove port mapping">
                  <i class="fas fa-xmark"></i>
                </button>
              </div>
            </div>
          </div>

          <p class="cpd-hint mb-0" ng-show="form.ports.length === 0" ng-cloak>
            No ports published. Host ports must be 1024 or above and are bound to
            127.0.0.1 only.
          </p>
        </div>
      </div>

      <!-- ---------------------------------------------------------- environment -->
      <div class="col-lg-6">
        <div class="cpd-card p-3 h-100">
          <div class="d-flex justify-content-between align-items-center mb-3">
            <h2 class="h6 mb-0">Environment variables</h2>
            <button type="button" class="btn btn-outline-secondary btn-sm" ng-click="addEnv()"
                    aria-label="Add an environment variable">
              <i class="fas fa-plus" aria-hidden="true"></i>
            </button>
          </div>

          <div class="cpd-repeat-row" ng-repeat="e in form.env" ng-cloak>
            <div class="row g-2 align-items-end">
              <div class="col-5">
                <label class="form-label small">Name</label>
                <input type="text" class="form-control form-control-sm cpd-mono"
                       ng-model="e.key" placeholder="APP_ENV"
                       aria-label="Environment variable name">
              </div>
              <div class="col-6">
                <label class="form-label small">Value</label>
                <input type="text" class="form-control form-control-sm cpd-mono"
                       ng-model="e.value" placeholder="production"
                       aria-label="Environment variable value">
              </div>
              <div class="col-1 text-end">
                <button type="button" class="btn btn-outline-danger btn-sm"
                        ng-click="removeEnv($index)" aria-label="Remove variable">
                  <i class="fas fa-xmark"></i>
                </button>
              </div>
            </div>
          </div>

          <p class="cpd-hint mb-0">
            Values are stored in the panel database and are visible to anyone who can
            manage this container. Treat them as configuration, not as secrets you
            would not write down.
          </p>
        </div>
      </div>

      <!-- ------------------------------------------------------------ volumes -->
      <div class="col-12">
        <div class="cpd-card p-3">
          <div class="d-flex justify-content-between align-items-center mb-3">
            <h2 class="h6 mb-0">Volumes</h2>
            <button type="button" class="btn btn-outline-secondary btn-sm"
                    ng-click="addVolume()" ng-disabled="!form.domain"
                    aria-label="Add a volume mount">
              <i class="fas fa-plus" aria-hidden="true"></i>
            </button>
          </div>

          <p class="cpd-hint" ng-show="!form.domain" ng-cloak>
            Pick a website first. Bind mounts are confined to that site's home
            directory — there is no way to mount anything else from this panel.
          </p>

          <div class="cpd-repeat-row" ng-repeat="v in form.volumes" ng-cloak>
            <div class="row g-2 align-items-end">
              <div class="col-md-5">
                <label class="form-label small">Host path</label>
                <input type="text" class="form-control form-control-sm cpd-mono"
                       ng-model="v.host" ng-attr-placeholder="{$ volumeBase $}/data"
                       aria-label="Host path">
              </div>
              <div class="col-md-4">
                <label class="form-label small">Container path</label>
                <input type="text" class="form-control form-control-sm cpd-mono"
                       ng-model="v.container" placeholder="/data"
                       aria-label="Container path">
              </div>
              <div class="col-md-2">
                <label class="form-label small">Mode</label>
                <select class="form-select form-select-sm" ng-model="v.mode"
                        aria-label="Volume mount mode">
                  <option value="rw">read/write</option>
                  <option value="ro">read only</option>
                </select>
              </div>
              <div class="col-md-1 text-end">
                <button type="button" class="btn btn-outline-danger btn-sm"
                        ng-click="removeVolume($index)" aria-label="Remove volume">
                  <i class="fas fa-xmark"></i>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="col-12 d-flex justify-content-end gap-2">
        <a href="/docker/containers" class="btn btn-outline-secondary">Cancel</a>
        <button type="submit" class="btn btn-primary" ng-disabled="busy">
          <i class="fas fa-play me-1"></i>
          <span ng-bind="busy ? 'Creating…' : 'Create and start'"></span>
        </button>
      </div>
    </div>
  </form>
  {% endif %}

</div>
{% endblock %}

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