<h1 mat-dialog-title class="prevent-select">{{ action }} lista de difusión</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="has-error animated fadeIn pt-64" *ngIf="!isLoading && hasError">
    <mat-icon class="red_primary_font">error</mat-icon>
    <h2>{{ errorStr }}</h2>
  </div>
  <div class="dialog_details_column animated fadeIn" *ngIf="!isLoading && !hasError" [formGroup]="formGroup">
    <mat-form-field appearance="outline" class="mt-8 w-100" *ngIf="!isNew">
      <mat-label>ID lista</mat-label>
      <input matInput formControlName="idBroadcastList">
    </mat-form-field>
    <mat-form-field appearance="outline" class="mt-8 w-100">
      <mat-label>Nombre de la lista</mat-label>
      <input matInput formControlName="broadcastListName" (input)="formGroup.controls['broadcastListName'].markAsTouched()">
      <mat-error *ngIf="formGroup.controls['broadcastListName'].hasError('required')">
        Este campo es requerido.
      </mat-error>
      <mat-error *ngIf="formGroup.controls['broadcastListName'].hasError('maxlength')">
        La longitud máxima de este campo es de 75 caracteres.
      </mat-error>
    </mat-form-field>
    <mat-form-field appearance="outline" class="mt-8 w-100">
      <mat-label>Integrantes de la lista</mat-label>
      <mat-select multiple formControlName="broadcastListUsers">
        <mat-option *ngFor="let user of users" [value]="user.IDUSUARIO">
          {{ user.NOMBRE }} {{ user.APEPAT }}<span *ngIf="user.APEMAT != null">{{ user.APEMAT }}</span> &bullet; {{ user.PERFIL }}
        </mat-option>
      </mat-select>
      <mat-error *ngIf="formGroup.controls['broadcastListUsers'].hasError('required')">
        Este campo es requerido.
      </mat-error>
      <mat-error *ngIf="formGroup.controls['broadcastListUsers'].hasError('minlength')">
        Debe seleccionar al menos 2 integrantes.
      </mat-error>
    </mat-form-field>
  </div>
</div>
<div mat-dialog-actions align="end">
  <button mat-button mat-dialog-close>Cerrar</button>
  <button mat-button [disabled]="formGroup.invalid" (click)="saveList()">Guardar</button>
</div>