<header>
  <h1 mat-dialog-title>{{'GlobalStatus' | translate}}</h1>
</header>
<mat-dialog-content [ngClass]="{'loading': loading}">
  <div class="spinner-container" *ngIf="loading">
    <mat-spinner class="loading-spinner"></mat-spinner>
  </div>
  <mat-tab-group (selectedTabChange)="onTabChange($event)">
    <mat-tab label="OgBoot">
      <div *ngIf="!loading && !errorOgBoot" class="content-container">
        <app-status-tab 
          [loading]="loading"
          [diskUsage]="ogBootDiskUsage"
          [servicesStatus]="ogBootServicesStatus"
          [installedOgLives]="installedOgLives"
          [diskUsageChartData]="ogBootDiskUsageChartData"
          [view]="view"
          [colorScheme]="colorScheme"
          [isDoughnut]="isDoughnut"
          [showLabels]="showLabels"
          [isDhcp]="isDhcp"
          [isRepository]="false">
        </app-status-tab>
      </div>
      <mat-card *ngIf="!loading && errorOgBoot" class="error-card">
        <mat-card-content>
          <p>{{ 'errorLoadingData' | translate }}</p>
        </mat-card-content>
      </mat-card>
    </mat-tab>

    <mat-tab label="Dhcp">
      <div *ngIf="!loading && !errorDhcp" class="content-container">
        <app-status-tab
          [loading]="loading"
          [diskUsage]="dhcpDiskUsage"
          [servicesStatus]="dhcpServicesStatus"
          [subnets]="subnets"
          [diskUsageChartData]="dhcpDiskUsageChartData"
          [view]="view"
          [colorScheme]="colorScheme"
          [isDoughnut]="isDoughnut"
          [showLabels]="showLabels"
          [isDhcp]="isDhcp"
          [isRepository]="false">
        </app-status-tab>
      </div>
      <mat-card *ngIf="!loading && errorDhcp" class="error-card">
        <mat-card-content>
          <p>{{ 'errorLoadingData' | translate }}</p>
        </mat-card-content>
      </mat-card>
    </mat-tab>

    <mat-tab label="Repositorios">
      <mat-tab-group>
        <mat-tab *ngFor="let repository of repositories" [label]="repository.name">
          <div *ngIf="!loading && !errorRepositories[repository.uuid] && repositoryStatuses[repository.uuid]">
            <app-status-tab
              [loading]="loading"
              [diskUsage]="repositoryStatuses[repository.uuid].disk"
              [servicesStatus]="repositoryStatuses[repository.uuid].services"
              [processesStatus]="repositoryStatuses[repository.uuid].processes"
              [ramUsage]="repositoryStatuses[repository.uuid].ram"
              [cpuUsage]="repositoryStatuses[repository.uuid].cpu"
              [diskUsageChartData]="[
                { name: 'Usado', value: repositoryStatuses[repository.uuid].disk.used },
                { name: 'Disponible', value: repositoryStatuses[repository.uuid].disk.available }
              ]"
              [ramUsageChartData]="[
                { name: 'Usado', value: repositoryStatuses[repository.uuid].ram.used },
                { name: 'Disponible', value: repositoryStatuses[repository.uuid].ram.available }
              ]"
              [view]="view"
              [colorScheme]="colorScheme"
              [isDoughnut]="isDoughnut"
              [showLabels]="showLabels"
              [isDhcp]="false"
              [isRepository]="true">
            </app-status-tab>
          </div>
          <mat-card *ngIf="!loading && errorRepositories[repository.uuid]" class="error-card">
            <mat-card-content>
              <p>{{ 'errorLoadingData' | translate }}</p>
            </mat-card-content>
          </mat-card>
        </mat-tab>
      </mat-tab-group>
    </mat-tab>
  </mat-tab-group>
</mat-dialog-content>
<mat-dialog-actions class="action-container">
  <button class="ordinary-button" [mat-dialog-close]="true">{{ 'closeButton' | translate }}</button>
</mat-dialog-actions>