<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 OgDhcp.">
      OgDhcp server Status
    </h2>
  </div>
</div>
<div class="dashboard">
  <div class="disk-usage-container">
    <div class="disk-usage" joyrideStep="diskUsageStep" text="Visualiza el uso del disco del servidor.">
      <h3>Uso de disco</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>Total: {{ diskUsage.total }}</p>
        <p>Ocupado: {{ diskUsage.used }}</p>
        <p>Disponible: {{ diskUsage.available }}</p>
        <p>Libre: {{ diskUsage.percentage }}</p>
      </div>
    </div>

    <div class="services-status" joyrideStep="servicesStatusStep"
      text="Aquí puedes ver el estado de los servicios importantes del servidor.">
      <h3>Servicios</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 }}
        </li>
      </ul>
    </div>
  </div>

  <div class="installed-oglives" joyrideStep="subnetsStep"
    text="Consulta la información de las subredes configuradas en el servidor.">
    <h3>Subredes</h3>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Boot file name</th>
          <th>Next server</th>
          <th>Ip</th>
          <th>Ordenadores</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let subnet of subnets">
          <td>{{ subnet.id }}</td>
          <td>{{ subnet['boot-file-name'] }}</td>
          <td>{{ subnet['next-server'] }}</td>
          <td>{{ subnet.subnet }}</td>
          <td>{{ subnet.reservations.length }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>