<h1 mat-dialog-title class="prevent-select">{{ isNew ? 'Registrar' : 'Editar' }} subfamilia</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">
    <div class="form-column">
      <div class="form-row">
        <div class="form-cell C12">
          <mat-form-field appearance="outline" class="w-100 pt-8">
            <mat-label>Código de la familia</mat-label>
            <input matInput [formControl]="familyCodeControl">
            <mat-error *ngIf="familyCodeControl.hasError('required')">Este campo es requerido.</mat-error>
          </mat-form-field>
        </div>
        <div class="form-cell C12">
          <mat-form-field appearance="outline" class="w-100 pt-8">
            <mat-label>Código de la subfamilia</mat-label>
            <input matInput [formControl]="subfamilyCodeControl" (input)="verifySubfamilyCode(subfamilyCode.value)" #subfamilyCode>
            <mat-error *ngIf="subfamilyCodeControl.hasError('required')">Este campo es requerido.</mat-error>
            <mat-error *ngIf="subfamilyCodeControl.hasError('maxlength')">La longitud máxima de este campo es de 5 caracteres.</mat-error>
          </mat-form-field>
        </div>
        <div class="form-cell C12">
          <mat-form-field appearance="outline" class="w-100 pt-8">
            <mat-label>Nombre de la subfamilia</mat-label>
            <input matInput [formControl]="subfamilyNameControl" (input)="subfamilyNameControl.markAsTouched()">
            <mat-error *ngIf="subfamilyNameControl.hasError('required')">Este campo es requerido.</mat-error>
            <mat-error *ngIf="subfamilyNameControl.hasError('maxlength')">La longitud máxima de este campo es de 60 caracteres.</mat-error>
          </mat-form-field>
        </div>
        <div class="form-cell C05">
          <mat-slide-toggle [(ngModel)]="useCustomIcon" class="mb-20">Icono personalizado</mat-slide-toggle>
        </div>
        <div class="form-cell C07 animated fadeIn" *ngIf="!useCustomIcon">
          <mat-form-field appearance="outline" class="w-100 pt-4">
            <mat-label>Icono de la subfamilia</mat-label>
            <mat-select [formControl]="subfamilyIconControl">
              <mat-optgroup *ngFor="let category of iconsCategories" [label]="category">
                <mat-option *ngFor="let icon of materialIcons.get(category)" [value]="icon">
                  <mat-icon>{{ icon }}</mat-icon> {{ icon }}
                </mat-option>
              </mat-optgroup>
            </mat-select>
            <mat-error *ngIf="subfamilyIconControl.hasError('required')">Este campo es requerido.</mat-error>
          </mat-form-field>
        </div>
        <div class="form-cell C07 animated fadeIn" *ngIf="useCustomIcon">
          <button mat-stroked-button class="w-100 mb-20 animated fadeIn" [color]="uploadedFile == null ? 'primary' : 'warn'" (click)="openFileUploader()" 
          *ngIf="!isUploading">
            {{ uploadedFile == null ? 'Adjuntar SVG' : 'Eliminar SVG'}}
          </button>
          <mat-progress-bar mode="indeterminate" *ngIf="isUploading" class="w-100 animated fadeIn mb-20"></mat-progress-bar>
          <input type="file" name="file" id="file" #file class="hidden" (change)="checkFile($event)" accept=".svg">
        </div>
        <div class="form-cell C12 center_horizontal center_vertical" style="flex-wrap: wrap;">
          <p class="m-0 w-100" style="text-align: center;">Vista previa</p>
          <mat-icon *ngIf="!useCustomIcon" style="width: 48px; height: 48px; font-size: 48px;" class="mt-8 mb-8">
            {{ subfamilyIconControl.value }}
          </mat-icon>
          <mat-icon
            *ngIf="useCustomIcon && uploadedFile != null"
            [svgIcon]="customIconStr"
            class="mt-8 mb-8"
            style="width: 48px; height: 48px; font-size: 48px;"
          ></mat-icon>
          <p class="m-0 w-100" style="font-weight: 500; text-align: center;">
            {{ subfamilyNameControl.value }}
            <span *ngIf="subfamilyCode.value != ''"> ({{ subfamilyCode.value }})</span>
          </p>
        </div>
      </div>
    </div>
  </div>
</div>
<div mat-dialog-actions align="end">
  <button mat-button mat-dialog-close>Cerrar</button>
  <button mat-button [disabled]="familyCodeControl.invalid || subfamilyCodeControl.invalid || subfamilyNameControl.invalid" 
  (click)="saveSubfamily()">Guardar</button>
</div>