{% extends "baseTemplate/index.html" %}
{% load static %}
{% comment %} Website creation. The form posts once and then polls the status file the
   view hands back, because a full creation (user, tree, vhost, OLS reload and
   optionally Let's Encrypt) runs well past any sensible request timeout. {% endcomment %}

{% block title %}Create website{% endblock %}

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

  <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-4">
    <div>
      <h1 class="h4 mb-1">Create website</h1>
      <p class="text-muted mb-0 small">
        Sets up the system user, <code>/home/&lt;domain&gt;</code>, the
        OpenLiteSpeed virtual host and — optionally — a Let's Encrypt
        certificate.
      </p>
    </div>
    <a href="/websites/listWebsites" class="btn btn-outline-secondary btn-sm">
      <i class="fas fa-list me-1"></i>All websites
    </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="row g-4">
    <div class="col-lg-8">
      <div class="card">
        <div class="card-body">
          <form novalidate ng-submit="create()">

            <div class="row g-3">
              <div class="col-md-7">
                <label class="form-label" for="cpDomain">Domain name</label>
                <input type="text" class="form-control" id="cpDomain"
                       ng-model="site.domainName" ng-disabled="running"
                       placeholder="example.com" autocomplete="off" required>
                <div class="form-text">
                  Without <code>www.</code> — that alias is added automatically.
                </div>
              </div>

              <div class="col-md-5">
                <label class="form-label" for="cpEmail">Administrator email</label>
                <input type="email" class="form-control" id="cpEmail"
                       ng-model="site.adminEmail" ng-disabled="running"
                       autocomplete="off" required>
              </div>

              <div class="col-md-4">
                <label class="form-label" for="cpOwner">Owner</label>
                <select class="form-select" id="cpOwner" ng-model="site.websiteOwner"
                        ng-disabled="running">
                  {% for owner in owners %}
                    <option value="{{ owner }}">{{ owner }}</option>
                  {% endfor %}
                </select>
              </div>

              <div class="col-md-4">
                <label class="form-label" for="cpPackage">Package</label>
                <select class="form-select" id="cpPackage" ng-model="site.package"
                        ng-disabled="running" required>
                  <option value="">Choose a package…</option>
                  {% for package in packages %}
                    <option value="{{ package.packageName }}">
                      {{ package.packageName }} ({{ package.allowedDomains }} domain(s))
                    </option>
                  {% endfor %}
                </select>
              </div>

              <div class="col-md-4">
                <label class="form-label" for="cpPhp">PHP version</label>
                <select class="form-select" id="cpPhp" ng-model="site.phpSelection"
                        ng-disabled="running">
                  {% for php in phpVersions %}
                    <option value="{{ php }}">{{ php }}</option>
                  {% endfor %}
                </select>
              </div>
            </div>

            <hr class="my-4">

            <div class="row g-3">
              <div class="col-md-4">
                <div class="form-check form-switch">
                  <input class="form-check-input" type="checkbox" id="cpSsl"
                         ng-model="site.ssl" ng-disabled="running">
                  <label class="form-check-label" for="cpSsl">
                    Issue a Let's Encrypt certificate
                  </label>
                </div>
                <div class="form-text">
                  The domain must already resolve to this server.
                </div>
              </div>

              <div class="col-md-4">
                <div class="form-check form-switch">
                  <input class="form-check-input" type="checkbox" id="cpDkim"
                         ng-model="site.dkimCheck" ng-disabled="running">
                  <label class="form-check-label" for="cpDkim">Set up DKIM</label>
                </div>
                <div class="form-text">Signs outgoing mail for this domain.</div>
              </div>

              <div class="col-md-4">
                <div class="form-check form-switch">
                  <input class="form-check-input" type="checkbox" id="cpBasedir"
                         ng-model="site.openBasedir" ng-disabled="running">
                  <label class="form-check-label" for="cpBasedir">
                    Enable open_basedir
                  </label>
                </div>
                <div class="form-text">Confines PHP to the site's own home.</div>
              </div>
            </div>

            <div class="mt-4 d-flex gap-2">
              <button type="submit" class="btn btn-primary" ng-disabled="running">
                <span ng-show="running" class="spinner-border spinner-border-sm me-1"
                      role="status" aria-hidden="true"></span>
                <i class="fas fa-plus me-1" ng-hide="running"></i>
                <span ng-bind="running ? 'Creating…' : 'Create website'"></span>
              </button>
              <button type="button" class="btn btn-outline-secondary"
                      ng-click="reset()" ng-disabled="running">Reset</button>
            </div>
          </form>
        </div>
      </div>

      <div class="card mt-4" ng-show="started" ng-cloak>
        <div class="card-body">
          <h2 class="h6 mb-3">
            <i class="fas fa-gears me-1 text-primary"></i>
            Progress for <code ng-bind="createdDomain"></code>
          </h2>

          <div class="progress" role="progressbar" aria-label="Creation progress"
               style="height: 1.25rem;">
            <div class="progress-bar progress-bar-striped"
                 ng-class="{'progress-bar-animated': running,
                            'bg-danger': failed, 'bg-success': done && !failed}"
                 ng-style="{width: progress + '%'}">
              <span ng-bind="progress + '%'"></span>
            </div>
          </div>

          <p class="mt-3 mb-0 small"
             ng-class="failed ? 'text-danger' : 'text-muted'"
             ng-bind="statusText"></p>

          <div class="mt-3" ng-show="done && !failed">
            <a href="/websites/listWebsites" class="btn btn-sm btn-success">
              <i class="fas fa-arrow-right me-1"></i>Go to the website list
            </a>
          </div>
        </div>
      </div>
    </div>

    <div class="col-lg-4">
      <div class="card h-100">
        <div class="card-body">
          <h2 class="h6 mb-3">
            <i class="fas fa-circle-info me-1 text-primary"></i>Before you create
          </h2>
          <ul class="small text-muted ps-3 mb-0">
            <li class="mb-2">
              Point the domain's A record at this server first. Without it the
              certificate step fails and the site is served over plain HTTP
              until you issue one from the SSL page.
            </li>
            <li class="mb-2">
              The package sets the domain allowance, disk and database limits.
              Creation is refused up front when the owner is already at their
              quota.
            </li>
            <li class="mb-2">
              <code>open_basedir</code> is the right default for shared
              hosting; turn it off only when an application genuinely needs to
              read outside its own home.
            </li>
            <li>
              Leaving this page does not cancel the job — it keeps running on
              the server.
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
  window.CP_WEBSITE_DEFAULTS = {
    owner: "{{ currentUser|escapejs }}",
    email: "{{ defaultEmail|escapejs }}",
    php: "{{ phpVersions.0|escapejs }}"
  };
</script>
<script src="{% static 'websiteFunctions/websiteFunctions.js' %}"></script>
{% endblock %}