{% extends "baseTemplate/index.html" %}
{% load static %}
{% comment %} Edit an existing package. The package list is fetched, never guessed, so a
   package outside the tenant simply never appears in the selector. {% endcomment %}

{% block title %}Modify package{% endblock %}

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

  <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-4">
    <div>
      <h1 class="h4 mb-1">Modify a package</h1>
      <p class="text-muted mb-0 small">
        Changing a limit applies to every website already on the plan.
        <strong>0 means unlimited.</strong>
      </p>
    </div>
    <a href="/packages/listPackages" class="btn btn-outline-secondary">
      <i class="fas fa-list me-1"></i>All packages
    </a>
  </div>

  <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="card mb-4">
    <div class="card-body">
      <label class="form-label" for="pkgSelect">Package</label>
      <div class="d-flex flex-wrap gap-2">
        <select class="form-select" id="pkgSelect" style="max-width:420px"
                ng-model="selectedName" ng-change="select()"
                ng-options="p.packageName as (p.packageName + ' — ' + p.owner) for p in packages">
          <option value="">Choose a package…</option>
        </select>
        <button type="button" class="btn btn-outline-secondary" ng-click="load()"
                ng-disabled="busy">
          <i class="fas fa-rotate me-1"></i>Refresh
        </button>
      </div>
      <div class="form-text" ng-show="pkg.packageName" ng-cloak>
        Currently assigned to <strong ng-bind="pkg.inUse"></strong> website(s).
      </div>
    </div>
  </div>

  <form novalidate ng-submit="save()" ng-show="pkg.packageName" ng-cloak>
    <div class="row g-4">

      <div class="col-lg-7">
        <div class="card h-100">
          <div class="card-body">
            <h2 class="h6 mb-3">Plan</h2>

            <div class="mb-3">
              <label class="form-label" for="pkgNewName">Package name</label>
              <input type="text" class="form-control" id="pkgNewName" maxlength="50"
                     ng-model="pkg.newPackageName" autocomplete="off" required>
            </div>

            {% if isAdmin %}
            <div class="mb-3">
              <label class="form-label" for="pkgOwner2">Owner</label>
              <select class="form-select" id="pkgOwner2" ng-model="pkg.owner">
                {% for owner in owners %}
                  <option value="{{ owner }}">{{ owner }}</option>
                {% endfor %}
              </select>
              <div class="form-text">
                Reassigning an owner moves the plan to another tenant. Administrators only.
              </div>
            </div>
            {% endif %}

            <div class="row g-3">
              <div class="col-sm-6">
                <label class="form-label" for="mDisk">Disk space (MB)</label>
                <input type="number" min="0" step="1" class="form-control" id="mDisk"
                       ng-model="pkg.diskSpace">
              </div>
              <div class="col-sm-6">
                <label class="form-label" for="mBw">Bandwidth (MB / month)</label>
                <input type="number" min="0" step="1" class="form-control" id="mBw"
                       ng-model="pkg.bandwidth">
              </div>
              <div class="col-sm-6">
                <label class="form-label" for="mDb">Databases</label>
                <input type="number" min="0" step="1" class="form-control" id="mDb"
                       ng-model="pkg.dataBaseLimit">
              </div>
              <div class="col-sm-6">
                <label class="form-label" for="mFtp">FTP accounts</label>
                <input type="number" min="0" step="1" class="form-control" id="mFtp"
                       ng-model="pkg.ftpAccounts">
              </div>
              <div class="col-sm-6">
                <label class="form-label" for="mMail">Email accounts</label>
                <input type="number" min="0" step="1" class="form-control" id="mMail"
                       ng-model="pkg.emailAccounts">
              </div>
              <div class="col-sm-6">
                <label class="form-label" for="mDomains">Add-on domains</label>
                <input type="number" min="0" step="1" class="form-control" id="mDomains"
                       ng-model="pkg.allowedDomains">
              </div>
            </div>
          </div>
        </div>

        <div class="card h-100 mt-4">
          <div class="card-body">
            <h2 class="h6 mb-1">PHP resource limits</h2>
            <p class="text-muted small mb-3">
              The default for every website on this plan. These can be
              overridden for an individual site from that site's own manage
              page ("Resource limits").
            </p>
            <div class="row g-3">
              <div class="col-sm-6">
                <label class="form-label" for="mMemSoft">PHP memory, soft (MB)</label>
                <input type="number" min="64" max="65536" step="1" class="form-control"
                       id="mMemSoft" ng-model="pkg.phpMemorySoftLimit">
              </div>
              <div class="col-sm-6">
                <label class="form-label" for="mMemHard">PHP memory, hard (MB)</label>
                <input type="number" min="64" max="65536" step="1" class="form-control"
                       id="mMemHard" ng-model="pkg.phpMemoryHardLimit">
              </div>
              <div class="col-sm-6">
                <label class="form-label" for="mProcSoft">PHP processes, soft</label>
                <input type="number" min="1" max="1000" step="1" class="form-control"
                       id="mProcSoft" ng-model="pkg.phpProcessSoftLimit">
              </div>
              <div class="col-sm-6">
                <label class="form-label" for="mProcHard">PHP processes, hard</label>
                <input type="number" min="1" max="1000" step="1" class="form-control"
                       id="mProcHard" ng-model="pkg.phpProcessHardLimit">
              </div>
              <div class="col-sm-6">
                <label class="form-label" for="mMaxConns">Max PHP connections</label>
                <input type="number" min="1" max="500" step="1" class="form-control"
                       id="mMaxConns" ng-model="pkg.phpMaxConnections">
              </div>
              <div class="col-sm-6">
                <label class="form-label" for="mPriority">CPU priority (nice, 0-19)</label>
                <input type="number" min="0" max="19" step="1" class="form-control"
                       id="mPriority" ng-model="pkg.cpuPriority">
              </div>
            </div>
            <div class="form-text mt-2">
              <i class="fas fa-circle-info me-1"></i>
              This is a scheduling priority, not a hard CPU quota &mdash;
              OpenLiteSpeed has no per-website CPU limit.
            </div>
          </div>
        </div>

        <div class="card h-100 mt-4">
          <div class="card-body">
            <h2 class="h6 mb-1">Hard limits (cgroups v2)</h2>
            <p class="text-muted small mb-3">
              Kernel-enforced ceilings on every process the site's own system
              account can run (PHP, cron, SSH, ...). <strong>0 means
              unlimited</strong>. Saving here re-applies to every website
              already on this plan.
            </p>
            <div class="row g-3">
              <div class="col-sm-6">
                <label class="form-label" for="mHardCpu">CPU limit (%)</label>
                <input type="number" min="0" step="1" class="form-control" id="mHardCpu"
                       ng-model="pkg.hardCpuPercent" placeholder="0 = unlimited">
                <div class="form-text">100 = one full core. Range 5-800.</div>
              </div>
              <div class="col-sm-6">
                <label class="form-label" for="mHardMem">Memory limit (MB)</label>
                <input type="number" min="0" step="1" class="form-control" id="mHardMem"
                       ng-model="pkg.hardMemoryMB" placeholder="0 = unlimited">
                <div class="form-text">Range 64-262144.</div>
              </div>
              <div class="col-sm-6">
                <label class="form-label" for="mHardTasks">Process/thread limit</label>
                <input type="number" min="0" step="1" class="form-control" id="mHardTasks"
                       ng-model="pkg.hardTasks" placeholder="0 = unlimited">
                <div class="form-text">Range 16-10000.</div>
              </div>
              <div class="col-sm-6">
                <label class="form-label" for="mHardIo">I/O weight</label>
                <input type="number" min="0" step="1" class="form-control" id="mHardIo"
                       ng-model="pkg.hardIoWeight" placeholder="0 = unlimited">
                <div class="form-text">Proportional, not a hard cap. Range 1-10000.</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="col-lg-5">
        <div class="card h-100">
          <div class="card-body d-flex flex-column">
            <h2 class="h6 mb-3">Behaviour</h2>

            <div class="form-check form-switch mb-3">
              <input class="form-check-input" type="checkbox" id="mFull"
                     ng-model="pkg.allowFullDomain">
              <label class="form-check-label" for="mFull">Allow full domains</label>
            </div>

            <div class="form-check form-switch mb-3">
              <input class="form-check-input" type="checkbox" id="mQuota"
                     ng-model="pkg.enforceDiskLimits">
              <label class="form-check-label" for="mQuota">Enforce disk quota</label>
            </div>

            <div class="form-check form-switch mb-3">
              <input class="form-check-input" type="checkbox" id="mApache"
                     ng-model="pkg.apacheBackend">
              <label class="form-check-label" for="mApache">Apache backend</label>
            </div>

            <div class="alert alert-info py-2 px-3 small mb-3">
              <i class="fas fa-circle-info me-1"></i>
              Lowering a limit below what a site already uses does not delete
              anything &mdash; it stops the customer creating more.
            </div>

            <div class="mt-auto">
              <button type="submit" class="btn btn-primary w-100" ng-disabled="busy">
                <span ng-show="busy" class="spinner-border spinner-border-sm me-1"
                      role="status" aria-hidden="true"></span>
                <span ng-bind="busy ? 'Saving…' : 'Save changes'"></span>
              </button>
            </div>
          </div>
        </div>
      </div>

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

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