{% extends "baseTemplate/index.html" %}
{% load static %}
{# Read-only overview of every package the signed-in tenant may see. #}

{% block title %}Packages{% endblock %}

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

  <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-4">
    <div>
      <h1 class="h4 mb-1">Hosting packages</h1>
      <p class="text-muted mb-0 small">
        The resource envelope a website is sold under. You see the packages you
        own{% if not isAdmin %} and those owned by accounts beneath you{% endif %}.
      </p>
    </div>
    <div class="d-flex gap-2">
      {% if canModify %}
        <a href="/websites/resourceUsageBySite" class="btn btn-outline-secondary">
          <i class="fas fa-microchip me-1"></i>Resource usage by site
        </a>
      {% endif %}
      {% if canCreate %}
        <a href="/packages/createPackage" class="btn btn-primary">
          <i class="fas fa-plus me-1"></i>New package
        </a>
      {% endif %}
    </div>
  </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">
    <div class="card-body">

      <div class="d-flex flex-wrap gap-2 align-items-center mb-3">
        <div class="input-group" style="max-width:320px">
          <span class="input-group-text"><i class="fas fa-magnifying-glass"></i></span>
          <input type="search" class="form-control" placeholder="Filter packages"
                 ng-model="search" aria-label="Filter packages">
        </div>
        <span class="text-muted small ms-auto" ng-cloak>
          <span ng-bind="(packages | filter:search).length"></span> of
          <span ng-bind="packages.length"></span> shown
        </span>
        <button type="button" class="btn btn-outline-secondary btn-sm"
                ng-click="load()" ng-disabled="busy">
          <i class="fas fa-rotate me-1"></i>Refresh
        </button>
      </div>

      <div ng-show="busy" class="text-center py-4" ng-cloak>
        <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
        Loading packages…
      </div>

      <div ng-show="!busy && !packages.length" class="text-center text-muted py-5" ng-cloak>
        <i class="fas fa-box-open fa-2x mb-2 d-block"></i>
        No packages yet.
        {% if canCreate %}<a href="/packages/createPackage">Create the first one</a>.{% endif %}
      </div>

      <div class="table-responsive" ng-show="!busy && packages.length" ng-cloak>
        <table class="table table-hover align-middle">
          <thead>
            <tr>
              <th scope="col">Package</th>
              <th scope="col">Owner</th>
              <th scope="col" class="text-end">Disk</th>
              <th scope="col" class="text-end">Bandwidth</th>
              <th scope="col" class="text-end">Databases</th>
              <th scope="col" class="text-end">FTP</th>
              <th scope="col" class="text-end">Email</th>
              <th scope="col" class="text-end">Domains</th>
              <th scope="col" class="text-end">In use</th>
              <th scope="col"></th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="pkg in packages | filter:search">
              <td>
                <strong ng-bind="pkg.packageName"></strong>
                <div class="small text-muted">
                  <span ng-show="pkg.allowFullDomain">Full domains allowed</span>
                  <span ng-hide="pkg.allowFullDomain">Sub-domains only</span>
                  <span ng-show="pkg.enforceDiskLimits"> &middot; hard quota</span>
                  <span ng-show="pkg.hardCpuPercent || pkg.hardMemoryMB || pkg.hardTasks || pkg.hardIoWeight">
                    &middot; <span class="badge text-bg-warning-subtle text-warning-emphasis">cgroups v2 hard limits</span>
                  </span>
                </div>
              </td>
              <td><span class="badge text-bg-secondary" ng-bind="pkg.owner"></span></td>
              <td class="text-end" ng-bind="pkg.diskSpaceDisplay"></td>
              <td class="text-end" ng-bind="pkg.bandwidthDisplay"></td>
              <td class="text-end" ng-bind="limitText(pkg.dataBaseLimit)"></td>
              <td class="text-end" ng-bind="limitText(pkg.ftpAccounts)"></td>
              <td class="text-end" ng-bind="limitText(pkg.emailAccounts)"></td>
              <td class="text-end" ng-bind="limitText(pkg.allowedDomains)"></td>
              <td class="text-end">
                <span class="badge rounded-pill"
                      ng-class="pkg.inUse ? 'text-bg-info' : 'text-bg-light border'"
                      ng-bind="pkg.inUse"></span>
              </td>
              <td class="text-end text-nowrap">
                {% if canModify %}
                  <a class="btn btn-sm btn-outline-secondary"
                     ng-href="/packages/modifyPackage?package={$ pkg.packageName $}"
                     title="Modify"><i class="fas fa-pen"></i></a>
                {% endif %}
                {% if canDelete %}
                  <a class="btn btn-sm btn-outline-danger"
                     ng-href="/packages/deletePackage?package={$ pkg.packageName $}"
                     title="Delete"><i class="fas fa-trash-can"></i></a>
                {% endif %}
              </td>
            </tr>
          </tbody>
        </table>
      </div>

    </div>
  </div>

  <p class="text-muted small mt-3 mb-0">
    <i class="fas fa-circle-info me-1"></i>
    A package that is assigned to at least one website cannot be deleted &mdash;
    move those sites to another package first.
  </p>
</div>
{% endblock %}

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