<div class="items-container animated fadeIn">
  <div class="row-tools-bar no-padding">
    <button mat-raised-button class="raised-button-background mb-8" (click)="goBack(1)">
      Configuración de plantillas de correo electrónico<mat-icon>arrow_back</mat-icon>
    </button>
  </div>
  <mat-card class="override-elevation-z8" style="width: 100%; max-height: calc(100vh - 188px); box-sizing: border-box;">
    <mat-card-title style="text-align: center;" class="prevent-select">Registrar plantilla</mat-card-title>
    <mat-card-content class="mat-card-content-fill animated fadeIn fast" *ngIf="isLoading || hasError">
      <div class="loader-container prevent-select" *ngIf="isLoading">
        <mat-spinner></mat-spinner>
        <h2 class="loader-label">Cargando...</h2>
      </div>
      <div class="error-container prevent-select" *ngIf="!isLoading && hasError" style="margin-top: 32px;">
        <mat-icon style="color: #e53935; transform: scale(5); margin-bottom: 48px;">error</mat-icon>
        <h1 style="color: #e53935;">¡Error!</h1>
        <p style="font-style: italic; font-size: 16px; overflow-wrap: anywhere; text-align: center;">{{ errorStr }}</p>
      </div>
    </mat-card-content>
    <mat-card-content class="mat-card-content-fill prevent-select pt-8 animated fadeIn" *ngIf="!isLoading && !hasError">
      <div class="form-container">
        <mat-form-field class="form-input" appearance="outline">
          <mat-label>Módulo</mat-label>
          <mat-select #module (valueChange)="changeSubOptions(module.value)" [formControl]="templateModule" [errorStateMatcher]="errorMatcher">
            <mat-option *ngFor="let item of menuModules" [value]="item.ID_MODULO" [disabled]="item.SUBMODULES.length == 0 && item.MENUS.length == 0">
              {{ item.NOMBRE_MODULO }}
            </mat-option>
          </mat-select>
          <mat-error *ngIf="templateModule.hasError('required')">
            Este campo es <strong>requerido</strong>.
          </mat-error>
        </mat-form-field>
        <mat-form-field class="form-input" appearance="outline">
          <mat-label>{{ getSubSelectLabel() }}</mat-label>
          <mat-select *ngIf="hasBoth" #second1 (valueChange)="changeSec(second1.value)" 
          [formControl]="templateSubmodule" [errorStateMatcher]="errorMatcher">
            <mat-optgroup label="Submódulos">
              <mat-option *ngFor="let sub of menuSubmodules" [value]="sub.IDSUBMODULO + '##sub'">
                {{ sub.NOMBRESUBMODULO }}
              </mat-option>
            </mat-optgroup>
            <mat-optgroup label="Funciones">
              <mat-option *ngFor="let fun of menuFunctions" [value]="fun.IDFUNCION + '##fun'">
                {{ fun.NOMBREFUNCION }}
              </mat-option>
            </mat-optgroup>
          </mat-select>
          <mat-select *ngIf="onlySubmenu" #second2 (valueChange)="changeSec(second2.value)" 
          [formControl]="templateSubmodule" [errorStateMatcher]="errorMatcher">
            <mat-option *ngFor="let sub of menuSubmodules" [value]="sub.IDSUBMODULO + '##sub'">
              {{ sub.NOMBRESUBMODULO }}
            </mat-option>
          </mat-select>
          <mat-select *ngIf="onlyFunction" #second3 (valueChange)="changeSec(second3.value)" 
          [formControl]="templateSubmodule" [errorStateMatcher]="errorMatcher">
            <mat-option *ngFor="let fun of menuFunctions" [value]="fun.IDFUNCION + '##fun'">
              {{ fun.NOMBREFUNCION }}
            </mat-option>
          </mat-select>
          <mat-error *ngIf="templateSubmodule.hasError('required')">
            Este campo es <strong>requerido</strong>.
          </mat-error>
        </mat-form-field>
        <mat-form-field class="form-input" appearance="outline">
          <mat-label>{{ hasFour ? 'Función' : 'Pantalla' }}</mat-label>
          <mat-select *ngIf="hasFour" #third1 (valueChange)="changeThird(third1.value)" 
          [formControl]="templateFunction" [errorStateMatcher]="errorMatcher">
            <mat-option *ngFor="let func of menuFunctionsAux" [value]="func.IDFUNCION">
              {{ func.NOMBREFUNCION }}
            </mat-option>
          </mat-select>
          <mat-select *ngIf="!hasFour" #third2 (valueChange)="changeThird(third2.value)" 
          [formControl]="templateFunction" [errorStateMatcher]="errorMatcher">
            <mat-option *ngFor="let pant of menuScreensAux" [value]="pant.IDPANTALLA">
              {{ pant.NOMBREPANTALLA }}
            </mat-option>
          </mat-select>
          <mat-error *ngIf="templateFunction.hasError('required')">
            Este campo es <strong>requerido</strong>.
          </mat-error>
        </mat-form-field>
        <mat-form-field class="form-input" appearance="outline" *ngIf="hasFour">
          <mat-label>Pantalla</mat-label>
          <mat-select [formControl]="templateScreen" [errorStateMatcher]="errorMatcher">
            <mat-option *ngFor="let scr of menuScreens" [value]="scr.IDPANTALLA">
              {{ scr.NOMBREPANTALLA }}
            </mat-option>
          </mat-select>
        </mat-form-field>
        <mat-form-field class="form-input" appearance="outline">
          <mat-label>Asunto</mat-label>
          <input type="text" matInput maxlength="50" #asunto [formControl]="templateMatter" [errorStateMatcher]="errorMatcher">
          <mat-hint align="end">{{asunto.value.length}} / 50</mat-hint>
          <mat-error *ngIf="templateMatter.hasError('required')">
            El título del aviso es <strong>requerido</strong>.
          </mat-error>
          <mat-error *ngIf="templateMatter.hasError('minlength')">
            El título del aviso debe tener al menos <strong>8 caracteres</strong>.
          </mat-error>
          <mat-error *ngIf="templateMatter.hasError('maxlength')">
            El título del aviso debe tener máximo <strong>100 caracteres</strong>.
          </mat-error>
        </mat-form-field>
        <div class="mat-quill-container">
          <div class="mat-quill-outline-box" [ngClass]="{ mat_quill_outline_box_error: templateBody.hasError('required') && templateBody.touched }">
            <quill-editor class="w-100" [formControl]="templateBody" placeholder="Ingrese el cuerpo de la plantilla *"
            (onNativeBlur)="templateBody.markAsTouched()"></quill-editor>
          </div>
          <div class="mat-quill-outline-error-area animated fadeIn fast">
            <mat-error *ngIf="templateBody.hasError('required') && templateBody.touched">
              El contenido del aviso es <strong>requerido</strong>.
            </mat-error>
          </div>
        </div>
      </div>
    </mat-card-content>
    <mat-card-actions align="end" *ngIf="!isLoading && !hasError" class="animated fadeIn">
      <button mat-button (click)="saveTemplate()" *ngIf="isNew">Registrar plantilla</button>
      <button mat-button (click)="updateTemplate()" *ngIf="!isNew">Guardar cambios</button>
    </mat-card-actions>
  </mat-card>
</div>
