<mat-tab-group dynamicHeight>
  <mat-tab label="Estado servidor">
    <app-loading [isLoading]="loading"></app-loading>

    <div class="server-status">
      <h2>OgRepository Server Status</h2>

      <div class="row bottom-row">
        <div class="card">
          <h3>Uso de CPU</h3>
          <div class="cpu-usage-bar">
            <div class="cpu-bar" [style.width]="cpuUsage.percentage" [ngClass]="{'high': cpuUsage.percentage > '80%'}">
            </div>
          </div>
          <p>Usado: {{ cpuUsage.percentage }}</p>
        </div>

        <div class="card">
          <h3>Servicios</h3>
          <ul>
            <li *ngFor="let service of getServices()">
              <span class="status-led" [ngClass]="{
              'active': service.status === 'active',
              'inactive': service.status === 'stopped' || service.status === 'status not accesible'
            }"></span>
              {{ service.name }}:
              <span [ngSwitch]="service.status">
                <span *ngSwitchCase="'active'">Activo</span>
                <span *ngSwitchCase="'stopped'">Detenido</span>
                <span *ngSwitchCase="'status not accesible'">No accesible</span>
                <span *ngSwitchDefault>{{ service.status }}</span>
              </span>
            </li>
          </ul>
        </div>

        <div class="card">
          <h3>Procesos</h3>
          <ul>
            <li *ngFor="let process of getProcesses()">
              <span class="status-led" [ngClass]="{
              'active': process.status === 'running',
              'inactive': process.status === 'stopped'
            }"></span>
              {{ process.name }}: {{ process.status }}
            </li>
          </ul>
        </div>
      </div>

      <div class="row top-row">
        <div class="card">
          <h3>Uso de Disco</h3>

          <div class="info">
            <ngx-charts-pie-chart [scheme]="colorScheme" [results]="diskUsageChartData"
                                  [gradient]="gradient" [doughnut]="isDoughnut" [labels]="showLabels">
            </ngx-charts-pie-chart>
            <p>Total: {{ diskUsage.total }}</p>
            <p>Ocupado: {{ diskUsage.used }}</p>
            <p>Disponible: {{ diskUsage.available }}</p>
            <p>Ocupado (%): {{ diskUsage.percentage }}</p>
          </div>
        </div>

        <div class="card">
          <h3>Uso de RAM</h3>

          <div class="info">
            <ngx-charts-pie-chart [scheme]="colorScheme" [results]="ramUsageChartData" [gradient]="gradient"
                                  [doughnut]="isDoughnut" [labels]="showLabels">
            </ngx-charts-pie-chart>
            <p>Total: {{ ramUsage.total }}</p>
            <p>Ocupado: {{ ramUsage.used }}</p>
            <p>Disponible: {{ ramUsage.available }}</p>
            <p>Ocupado (%): {{ ramUsage.percentage }}</p>
          </div>
        </div>
      </div>
    </div>
  </mat-tab>

  <mat-tab label="Datos generales">
    <div class="general-data">
      <div class="header-container">
        <div class="header-container-title">
          <h2>Editar datos repositorio</h2>
        </div>
        <div class="header-button-container">
          <button class="action-button" (click)="syncRepository()">Sincronizar base de datos</button>
          <button class="action-button" (click)="openImageInfoDialog()">Ver Información</button>
        </div>
      </div>

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

      <div *ngIf="!loading" class="client-info form-container">
        <form [formGroup]="repositoryForm" (ngSubmit)="save()" class="repository-form">

          <mat-form-field appearance="fill" class="form-field">
            <mat-label>Nombre del repositorio</mat-label>
            <input matInput formControlName="name" required>
          </mat-form-field>

          <mat-form-field appearance="fill" class="form-field">
            <mat-label>Ip</mat-label>
            <input matInput formControlName="ip" name="description">
          </mat-form-field>

          <mat-form-field appearance="fill" class="form-field">
            <mat-label>Comentarios</mat-label>
            <input matInput formControlName="comments" name="comments">
          </mat-form-field>

          <button class="submit-button" (click)="save()">Guardar</button>
        </form>
      </div>
    </div>
  </mat-tab>

  <mat-tab label="Listado de imágenes">
    <app-repository-images [repositoryUuid]="repositoryId"></app-repository-images>
  </mat-tab>
</mat-tab-group>
