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

<div class="header-container">
  <div class="header-container-title">
    <h2>
      {{ 'runScript' | translate }}
    </h2>
  </div>
  <div class="button-row">
    <button class="action-button" [disabled]="!selectedScript" (click)="save()">Ejecutar</button>
  </div>
</div>
<mat-divider></mat-divider>

<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 ejectutará el script </mat-panel-description>
    </mat-expansion-panel-header>

    <div class="clients-grid">
      <div class="button-row">
        <button class="action-button" (click)="toggleSelectAll()">
          {{ allSelected ? 'Desmarcar' : 'Marcar' }}
        </button>
      </div>
      <div *ngFor="let client of clientData" class="client-item">
        <div class="client-card"
             (click)="client.status === 'og-live' && toggleClientSelection(client)"
             [ngClass]="{'selected-client': client.selected, 'disabled-client': client.status !== 'og-live'}"
             [matTooltip]="getPartitionsTooltip(client)"
             matTooltipPosition="above"
             matTooltipClass="custom-tooltip">

          <img
            [src]="'assets/images/computer_' + client.status + '.svg'"
            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>

<div class="select-container">
  <div class="deploy-container">
    <mat-form-field appearance="fill" class="full-width">
      <mat-label>Seleccione script a ejecutar</mat-label>
      <mat-select [(ngModel)]="selectedScript" (selectionChange)="onScriptChange()">
        <mat-option *ngFor="let script of scripts" [value]="script">{{ script.name }}</mat-option>
      </mat-select>
    </mat-form-field>
  </div>
  <div *ngIf="selectedScript" class="script-container">
    <div *ngIf="selectedScript" class="script-content">
      <h3> Script:</h3>
        <div class="script-preview" [innerHTML]="scriptContent"></div>
    </div>

    <div class="script-params" *ngIf="parameters.length > 0">
      <h3>Ingrese los valores de los parámetros:</h3>
      <div *ngFor="let param of parameters; let i = index">
        <mat-form-field appearance="fill" class="full-width">
          <mat-label>Parámetro {{ i + 1 }}</mat-label>
          <input matInput [(ngModel)]="parameters[i]" (input)="updateScript()" placeholder="Ingrese el valor">
        </mat-form-field>
      </div>
    </div>
  </div>
</div>

