<h1 mat-dialog-title class="prevent-select">{{ title }}</h1>
<div mat-dialog-content class="prevent-select">
  <div class="content-container animated fadeIn">
    <div class="is-loading animated fadeIn fast" *ngIf="isLoading">
      <mat-spinner align="center"></mat-spinner>
      <h3>Cargando datos ...</h3>
    </div>
    <div class="has-error animated fadeIn" *ngIf="!isLoading && hasError">
      <mat-icon class="red_primary_font">error</mat-icon>
      <h2>{{ errorStr }}</h2>
    </div>
    <div class="execution-info-container animated fadeIn" *ngIf="!isLoading && !hasError" [formGroup]="formGroup">
      <mat-form-field appearance="outline" class="w-100 mt-8">
        <mat-label>Nombre del equipo</mat-label>
        <input formControlName="name" matInput placeholder="Ingrese el nombre del equipo de trabajo" 
        (input)="formGroup.controls['name'].markAsTouched()">
        @if (formGroup.controls['name'].hasError('maxlength')) {
          <mat-error>La longitud máxima del campo <b>Nombre del Equipo</b> es de 75 caracteres</mat-error>
        }
        @if (formGroup.controls['name'].hasError('required')) {
          <mat-error>El campo <b>Nombre del Equipo</b> es obligatorio</mat-error>
        }
      </mat-form-field>
      <mat-form-field appearance="outline" class="w-100 mt-8">
        <mat-label>Especialidades y/u oficios</mat-label>
        <mat-select formControlName="speciality" multiple>
          <mat-option *ngFor="let specialty of specialties" [value]="specialty.CODIGO_ESPECIALIDAD">
            {{ specialty.NOMBRE_ESPECIALIDAD }}
          </mat-option>
        </mat-select>
        @if (formGroup.controls['speciality'].hasError('required')) {
          <mat-error>El campo <b>Especialidad</b> es obligatorio</mat-error>
        }
      </mat-form-field>
      <div *ngIf="action == 'DET'" class="w-100">
        <h3 style="font-weight: 500;">Miembros del equipo:</h3>
        <ul>
          <li *ngIf="members.length == 0">Sin integrantes</li>
          <li *ngFor="let member of members;">{{ member.NAME }}</li>
        </ul>
      </div>
    </div>
  </div>
</div>
<div mat-dialog-actions align="end">
  <button mat-button mat-dialog-close>Cerrar</button>
  <button *ngIf="action != 'DET'" mat-button (click)="alert(action)" [disabled]="formGroup.invalid">
    {{ action == "REG" ? "Registrar" : "Guardar" }}
  </button>
</div>
