<h1 mat-dialog-title class="prevent-select">Generar token</h1>
<div mat-dialog-content class="prevent-select">
  <div class="is-loading animated fadeIn fast" *ngIf="isLoading">
    <mat-spinner align="center"></mat-spinner>
    <h3>Cargando datos ...</h3>
  </div>
  <div class="is-loading animated fadeIn fast" *ngIf="!isLoading && hasError">
    <mat-icon class="red_primary_font mb-40" style="transform: scale(5);">error</mat-icon>
    <h3 style="font-weight: bold; font-style: italic;">{{ errorStr }}</h3>
  </div>
  <div class="w-100 animated fadeIn pt-8 " *ngIf="!isLoading && !hasError">
    <mat-form-field appearance="outline" class="w-100">
      <mat-label>Nombre del SCADA</mat-label>
      <mat-select [(ngModel)]="idSCADA" required>
        <mat-option *ngFor="let scada of scadaList" [value]="scada.IDSCADA">
          {{ scada.NOMBRESCADA }}
        </mat-option>
      </mat-select>
    </mat-form-field>
    <mat-form-field appearance="outline" class="w-100">
      <mat-label>Descripción del token</mat-label>
      <textarea matInput [(ngModel)]="tokenDescription" required></textarea>
    </mat-form-field>
  </div>
</div>
<mat-dialog-actions align="end">
  <button mat-button cdKFocusInitial mat-dialog-close>Cancelar</button>
  <button mat-button (click)="generateToken()" [disabled]="idSCADA == '' || tokenDescription == ''">Generar</button>
</mat-dialog-actions>