{% extends "baseTemplate/index.html" %}
{% load static %}
{# Service grid. The browser sends a catalogue key, never a unit name -- see views.py. #}

{% block title %}Services{% endblock %}

{% block styles %}
<style>
  .cp-svc          { border:1px solid var(--cp-border); border-radius:var(--cp-radius-lg);
                     padding:1rem 1.1rem; height:100%; background:var(--cp-bg);
                     display:flex; flex-direction:column; gap:.6rem; }
  .cp-svc.is-down  { border-color:var(--cp-danger); background:var(--cp-bg-subtle); }
  .cp-svc__head    { display:flex; align-items:flex-start; justify-content:space-between; gap:.5rem; }
  .cp-svc__name    { font-weight:600; }
  .cp-svc__unit    { font-family:var(--cp-font-mono); font-size:.75rem; color:var(--cp-neutral); }
  .cp-svc__desc    { font-size:.82rem; color:var(--cp-neutral); flex:1 1 auto; }
  .cp-dot          { width:.55rem; height:.55rem; border-radius:50%; display:inline-block;
                     background:var(--cp-neutral); }
  .cp-dot.is-up    { background:var(--cp-primary); }
  .cp-dot.is-down  { background:var(--cp-danger); }
</style>
{% endblock %}

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

  <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-4">
    <div>
      <h1 class="h4 mb-1">Services</h1>
      <p class="text-muted mb-0 small">
        The {{ catalog|length }} units CloudPanel manages. Actions are routed through
        the server-side service allowlist &mdash; a name typed into the page cannot
        reach systemd.
      </p>
    </div>
    <div class="d-flex align-items-center gap-2">
      <span class="text-muted small" ng-cloak>Updated <span ng-bind="updatedAt"></span></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>

  <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="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 services"
             ng-model="search" aria-label="Filter services">
    </div>
    <div class="form-check form-switch ms-2">
      <input class="form-check-input" type="checkbox" id="cpOnlyDown" ng-model="onlyDown">
      <label class="form-check-label small" for="cpOnlyDown">Only show units that are not running</label>
    </div>
    <span class="text-muted small ms-auto" ng-cloak>
      <span ng-bind="runningCount()"></span> of <span ng-bind="services.length"></span> running
    </span>
  </div>

  <div ng-show="busy && !services.length" class="text-center py-5 text-muted" ng-cloak>
    <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
    Reading systemd…
  </div>

  <div class="row g-3" ng-cloak>
    <div class="col-12 col-md-6 col-xl-4"
         ng-repeat="svc in services | filter:search | filter:downFilter">
      <div class="cp-svc" ng-class="{'is-down': !svc.running}">

        <div class="cp-svc__head">
          <div>
            <div class="cp-svc__name">
              <span class="cp-dot me-1" ng-class="svc.running ? 'is-up' : 'is-down'"></span>
              <span ng-bind="svc.label"></span>
            </div>
            <div class="cp-svc__unit" ng-bind="svc.unit + '.service'"></div>
          </div>
          <div class="text-end">
            <span class="badge" ng-class="svc.running ? 'text-bg-success' : 'text-bg-secondary'"
                  ng-bind="svc.status"></span>
            <div class="cp-svc__unit mt-1" ng-show="svc.memory" ng-bind="svc.memory"></div>
          </div>
        </div>

        <div class="cp-svc__desc" ng-bind="svc.description"></div>

        <div class="small text-danger" ng-show="svc.message" ng-bind="svc.message"></div>

        <div class="d-flex flex-wrap gap-1">
          <button type="button" class="btn btn-sm btn-outline-primary"
                  ng-disabled="svc.busy || svc.running"
                  ng-click="act(svc, 'start')">
            <i class="fas fa-play me-1"></i>Start
          </button>
          <button type="button" class="btn btn-sm btn-outline-secondary"
                  ng-disabled="svc.busy"
                  ng-click="act(svc, 'restart')">
            <i class="fas fa-rotate-right me-1"></i>Restart
          </button>
          <button type="button" class="btn btn-sm btn-outline-secondary"
                  ng-disabled="svc.busy || !svc.running"
                  ng-click="act(svc, 'reload')">
            <i class="fas fa-arrows-rotate me-1"></i>Reload
          </button>
          <button type="button" class="btn btn-sm btn-outline-danger"
                  ng-disabled="svc.busy || !svc.running || !svc.canStop"
                  ng-attr-title="{$ svc.canStop ? 'Stop this unit' : 'CloudPanel refuses to stop its own units' $}"
                  ng-click="act(svc, 'stop')">
            <i class="fas fa-stop me-1"></i>Stop
          </button>
          <span class="spinner-border spinner-border-sm ms-1 align-self-center"
                role="status" aria-hidden="true" ng-show="svc.busy"></span>
        </div>

        <div class="small text-muted" ng-show="svc.disruptive">
          <i class="fas fa-triangle-exclamation me-1"></i>
          Restarting this unit interrupts the panel or the sites it serves.
        </div>
      </div>
    </div>
  </div>

  <p class="text-muted small mt-4 mb-0">
    <i class="fas fa-shield-halved me-1"></i>
    CloudPanel will not stop its own web service or root daemon: that would end
    your session with no way back in except the server console.
  </p>
</div>
{% endblock %}

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