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

<div class="client-container">
  <div class="header-container">
    <h2 class="title">{{ 'clientDetailsTitle' | translate }} {{ clientData.name }}</h2>
    <div class="client-button-row">
      <button class="back-button" (click)="navigateToGroups()">
        <mat-icon>arrow_back</mat-icon>
        {{ 'back' | translate }}
      </button>
    </div>
  </div>

  <mat-divider></mat-divider>

  <div *ngIf="!loading" class="client-info">
    <div class="info-section">
      <div class="two-column-table">
        <div class="table-row" *ngFor="let clientData of generalData">
          <div class="column property">{{ clientData?.property }}</div>
          <div class="column value">{{ clientData?.value }}</div>
        </div>
      </div>
      <div class="two-column-table">
        <div class="table-row" *ngFor="let clientData of networkData">
          <div class="column property">{{ clientData?.property }}</div>
          <div class="column value">{{ clientData?.value }}</div>
        </div>
      </div>
    </div>
  </div>
  <div class="header-container">
    <h2 class="title" i18n="@@adminImagesTitle">Discos/Particiones</h2>
  </div>

  <div class="disk-container">
    <!-- Tabla de particiones -->
    <div class="table-container">
      <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
        <ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
          <th mat-header-cell *matHeaderCellDef> {{ column.header }} </th>
          <td mat-cell *matCellDef="let image">
            <ng-container *ngIf="column.columnDef !== 'size'">
              {{ column.cell(image) }}
            </ng-container>
            <ng-container *ngIf="column.columnDef === 'size'">
              <mat-chip color="primary">
                {{ (image.size / 1024).toFixed(2) }} GB
              </mat-chip>
            </ng-container>
          </td>
        </ng-container>
        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
      </table>
    </div>

    <!-- Gráfico circular -->
    <div class="charts-container">
      <ng-container *ngIf="diskUsageData && diskUsageData.length > 0">
        <div *ngFor="let disk of chartDisk" class="disk-usage">
          <ngx-charts-pie-chart class="chart" [view]="view" [results]="disk.chartData" [doughnut]="true">
          </ngx-charts-pie-chart>

          <h3>Disco {{ disk.diskNumber }}</h3>
          <p>Usado: {{ (disk.used).toFixed(2) }} GB ({{ disk.percentage }}%)</p>
          <p>Total: {{ disk.total }} GB</p>
        </div>
      </ng-container>
    </div>
  </div>
</div>

