{% extends "baseTemplate/index.html" %}
{% load static %}
{% comment %} Per-site "Manage" dashboard: one page summarising a single website
   plus quick links to every per-site tool. Reached from the "Manage" button on
   the website listing. {% endcomment %}

{% block title %}Manage {{ domain }}{% endblock %}

{% block content %}
<div ng-controller="siteManageController" data-domain="{{ domain }}">

  <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-4">
    <div>
      <h1 class="h4 mb-1">
        <i class="fas fa-globe me-2 text-muted"></i><span ng-bind="domain"></span>
      </h1>
      <p class="text-muted mb-0 small">
        Owner <span ng-bind="overview.owner"></span> &middot;
        Package <span ng-bind="overview.package"></span> &middot;
        <span class="badge rounded-pill"
              ng-class="overview.state === 'Active' ? 'text-bg-success' : 'text-bg-warning'"
              ng-bind="overview.state"></span>
      </p>
    </div>
    <div class="btn-group btn-group-sm">
      <button type="button" class="btn btn-outline-secondary" ng-click="load()" ng-disabled="busy">
        <i class="fas fa-rotate me-1"></i>Refresh
      </button>
      <a class="btn btn-outline-secondary" href="/websites/listWebsites">
        <i class="fas fa-arrow-left me-1"></i>All websites
      </a>
    </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="row g-3 mb-3" ng-cloak>
    <div class="col-md-3 col-sm-6">
      <div class="card h-100">
        <div class="card-body">
          <div class="text-muted small mb-1">Disk usage</div>
          <div class="fw-semibold">
            <span ng-bind="overview.diskUsedMB"></span> MB
            <span ng-show="overview.diskLimitMB"> / <span ng-bind="overview.diskLimitMB"></span> MB</span>
            <span ng-show="!overview.diskLimitMB" class="text-muted">(unlimited)</span>
          </div>
          <div cp-progress="overview.diskPercent" ng-show="overview.diskLimitMB"></div>
        </div>
      </div>
    </div>
    <div class="col-md-3 col-sm-6">
      <div class="card h-100">
        <div class="card-body">
          <div class="text-muted small mb-1">Bandwidth (recent)</div>
          <div class="fw-semibold"><span ng-bind="overview.bandwidthMB"></span> MB</div>
          <div class="small text-muted" ng-show="overview.bandwidthLimitMB">
            of <span ng-bind="overview.bandwidthLimitMB"></span> MB/mo
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-3 col-sm-6">
      <div class="card h-100">
        <div class="card-body">
          <div class="text-muted small mb-1">SSL</div>
          <div class="fw-semibold text-capitalize" ng-bind="overview.ssl.status"></div>
          <div class="small text-muted" ng-show="overview.ssl.expiry">
            Expires <span ng-bind="overview.ssl.expiry"></span>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-3 col-sm-6">
      <div class="card h-100">
        <div class="card-body">
          <div class="text-muted small mb-1">PHP version</div>
          <div class="fw-semibold" ng-bind="overview.phpVersion"></div>
          <div class="small text-muted">
            <i class="fas" ng-class="overview.forceHTTPS ? 'fa-lock text-success' : 'fa-lock-open text-muted'"></i>
            Force HTTPS <span ng-bind="overview.forceHTTPS ? 'on' : 'off'"></span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="row g-3">
    <div class="col-lg-4">
      <div class="card mb-3">
        <div class="card-header">Site details</div>
        <div class="card-body small">
          <dl class="row mb-0">
            <dt class="col-5">Document root</dt>
            <dd class="col-7 text-break" ng-bind="overview.docRoot"></dd>
            <dt class="col-5">System user</dt>
            <dd class="col-7" ng-bind="overview.systemUser"></dd>
            <dt class="col-5">Databases</dt>
            <dd class="col-7">
              <span ng-bind="overview.databaseCount"></span>
              <span ng-show="overview.databaseLimit"> / <span ng-bind="overview.databaseLimit"></span></span>
            </dd>
            <dt class="col-5">FTP accounts</dt>
            <dd class="col-7">
              <span ng-bind="overview.ftpCount"></span>
              <span ng-show="overview.ftpLimit"> / <span ng-bind="overview.ftpLimit"></span></span>
            </dd>
            <dt class="col-5">Email accounts</dt>
            <dd class="col-7">
              <span ng-bind="overview.emailCount"></span>
              <span ng-show="overview.emailLimit"> / <span ng-bind="overview.emailLimit"></span></span>
            </dd>
            <dt class="col-5">Add-on domains</dt>
            <dd class="col-7">
              <span ng-bind="overview.childDomainCount"></span>
              <span ng-show="overview.childDomainLimit"> / <span ng-bind="overview.childDomainLimit"></span></span>
            </dd>
          </dl>
        </div>
      </div>

      {% if canOwnerPackage %}
      <div class="card mb-3">
        <div class="card-body d-flex justify-content-between align-items-center">
          <span class="small text-muted">Owner &amp; package</span>
          <a class="btn btn-outline-secondary btn-sm"
             ng-href="/websites/siteOwnerPackage?domain={$ domain $}">
            <i class="fas fa-user-gear me-1"></i>Change
          </a>
        </div>
      </div>
      {% endif %}
    </div>

    <div class="col-lg-8">
      <div class="card">
        <div class="card-header">Quick links</div>
        <div class="list-group list-group-flush">
          <a class="list-group-item list-group-item-action d-flex align-items-center"
             ng-repeat="link in overview.quickLinks" ng-cloak
             ng-href="{$ link.href $}">
            <i class="fas me-3 text-muted" ng-class="link.icon"></i>
            <span ng-bind="link.label"></span>
          </a>
          <div class="list-group-item text-muted small" ng-show="!busy && overview.quickLinks.length === 0" ng-cloak>
            No linked tools are available to this account.
          </div>
          {% comment %}
            Static, not part of overview.quickLinks: this whole page already
            requires modifyWebsite (see websiteFunctions/siteTools.py:manage),
            the same permission every quick link above is individually gated
            on, so no further ACL check is needed here. Added directly in the
            template (rather than in _quick_links()) because this file is the
            webTerminal package's one point of contact with the per-site
            "Manage" dashboard -- see that package's report.
          {% endcomment %}
          <a class="list-group-item list-group-item-action d-flex align-items-center"
             ng-href="/terminal/?domain={$ domain $}">
            <i class="fas fa-terminal me-3 text-muted"></i>
            <span>Terminal</span>
          </a>
        </div>
      </div>

      <div class="row g-3 mt-1" ng-cloak>
        <div class="col-md-4" ng-show="overview.hasWordPress">
          <div class="alert alert-info mb-0 small">
            <i class="fab fa-wordpress me-1"></i>WordPress detected on this site.
          </div>
        </div>
        <div class="col-md-4" ng-show="overview.hasStaging">
          <div class="alert alert-secondary mb-0 small">
            <i class="fas fa-flask me-1"></i>Has a staging copy.
          </div>
        </div>
        <div class="col-md-4" ng-show="overview.hasGit">
          <div class="alert alert-secondary mb-0 small">
            <i class="fas fa-code-branch me-1"></i>Deployed from git.
          </div>
        </div>
      </div>
    </div>
  </div>

</div>
{% endblock %}

{% block scripts %}
<script>window.CP_SITE_DOMAIN = "{{ domain|escapejs }}";</script>
<script src="{% static 'websiteFunctions/siteTools.js' %}"></script>
{% endblock %}