<h2 mat-dialog-title>{{ titleForm }}</h2>
<mat-dialog-content class="remove-button-padding-dialog-content">
  <app-loading-card
    [isLoading]="isLoading"
    [txtLoading]="interService.get('cargando_informacion_formulario')"
  />
  @if (!isLoading) {
  <form class="override_content_flex" [formGroup]="formGroup">
    <div class="col-flex-12">
      <mat-form-field appearance="outline" class="w-100">
        <mat-label>{{ interService.get('nombre_de_la_tarea') }}</mat-label>
        <input
          matInput
          type="text"
          formControlName="NOMBRE_TAREA"
          [placeholder]="interService.get('ingrese_nombre_tarea')"
          maxlength="50"
        />
        <mat-icon matSuffix>task_alt</mat-icon>
        @if (formGroup.controls['NOMBRE_TAREA'].hasError('required')) {
        <mat-error> {{ interService.get('el_campo') }} <b>{{ interService.get('nombre_de_la_tarea') }}</b> {{ interService.get('es_requerido') }} </mat-error>
        }
      </mat-form-field>
    </div>

    <div class="col-flex-12">
      <mat-form-field appearance="outline" class="w-100">
        <mat-label>{{ interService.get('descripcion') }}</mat-label>
        <textarea
          matInput
          formControlName="DESCRIPCION"
          maxlength="500"
          [placeholder]="interService.get('ingrese_descripcion_tarea')"
        ></textarea>
        <mat-icon matSuffix>subject</mat-icon>
        @if (formGroup.controls['DESCRIPCION'].hasError('required')) {
        <mat-error> {{ interService.get('el_campo') }} <b>{{ interService.get('descripcion') }}</b> {{ interService.get('es_requerido') }} </mat-error>
        }
      </mat-form-field>
    </div>

    <div class="col-flex-12">
      <mat-form-field appearance="outline" class="w-100">
        <mat-label>{{ interService.get('secuencia') }}</mat-label>
        <input matInput type="number" formControlName="SECUENCIA" readonly />
        <mat-icon matSuffix>format_list_numbered</mat-icon>
      </mat-form-field>
    </div>

    <div class="col-flex-12">
      <mat-checkbox formControlName="REQUIERE_VALIDACION">
        {{ interService.get('requiere_validacion') }}
      </mat-checkbox>
    </div>

    @if (formGroup.controls['REQUIERE_VALIDACION'].value) {
    <div class="col-flex-12">
      <mat-form-field appearance="outline" class="w-100">
        <mat-label>{{ interService.get('usuario_validador') }}</mat-label>
        <mat-select formControlName="USUARIO_VALIDADOR">
          @for (user of arrUsers; track user) {
          <mat-option [value]="user"
            >{{ user.NOMBRE }} {{ user.APEPAT }} {{ user.APEMAT }} ({{
              user.IDUSUARIO
            }})</mat-option
          >
          }
        </mat-select>
        <mat-icon matSuffix>person</mat-icon>
      </mat-form-field>
    </div>
    }

    <div class="col-flex-12">
      <mat-form-field appearance="outline" class="w-100">
        <mat-label>{{ interService.get('usuarios_notificar') }}</mat-label>
        <mat-select formControlName="USUARIOS_NOTIFICAR" multiple>
          @for (user of arrUsers; track user) {
          <mat-option [value]="user"
            >{{ user.NOMBRE }} {{ user.APEPAT }} {{ user.APEMAT }} ({{
              user.IDUSUARIO
            }})</mat-option
          >
          }
        </mat-select>
        <mat-icon matSuffix>notifications</mat-icon>
      </mat-form-field>
    </div>

    @if (formGroup.controls['REQUIERE_VALIDACION'].value) {
    <div class="col-flex-12">
      <mat-form-field appearance="outline" class="w-100">
        <mat-label>{{ interService.get('regla_validacion') }}</mat-label>
        <mat-select formControlName="REGLA_VALIDACION">
          <mat-option value="Esperar">{{ interService.get('esperar') }}</mat-option>
          <mat-option value="Ejecutar">{{ interService.get('ejecutar') }}</mat-option>
        </mat-select>
        <mat-icon matSuffix>gavel</mat-icon>
        @if (formGroup.controls['REGLA_VALIDACION'].hasError('required')) {
        <mat-error>
          {{ interService.get('el_campo') }} <b>{{ interService.get('regla_validacion') }}</b> {{ interService.get('es_requerido') }}
        </mat-error>
        }
      </mat-form-field>
    </div>

    @if (formGroup.controls['REGLA_VALIDACION'].value === 'Ejecutar') {
    <div class="col-flex-12">
      <mat-form-field appearance="outline" class="w-100">
        <mat-label>{{ interService.get('workflow_ejecutar') }}</mat-label>
        <mat-select formControlName="ID_WORKFLOW_EJECUTAR">
          @for (workflow of arrActiveWorkflows; track workflow) {
          <mat-option [value]="workflow.ID_WORKFLOW">{{ workflow.NOMBRE_WORKFLOW }}</mat-option>
          }
        </mat-select>
        <mat-icon matSuffix>play_arrow</mat-icon>
      </mat-form-field>
    </div>
    }
    }

    <mat-divider class="mt-20 mb-10"></mat-divider>
    <div class="col-flex-12 mb-10">
      <h4 class="m-0">{{ interService.get('funcion_relacionada_tarea') }}</h4>
    </div>

    <div class="col-flex-12">
      <mat-form-field appearance="outline" class="w-100">
        <mat-label>{{ interService.get('modulo') }}</mat-label>
        <mat-select formControlName="ID_MODULO">
          @for (module of arrModules; track module) {
          <mat-option [value]="module.ID_MODULO">{{
            module.NOMBRE_MODULO
          }}</mat-option>
          }
        </mat-select>
        <mat-icon matSuffix>folder</mat-icon>
        @if (formGroup.controls['ID_MODULO'].hasError('required')) {
        <mat-error> {{ interService.get('el_campo') }} <b>{{ interService.get('modulo') }}</b> {{ interService.get('es_requerido') }} </mat-error>
        }
      </mat-form-field>
    </div>

    <div class="col-flex-12">
      <mat-form-field appearance="outline" class="w-100">
        <mat-label>{{ interService.get('submodulo') }}</mat-label>
        <mat-select formControlName="ID_SUBMODULO">
          @for (submodule of arrSubmodules; track submodule) {
          <mat-option [value]="submodule.IDSUBMODULO">{{
            submodule.NOMBRESUBMODULO
          }}</mat-option>
          }
        </mat-select>
        <mat-icon matSuffix>folder_open</mat-icon>
        @if (formGroup.controls['ID_SUBMODULO'].hasError('required')) {
        <mat-error> {{ interService.get('el_campo') }} <b>{{ interService.get('submodulo') }}</b> {{ interService.get('es_requerido') }} </mat-error>
        }
      </mat-form-field>
    </div>

    <div class="col-flex-12">
      <mat-form-field appearance="outline" class="w-100">
        <mat-label>{{ interService.get('funcion') }}</mat-label>
        <mat-select formControlName="ID_FUNCION">
          @for (func of arrFunctions; track func) {
          <mat-option [value]="func.IDFUNCION">{{
            func.NOMBREFUNCION
          }}</mat-option>
          }
        </mat-select>
        <mat-icon matSuffix>functions</mat-icon>
        @if (formGroup.controls['ID_FUNCION'].hasError('required')) {
        <mat-error> {{ interService.get('el_campo') }} <b>{{ interService.get('funcion') }}</b> {{ interService.get('es_requerido') }} </mat-error>
        }
      </mat-form-field>
    </div>
  </form>
  }
</mat-dialog-content>
<mat-dialog-actions align="end">
  <button mat-button [mat-dialog-close]="false">{{ interService.get('cerrar') }}</button>
  <button
    mat-button
    [disabled]="formGroup.invalid || isLoading"
    (click)="save()"
  >
    {{ interService.get('guardar') }}
  </button>
</mat-dialog-actions>
