{% extends "baseTemplate/index.html" %}
{% load static %}
{# OS package updates (CyberPanel's "Package manager") -- admin only. #}

{% block title %}OS updates{% endblock %}

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

  <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-4">
    <div>
      <h1 class="h4 mb-1">OS updates</h1>
      <p class="text-muted mb-0 small">Refresh the package index and apply upgrades.</p>
    </div>
    <button type="button" class="btn btn-outline-secondary" ng-disabled="busy || running" ng-click="check()">
      <i class="fas fa-rotate me-1"></i>
      <span ng-bind="checked ? 'Recheck' : 'Check for updates'"></span>
    </button>
  </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-warning py-2 px-3" ng-show="rebootRequired" ng-cloak role="alert">
    <i class="fas fa-triangle-exclamation me-1"></i>
    A previous upgrade needs a reboot to take full effect.
  </div>

  <div class="card mb-3" ng-show="running" ng-cloak>
    <div class="card-body">
      <div class="d-flex align-items-center justify-content-between mb-2">
        <span><span class="cp-spinner me-1"></span><span ng-bind="statusText || 'Working…'"></span></span>
        <span ng-bind="progress + '%'"></span>
      </div>
      <div class="progress" style="height:6px">
        <div class="progress-bar progress-bar-striped progress-bar-animated"
             ng-style="{width: progress + '%'}"></div>
      </div>
    </div>
  </div>

  <div class="card">
    <div class="card-header d-flex flex-wrap align-items-center justify-content-between gap-2">
      <span class="fw-semibold">
        Upgradable packages
        <span class="badge text-bg-secondary ms-1" ng-show="checked" ng-bind="packages.length"></span>
        <span class="badge text-bg-warning ms-1" ng-show="securityCount" ng-cloak>
          <span ng-bind="securityCount"></span> security
        </span>
      </span>
      <div class="d-flex gap-2">
        <button type="button" class="btn btn-sm btn-warning" ng-disabled="running || !securityCount"
                ng-click="upgradeSecurity()">
          <i class="fas fa-shield-halved me-1"></i>Install security updates
        </button>
        <button type="button" class="btn btn-sm btn-primary" ng-disabled="running || !packages.length"
                ng-click="upgradeAll()">
          <i class="fas fa-arrow-up-right-dots me-1"></i>Install all updates
        </button>
      </div>
    </div>
    <div class="table-responsive">
      <table class="table table-sm table-hover align-middle mb-0">
        <thead>
          <tr>
            <th scope="col">Package</th>
            <th scope="col">Current</th>
            <th scope="col">New</th>
            <th scope="col"></th>
          </tr>
        </thead>
        <tbody ng-cloak>
          <tr ng-repeat="pkg in packages">
            <td class="cp-mono" ng-bind="pkg.name"></td>
            <td class="cp-mono text-muted" ng-bind="pkg['from']"></td>
            <td class="cp-mono" ng-bind="pkg.to"></td>
            <td><span class="badge text-bg-warning" ng-show="pkg.security">security</span></td>
          </tr>
          <tr ng-show="checked && !packages.length">
            <td colspan="4" class="text-muted text-center py-4">Every package is up to date.</td>
          </tr>
          <tr ng-show="!checked">
            <td colspan="4" class="text-muted text-center py-4">
              Click "Check for updates" to refresh the package index.
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>window.CP_SERVER_ADMIN_INITIAL_REBOOT_REQUIRED = {{ rebootRequired|yesno:"true,false" }};</script>
<script src="{% static 'serverStatus/serverStatus.js' %}"></script>
{% endblock %}