{% extends "baseTemplate/index.html" %}
{% load static %}
{# Create a hosting package. Owner selection is administrator-only. #}

{% block title %}Create package{% endblock %}

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

  <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-4">
    <div>
      <h1 class="h4 mb-1">Create a package</h1>
      <p class="text-muted mb-0 small">
        Every limit is a number; <strong>0 means unlimited</strong>. Sizes are in
        megabytes.
      </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>

  <form novalidate ng-submit="submit()">
    <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="pkgName">Package name</label>
              <input type="text" class="form-control" id="pkgName" maxlength="50"
                     ng-model="pkg.packageName" autocomplete="off" required
                     placeholder="e.g. Starter">
              <div class="form-text">
                Letters, digits, spaces, dot, dash and underscore. Must be unique
                for the owner.
              </div>
            </div>

            {% if isAdmin %}
            <div class="mb-3">
              <label class="form-label" for="pkgOwner">Owner</label>
              <select class="form-select" id="pkgOwner" ng-model="pkg.owner">
                <option value="">{{ userName }} (you)</option>
                {% for owner in owners %}
                  <option value="{{ owner }}">{{ owner }}</option>
                {% endfor %}
              </select>
              <div class="form-text">
                Only an administrator may assign a package to another account.
              </div>
            </div>
            {% endif %}

            <div class="row g-3">
              <div class="col-sm-6">
                <label class="form-label" for="pkgDisk">Disk space (MB)</label>
                <input type="number" min="0" step="1" class="form-control" id="pkgDisk"
                       ng-model="pkg.diskSpace">
              </div>
              <div class="col-sm-6">
                <label class="form-label" for="pkgBw">Bandwidth (MB / month)</label>
                <input type="number" min="0" step="1" class="form-control" id="pkgBw"
                       ng-model="pkg.bandwidth">
              </div>
              <div class="col-sm-6">
                <label class="form-label" for="pkgDb">Databases</label>
                <input type="number" min="0" step="1" class="form-control" id="pkgDb"
                       ng-model="pkg.dataBaseLimit">
              </div>
              <div class="col-sm-6">
                <label class="form-label" for="pkgFtp">FTP accounts</label>
                <input type="number" min="0" step="1" class="form-control" id="pkgFtp"
                       ng-model="pkg.ftpAccounts">
              </div>
              <div class="col-sm-6">
                <label class="form-label" for="pkgMail">Email accounts</label>
                <input type="number" min="0" step="1" class="form-control" id="pkgMail"
                       ng-model="pkg.emailAccounts">
              </div>
              <div class="col-sm-6">
                <label class="form-label" for="pkgDomains">Add-on domains</label>
                <input type="number" min="0" step="1" class="form-control" id="pkgDomains"
                       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">
              Applied to every website created on this plan (as its own
              OpenLiteSpeed <code>extprocessor</code> block). 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="pkgMemSoft">PHP memory, soft (MB)</label>
                <input type="number" min="64" max="65536" step="1" class="form-control"
                       id="pkgMemSoft" ng-model="pkg.phpMemorySoftLimit">
              </div>
              <div class="col-sm-6">
                <label class="form-label" for="pkgMemHard">PHP memory, hard (MB)</label>
                <input type="number" min="64" max="65536" step="1" class="form-control"
                       id="pkgMemHard" ng-model="pkg.phpMemoryHardLimit">
              </div>
              <div class="col-sm-6">
                <label class="form-label" for="pkgProcSoft">PHP processes, soft</label>
                <input type="number" min="1" max="1000" step="1" class="form-control"
                       id="pkgProcSoft" ng-model="pkg.phpProcessSoftLimit">
              </div>
              <div class="col-sm-6">
                <label class="form-label" for="pkgProcHard">PHP processes, hard</label>
                <input type="number" min="1" max="1000" step="1" class="form-control"
                       id="pkgProcHard" ng-model="pkg.phpProcessHardLimit">
              </div>
              <div class="col-sm-6">
                <label class="form-label" for="pkgMaxConns">Max PHP connections</label>
                <input type="number" min="1" max="500" step="1" class="form-control"
                       id="pkgMaxConns" ng-model="pkg.phpMaxConnections">
              </div>
              <div class="col-sm-6">
                <label class="form-label" for="pkgPriority">CPU priority (nice, 0-19)</label>
                <input type="number" min="0" max="19" step="1" class="form-control"
                       id="pkgPriority" 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, ...) &mdash; unlike the PHP-only
              limits above, these cannot be exceeded even by something other
              than PHP. <strong>0 means unlimited</strong> (the default).
            </p>
            <div class="row g-3">
              <div class="col-sm-6">
                <label class="form-label" for="pkgHardCpu">CPU limit (%)</label>
                <input type="number" min="0" step="1" class="form-control" id="pkgHardCpu"
                       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="pkgHardMem">Memory limit (MB)</label>
                <input type="number" min="0" step="1" class="form-control" id="pkgHardMem"
                       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="pkgHardTasks">Process/thread limit</label>
                <input type="number" min="0" step="1" class="form-control" id="pkgHardTasks"
                       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="pkgHardIo">I/O weight</label>
                <input type="number" min="0" step="1" class="form-control" id="pkgHardIo"
                       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="pkgFull"
                     ng-model="pkg.allowFullDomain">
              <label class="form-check-label" for="pkgFull">
                Allow full domains
                <span class="d-block small text-muted">
                  When off the customer may only create sub-domains of a domain
                  they already hold.
                </span>
              </label>
            </div>

            <div class="form-check form-switch mb-3">
              <input class="form-check-input" type="checkbox" id="pkgQuota"
                     ng-model="pkg.enforceDiskLimits">
              <label class="form-check-label" for="pkgQuota">
                Enforce disk quota
                <span class="d-block small text-muted">
                  Applies a hard filesystem quota instead of only reporting usage.
                </span>
              </label>
            </div>

            <div class="form-check form-switch mb-3">
              <input class="form-check-input" type="checkbox" id="pkgApache"
                     ng-model="pkg.apacheBackend">
              <label class="form-check-label" for="pkgApache">
                Apache backend
                <span class="d-block small text-muted">
                  Provisions Apache behind OpenLiteSpeed for sites on this plan.
                </span>
              </label>
            </div>

            <div class="mt-auto pt-3">
              <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 ? 'Creating…' : 'Create package'"></span>
              </button>
            </div>
          </div>
        </div>
      </div>

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

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