{% extends "baseTemplate/index.html" %}
{% load static %}
{% comment %} Child domain creation: shares the master's system user and home directory,
   so only a docroot and a vhost are new. Same polling pattern as a website. {% endcomment %}

{% block title %}Create child domain{% endblock %}

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

  <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-4">
    <div>
      <h1 class="h4 mb-1">Create child domain</h1>
      <p class="text-muted mb-0 small">
        An add-on or sub domain served from inside an existing website's home
        directory.
      </p>
    </div>
    <a href="/websites/listChildDomains" class="btn btn-outline-secondary btn-sm">
      <i class="fas fa-list me-1"></i>All child domains
    </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-6">
                <label class="form-label" for="cpMaster">Parent website</label>
                <select class="form-select" id="cpMaster" ng-model="child.masterDomain"
                        ng-disabled="running" required>
                  <option value="">Choose a website…</option>
                  {% for site in websites %}
                    <option value="{{ site }}">{{ site }}</option>
                  {% endfor %}
                </select>
              </div>

              <div class="col-md-6">
                <label class="form-label" for="cpChild">Child domain</label>
                <input type="text" class="form-control" id="cpChild"
                       ng-model="child.domainName" ng-disabled="running"
                       placeholder="shop.example.com" autocomplete="off" required>
              </div>

              <div class="col-md-8">
                <label class="form-label" for="cpChildPath">Document root</label>
                <input type="text" class="form-control font-monospace" id="cpChildPath"
                       ng-model="child.path" ng-disabled="running"
                       ng-attr-placeholder="{$ defaultPath() $}" autocomplete="off">
                <div class="form-text">
                  Leave blank for the default. Must stay inside the parent's home.
                </div>
              </div>

              <div class="col-md-4">
                <label class="form-label" for="cpChildPhp">PHP version</label>
                <select class="form-select" id="cpChildPhp" ng-model="child.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="cpChildSsl"
                         ng-model="child.ssl" ng-disabled="running">
                  <label class="form-check-label" for="cpChildSsl">Issue SSL</label>
                </div>
              </div>
              <div class="col-md-4">
                <div class="form-check form-switch">
                  <input class="form-check-input" type="checkbox" id="cpChildDkim"
                         ng-model="child.dkimCheck" ng-disabled="running">
                  <label class="form-check-label" for="cpChildDkim">Set up DKIM</label>
                </div>
              </div>
              <div class="col-md-4">
                <div class="form-check form-switch">
                  <input class="form-check-input" type="checkbox" id="cpChildBasedir"
                         ng-model="child.openBasedir" ng-disabled="running">
                  <label class="form-check-label" for="cpChildBasedir">
                    Enable open_basedir
                  </label>
                </div>
              </div>
            </div>

            <div class="mt-4">
              <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 child domain'"></span>
              </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>
      </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>How this differs
          </h2>
          <ul class="small text-muted ps-3 mb-0">
            <li class="mb-2">
              No new system user: the child runs as the parent's user, so PHP
              can read the parent's files unless open_basedir is on.
            </li>
            <li class="mb-2">
              The child counts against the same package domain allowance as the
              parent website.
            </li>
            <li class="mb-2">
              Deleting a child removes only its own configuration and docroot —
              the parent's home directory stays put.
            </li>
            <li>
              Suspending the parent suspends every child with it.
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}

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