<app-loading [isLoading]="loading"></app-loading>
<div *ngIf="!loading" class="dashboard">
  <!-- Disk Usage Section -->
  <div class="disk-usage-container">
    <h3 class="disk-title">{{ 'diskUsageTitle' | translate }}</h3>
    <div class="disk-usage" joyrideStep="diskUsageStep" text="{{ 'diskUsageDescription' | translate }}">
      <ngx-charts-pie-chart [view]="view" [scheme]="colorScheme" [results]="diskUsageChartData" [doughnut]="isDoughnut"
        [labels]="showLabels">
      </ngx-charts-pie-chart>
      <div class="disk-usage-info">
        <p>{{ 'totalLabel' | translate }}: <strong>{{ isRepository ? diskUsage.total : formatBytes(diskUsage.total) }}</strong></p>
        <p>{{ 'usedLabel' | translate }}: <strong>{{ isRepository ? diskUsage.used : formatBytes(diskUsage.used) }}</strong></p>
        <p>{{ 'availableLabel' | translate }}: <strong>{{ isRepository ? diskUsage.available : formatBytes(diskUsage.available) }}</strong></p>
        <p>{{ 'usedPercentageLabel' | translate }}: <strong>{{ isRepository ? diskUsage.used_percentage : diskUsage.percentage }}</strong></p>
      </div>
    </div>
  </div>

  <!-- RAM Usage Section -->
  <div class="ram-usage-container" *ngIf="isRepository">
    <h3 class="ram-title">{{ 'RamUsage' | translate }}</h3>
    <div class="ram-usage">
      <ngx-charts-pie-chart [view]="view" [scheme]="colorScheme" [results]="ramUsageChartData" [doughnut]="isDoughnut"
        [labels]="showLabels">
      </ngx-charts-pie-chart>
      <div class="ram-usage-info">
        <p>{{ 'totalLabel' | translate }}: <strong>{{ ramUsage.total }}</strong></p>
        <p>{{ 'usedLabel' | translate }}: <strong>{{ ramUsage.used }}</strong></p>
        <p>{{ 'availableLabel' | translate }}: <strong>{{ ramUsage.available }}</strong></p>
        <p>{{ 'usedPercentageLabel' | translate }}: <strong>{{ ramUsage.used_percentage }}</strong></p>
      </div>
    </div>
  </div>

  <!-- CPU Usage Section -->
  <div class="cpu-usage-container" *ngIf="isRepository">
    <h3 class="cpu-title">{{ 'CpuUsage' | translate }}</h3>
    <div class="cpu-usage">
      <p>{{ 'usedLabel' | translate }}: <strong>{{ cpuUsage.used_percentage }}</strong></p>
    </div>
  </div>

  <!-- Services Status Section -->
  <div class="services-status" joyrideStep="servicesStatusStep" text="{{ 'servicesStatusDescription' | translate }}">
    <h3 class="service-title">{{ 'servicesTitle' | translate }}</h3>
    <ul class="service-list">
      <li *ngFor="let service of getServices()">
        <span class="status-led"
          [ngClass]="{ 'active': service.status === 'active', 'inactive': service.status !== 'active' }"></span>
        {{ service.name }}: {{ service.status | translate }}
      </li>
    </ul>
  </div>

  <!-- Processes Status Section -->
  <div class="processes-status" *ngIf="isRepository">
    <h3 class="process-title">{{ 'processes' | translate }}</h3>
    <ul class="process-list">
      <li *ngFor="let process of getProcesses()">
        <span class="status-led"
          [ngClass]="{ 'active': process.status === 'running', 'inactive': process.status !== 'running' }"></span>
        {{ process.name }}: {{ process.status }}
      </li>
    </ul>
  </div>

  <!-- Installed OgLives / Subnets Section -->
  <div *ngIf="!isRepository && !isDhcp">
    <h3>{{ 'InstalledOglivesTitle' | translate }}</h3>
    <table>
      <thead>
        <tr>
          <th>{{ 'idLabel' | translate }}</th>
          <th>{{ 'kernelLabel' | translate }}</th>
          <th>{{ 'architectureLabel' | translate }}</th>
          <th>{{ 'revisionLabel' | translate }}</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let item of installedOgLives">
          <td>{{ item.id }}</td>
          <td>{{ item.kernel }}</td>
          <td>{{ item.architecture }}</td>
          <td>{{ item.revision }}</td>
        </tr>
      </tbody>
    </table>
  </div>

  <div *ngIf="isDhcp">
    <h3>{{ 'subnets' | translate }}</h3>
    <table>
      <thead>
        <tr>
          <th>{{ 'idLabel' | translate }}</th>
          <th>{{ 'bootFileNameLabel' | translate }}</th>
          <th>{{ 'nextServerLabel' | translate }}</th>
          <th>{{ 'ipLabel' | translate }}</th>
          <th>{{ 'clientsLabel' | translate }}</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let item of subnets">
          <td>{{ item.id }}</td>
          <td>{{ item['boot-file-name'] }}</td>
          <td>{{ item['next-server'] }}</td>
          <td>{{ item.subnet }}</td>
          <td>{{ item.reservations.length }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>