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

<div class="header-container">
  <div class="header-container-title">
    <h2 joyrideStep="groupsTitleStepText" text="{{ 'groupsTitleStepText' | translate }}">
      Asistente de particionado
    </h2>
  </div>
  <div class="subnets-button-row">
    <button class="action-button" [disabled]="data.status === 'busy'" (click)="save()">Ejecutar</button>
  </div>
</div>

<div class="select-container">
  <mat-expansion-panel hideToggle>
    <mat-expansion-panel-header>
      <mat-panel-title> Clientes </mat-panel-title>
      <mat-panel-description> Listado de clientes donde se realizará el particionado </mat-panel-description>
    </mat-expansion-panel-header>

    <div class="clients-grid">
      <div *ngFor="let client of clientData" class="client-item">
        <div class="client-card">
          <img [src]="'assets/images/ordenador_' + client.status + '.png'" alt="Client Icon" class="client-image" />

          <div class="client-details">
            <span class="client-name">{{ client.name }}</span>
            <span class="client-ip">{{ client.ip }}</span>
            <span class="client-ip">{{ client.mac }}</span>
          </div>
        </div>
      </div>
    </div>
  </mat-expansion-panel>
</div>

<mat-divider style="margin-top: 20px;"></mat-divider>

<mat-dialog-content>
  <div class="disk-select">
    <mat-form-field appearance="fill">
      <mat-label>Seleccionar disco</mat-label>
      <mat-select [(ngModel)]="selectedDiskNumber">
        <mat-option *ngFor="let disk of disks" [value]="disk.diskNumber">
          Disco {{ disk.diskNumber }} ({{ (disk.totalDiskSize / 1024).toFixed(2) }} GB)
        </mat-option>
      </mat-select>
    </mat-form-field>
  </div>

  <div class="partition-assistant" *ngIf="selectedDisk">
    <div class="partition-bar">
      <div *ngFor="let partition of activePartitions(selectedDisk.diskNumber)"
        [ngStyle]="{'width': partition.percentage + '%', 'background-color': partition.color}"
        class="partition-segment">
        {{ partition.partitionCode }} ({{ (partition.size / 1024).toFixed(2) }} GB)
      </div>
    </div>
    <div class="row">
      <button class="action-button" (click)="addPartition(selectedDisk.diskNumber)">Añadir partición</button>
    </div>

    <div class="row">
      <div class="form-container">
        <table class="partition-table">
          <thead>
            <tr>
              <th>Partición</th>
              <th>Tipo partición</th>
              <th>S. ficheros</th>
              <th>Tamaño (MB)</th>
              <th>Tamaño (%)</th>
              <th>Formatear</th>
              <th>Eliminar</th>
            </tr>
          </thead>
          <tbody>
            <ng-container *ngFor="let partition of selectedDisk.partitions; let j = index">
              <tr *ngIf="!partition.removed">
                <td>{{ partition.partitionNumber }}</td>
                <td>
                  <select [(ngModel)]="partition.partitionCode" required>
                    <option *ngFor="let type of partitionTypes" [value]="type.name">
                      {{ type.name }}
                    </option>
                  </select>
                </td>
                <td>
                  <select [(ngModel)]="partition.filesystem" required>
                    <option *ngFor="let type of filesystemTypes" [value]="type.name">
                      {{ type.name }}
                    </option>
                  </select>
                </td>
                <td>
                  <input type="number" [(ngModel)]="partition.size" required
                    (input)="updatePartitionSize(selectedDisk.diskNumber, j, partition.size)" />
                </td>
                <td>
                  <input type="number" [(ngModel)]="partition.percentage"
                    (input)="updatePartitionSizeFromPercentage(selectedDisk.diskNumber, j, partition.percentage)" />
                </td>
                <td>
                  <input type="checkbox" [(ngModel)]="partition.format" />
                </td>
                <td>
                  <button (click)="removePartition(selectedDisk.diskNumber, partition)" class="remove-btn">X</button>
                </td>
              </tr>
            </ng-container>
          </tbody>
        </table>
      </div>

      <div class="chart-container">
        <ngx-charts-pie-chart [view]="view" [results]="selectedDisk.chartData" [doughnut]="true">
        </ngx-charts-pie-chart>
      </div>
    </div>
  </div>
</mat-dialog-content>

<div *ngIf="errorMessage" class="error-message">{{ errorMessage }}</div>