{% extends "baseTemplate/index.html" %}
{% load static %}
{% comment %} Modification console: PHP version, open_basedir, aliases and the raw vhost.
   The raw editor is deliberately last and visually separated — plogical keeps
   a .bak and rolls back a configuration OpenLiteSpeed refuses, but a bad edit
   still costs the customer a reload. {% endcomment %}

{% block title %}Modify website{% endblock %}

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

  <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-4">
    <div>
      <h1 class="h4 mb-1">Modify website</h1>
      <p class="text-muted mb-0 small">
        Change the PHP build, the open_basedir confinement, the domain aliases
        or the virtual host configuration itself.
      </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="card mb-4">
    <div class="card-body">
      <label class="form-label" for="cpDomainPick">Website</label>
      <div class="row g-2">
        <div class="col-md-8">
          <select class="form-select" id="cpDomainPick" ng-model="domain"
                  ng-change="loadDomain()">
            <option value="">Choose a website…</option>
            {% for site in websites %}
              <option value="{{ site }}">{{ site }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="col-md-4">
          <button type="button" class="btn btn-outline-secondary w-100"
                  ng-click="loadDomain()" ng-disabled="!domain || busy">
            <i class="fas fa-rotate me-1"></i>Reload settings
          </button>
        </div>
      </div>
    </div>
  </div>

  <div ng-show="loaded" ng-cloak>
    <div class="row g-4">

      <div class="col-lg-6">
        <div class="card h-100">
          <div class="card-body">
            <h2 class="h6 mb-3"><i class="fas fa-sliders me-1 text-primary"></i>Settings</h2>

            <form novalidate ng-submit="saveSettings()">
              <div class="mb-3">
                <label class="form-label" for="cpMailTo">Administrator email</label>
                <input type="email" class="form-control" id="cpMailTo"
                       ng-model="settings.adminEmail" autocomplete="off">
              </div>

              <div class="mb-3">
                <label class="form-label" for="cpPhpPick">PHP version</label>
                <select class="form-select" id="cpPhpPick" ng-model="settings.phpSelection">
                  {% for php in phpVersions %}
                    <option value="{{ php }}">{{ php }}</option>
                  {% endfor %}
                </select>
                <div class="form-text">
                  Changing this rewrites the lsphp handler and reloads OpenLiteSpeed.
                </div>
              </div>

              <div class="form-check form-switch mb-3">
                <input class="form-check-input" type="checkbox" id="cpBasedirToggle"
                       ng-model="settings.openBasedir">
                <label class="form-check-label" for="cpBasedirToggle">
                  Confine PHP with <code>open_basedir</code>
                </label>
              </div>

              <button type="submit" class="btn btn-primary" 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 settings'"></span>
              </button>
            </form>
          </div>
        </div>
      </div>

      <div class="col-lg-6">
        <div class="card h-100">
          <div class="card-body">
            <h2 class="h6 mb-3">
              <i class="fas fa-link me-1 text-primary"></i>Domain aliases
            </h2>
            <p class="text-muted small">
              Extra names answering with this site's content. <code>www.</code>
              is always added automatically and does not need an entry here.
            </p>

            <div class="input-group mb-3">
              <input type="text" class="form-control" placeholder="alias.example.com"
                     ng-model="newAlias" ng-keydown="$event.key === 'Enter' && addAlias()"
                     aria-label="New alias domain">
              <button class="btn btn-outline-primary" type="button" ng-click="addAlias()">
                <i class="fas fa-plus me-1"></i>Add
              </button>
            </div>

            <ul class="list-group mb-3">
              <li class="list-group-item d-flex justify-content-between align-items-center"
                  ng-repeat="alias in settings.aliases">
                <span class="font-monospace small" ng-bind="alias"></span>
                <button type="button" class="btn btn-sm btn-outline-danger"
                        ng-click="removeAlias($index)" aria-label="Remove alias">
                  <i class="fas fa-xmark"></i>
                </button>
              </li>
              <li class="list-group-item text-muted small"
                  ng-show="settings.aliases.length === 0">
                No aliases configured.
              </li>
            </ul>

            <button type="button" class="btn btn-primary" ng-click="saveAliases()"
                    ng-disabled="busy">
              <span ng-bind="busy ? 'Saving…' : 'Save aliases'"></span>
            </button>
          </div>
        </div>
      </div>

      <div class="col-12">
        <div class="card border-warning">
          <div class="card-body">
            <h2 class="h6 mb-3">
              <i class="fas fa-file-code me-1 text-warning"></i>
              Virtual host configuration
            </h2>
            <div class="alert alert-warning py-2 px-3 small">
              Editing this by hand can take the site offline. The previous file
              is kept as <code>vhost.conf.cloudpanel.bak</code> and restored
              automatically if OpenLiteSpeed refuses to reload.
            </div>

            <label class="form-label visually-hidden" for="cpVhost">
              vhost.conf contents
            </label>
            <textarea class="form-control font-monospace" id="cpVhost" rows="18"
                      spellcheck="false" ng-model="vhostConf"></textarea>

            <div class="mt-3 d-flex gap-2">
              <button type="button" class="btn btn-warning" ng-click="saveVhost()"
                      ng-disabled="busy">
                <i class="fas fa-floppy-disk me-1"></i>
                <span ng-bind="busy ? 'Saving…' : 'Save configuration'"></span>
              </button>
              <button type="button" class="btn btn-outline-secondary"
                      ng-click="loadDomain()" ng-disabled="busy">
                Discard changes
              </button>
            </div>
          </div>
        </div>
      </div>

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

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