{% extends "baseTemplate/index.html" %}
{% load static %}
{% comment %} Suspend / unsuspend. Reversible, so no retype confirmation — a plain
   confirmation dialog is enough. {% endcomment %}

{% block title %}Suspend website{% endblock %}

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

  <div class="mb-4">
    <h1 class="h4 mb-1">Suspend or unsuspend a website</h1>
    <p class="text-muted mb-0 small">
      A suspended site answers with the suspension page and its system account
      is locked, so FTP and SSH stop working too. Files and databases are left
      untouched.
    </p>
  </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="alert alert-success py-2 px-3" ng-show="successMessage" ng-cloak role="status">
    <i class="fas fa-circle-check me-1"></i>
    <span ng-bind="successMessage"></span>
  </div>

  <div class="row g-4">
    <div class="col-lg-7">
      <div class="card">
        <div class="card-body">

          <div class="mb-3">
            <label class="form-label" for="cpSuspendDomain">Website</label>
            <select class="form-select" id="cpSuspendDomain" ng-model="domain">
              <option value="">Choose a website…</option>
              {% for site in websites %}
                <option value="{{ site }}">{{ site }}</option>
              {% endfor %}
            </select>
          </div>

          <div class="d-flex flex-wrap gap-2" ng-show="domain" ng-cloak>
            <button type="button" class="btn btn-warning"
                    ng-click="setState('suspend')" ng-disabled="busy">
              <i class="fas fa-pause me-1"></i>Suspend
            </button>
            <button type="button" class="btn btn-success"
                    ng-click="setState('unsuspend')" ng-disabled="busy">
              <i class="fas fa-play me-1"></i>Unsuspend
            </button>
          </div>

        </div>
      </div>
    </div>

    <div class="col-lg-5">
      <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>What suspension does
          </h2>
          <ul class="small text-muted ps-3 mb-0">
            <li class="mb-2">
              OpenLiteSpeed serves the suspension page for every request to the
              domain and its child domains.
            </li>
            <li class="mb-2">
              The Unix account is locked with <code>usermod --lock</code>, which
              stops FTP and SSH but leaves cron entries and the data in place.
            </li>
            <li class="mb-2">
              Databases keep running, so an application on another host that
              connects remotely is unaffected.
            </li>
            <li>
              Unsuspending restores the original vhost and unlocks the account;
              nothing has to be rebuilt.
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}

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