{% extends "baseTemplate/index.html" %}
{% load static %}
{% comment %} Delete a package. The server refuses while any website still uses it and
   names the sites; this page states that rule up front. {% endcomment %}

{% block title %}Delete package{% endblock %}

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

  <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-4">
    <div>
      <h1 class="h4 mb-1">Delete a package</h1>
      <p class="text-muted mb-0 small">
        A package still assigned to a website cannot be deleted. Move those sites
        to another package first.
      </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>
    <ul class="mb-0 mt-2 small" ng-show="blockingSites.length">
      <li ng-repeat="site in blockingSites track by $index" ng-bind="site"></li>
    </ul>
  </div>

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

          <label class="form-label" for="delSelect">Package</label>
          <div class="d-flex flex-wrap gap-2 mb-3">
            <select class="form-select" id="delSelect" style="max-width:420px"
                    ng-model="selectedName" ng-change="select()"
                    ng-options="p.packageName as (p.packageName + ' — ' + p.owner) for p in packages">
              <option value="">Choose a package…</option>
            </select>
            <button type="button" class="btn btn-outline-secondary" ng-click="load()"
                    ng-disabled="busy">
              <i class="fas fa-rotate me-1"></i>Refresh
            </button>
          </div>

          <div ng-show="pkg" ng-cloak>
            <dl class="row small mb-3">
              <dt class="col-5">Owner</dt>
              <dd class="col-7" ng-bind="pkg.owner"></dd>
              <dt class="col-5">Disk / bandwidth</dt>
              <dd class="col-7">
                <span ng-bind="pkg.diskSpaceDisplay"></span> /
                <span ng-bind="pkg.bandwidthDisplay"></span>
              </dd>
              <dt class="col-5">Websites using it</dt>
              <dd class="col-7">
                <span class="badge rounded-pill"
                      ng-class="pkg.inUse ? 'text-bg-danger' : 'text-bg-success'"
                      ng-bind="pkg.inUse"></span>
              </dd>
              <dt class="col-5">Created</dt>
              <dd class="col-7" ng-bind="pkg.dateCreated"></dd>
            </dl>

            <div class="alert alert-warning py-2 px-3 small" ng-show="pkg.inUse">
              <i class="fas fa-triangle-exclamation me-1"></i>
              This package is in use and cannot be deleted yet.
            </div>

            <button type="button" class="btn btn-danger"
                    ng-click="remove()" ng-disabled="busy || pkg.inUse">
              <span ng-show="busy" class="spinner-border spinner-border-sm me-1"
                    role="status" aria-hidden="true"></span>
              <i class="fas fa-trash-can me-1" ng-hide="busy"></i>
              <span ng-bind="busy ? 'Deleting…' : 'Delete package'"></span>
            </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 deletion does
          </h2>
          <ul class="small text-muted ps-3 mb-0">
            <li class="mb-2">
              Removes the plan only. No website, database or mailbox is touched.
            </li>
            <li class="mb-2">
              Refused while any website is still assigned to the package; the
              error names the sites that are in the way.
            </li>
            <li>
              The action is recorded in the audit log with your username and
              address.
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}

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