<app-loading [isLoading]="loading"></app-loading>

<div class="header-container">
  <button mat-icon-button color="primary" (click)="iniciarTour()">
    <mat-icon>help</mat-icon>
  </button>
  <div class="header-container-title">
    <h2 joyrideStep="titleStep" text="Esta sección muestra el estado general del servidor OgBoot.">
      {{ 'ogBootServerStatus' | translate }}
    </h2>
  </div>
</div>

<div class="dashboard">
  <div class="disk-usage-container">
    <!-- Disk Usage Section -->
    <div class="disk-usage" joyrideStep="diskUsageStep" text="{{ 'diskUsageDescription' | translate }}">
      <h3>{{ 'diskUsageTitle' | translate }}</h3>
      <ngx-charts-pie-chart [view]="view" [scheme]="colorScheme" [results]="diskUsageChartData" [gradient]="gradient"
        [doughnut]="isDoughnut" [labels]="showLabels" [legend]="showLegend">
      </ngx-charts-pie-chart>
      <div class="disk-usage-info">
        <p>{{ 'totalLabel' | translate }}: {{ formatBytes(diskUsage.total) }}</p>
        <p>{{ 'usedLabel' | translate }}: {{ formatBytes(diskUsage.used) }}</p>
        <p>{{ 'availableLabel' | translate }}: {{ formatBytes(diskUsage.available) }}</p>
        <p>{{ 'freeLabel' | translate }}: {{ diskUsage.percentage }}%</p>
      </div>
    </div>

    <!-- Services Status Section -->
    <div class="services-status" joyrideStep="servicesStatusStep" text="{{ 'servicesStatusDescription' | translate }}">
      <h3>{{ 'servicesTitle' | translate }}</h3>
      <ul>
        <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>
  </div>

  <!-- Installed OgLives Section -->
  <div class="installed-oglives" joyrideStep="oglivesStep" text="{{ 'oglivesDescription' | translate }}">
    <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 oglive of installedOglives">
          <td>{{ oglive.id }}</td>
          <td>{{ oglive.kernel }}</td>
          <td>{{ oglive.architecture }}</td>
          <td>{{ oglive.revision }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>