<h2 mat-dialog-title>{{ interService.get('busqueda_solicitudes') }}</h2>
<mat-dialog-content>
  <app-loading-card [isLoading]="isLoading" [txtLoading]="interService.get('cargando_informacion')"/>
  @if (!isLoading) {
    <form [formGroup]="formGroup" class="override_content_flex">
      <div class="col-flex-6">
        <mat-form-field appearance="outline" class="w-100">
          <mat-label>{{ interService.get('nombre_flujo_trabajo') }}</mat-label>
          <input type="text" matInput formControlName="NOMBRE_WORKFLOW" [matAutocomplete]="autoWorkflow">
          <mat-autocomplete autoActiveFirstOption #autoWorkflow="matAutocomplete">
            @for (workflow of filteredOptionsWorkflow | async; track workflow) {
              <mat-option [value]="workflow" (click)="getTaskByWorkflow(workflow)">{{ workflow }}</mat-option>
            }
          </mat-autocomplete>
          <mat-icon matSuffix>account_tree</mat-icon>
        </mat-form-field>
      </div>
      <div class="col-flex-6">
        <mat-form-field appearance="outline" class="w-100">
          <mat-label>{{ interService.get('numero_ejecucion_flujo_trabajo') }}</mat-label>
          <input matInput type="number" formControlName="NUMERO_EJECUCION_WORKFLOW">
          <mat-icon matSuffix>schema</mat-icon>
          @if (formGroup.controls['NUMERO_EJECUCION_WORKFLOW'].hasError('min')) {
            <mat-error [title]="interService.get('el_campo')+' '+interService.get('numero_ejecucion_flujo_trabajo')+' '+interService.get('no_es_valido')">
              {{ interService.get('el_campo') }} <b>{{ interService.get('numero_ejecucion_flujo_trabajo') }}</b> {{ interService.get('no_es_valido') }}
            </mat-error>
          }
        </mat-form-field>
      </div>
      <div class="col-flex-6">
        <mat-form-field appearance="outline" class="w-100">
          <mat-label>{{ interService.get('estado_ejecucion_flujo_trabajo') }}</mat-label>
          <mat-select formControlName="ESTADO_EJECUCION_WORKFLOW">
            <mat-option [value]="null">-- Ninguno --</mat-option>
            <mat-option value="En proceso">En proceso</mat-option>
            <mat-option value="Terminada">Terminada</mat-option>
            <mat-option value="Rechazada">Rechazada</mat-option>
          </mat-select>
          <mat-icon matSuffix>rule</mat-icon>
        </mat-form-field>
      </div>
      <div class="col-flex-6">
        @if (isLoadingTask) {
          <div class="mt-26">
            <mat-progress-bar mode="indeterminate"></mat-progress-bar>
          </div>
        }
        @if (!isLoadingTask) {
          <mat-form-field appearance="outline" class="w-100">
            <mat-label>{{ interService.get('nombre_tarea') }}</mat-label>
            <input type="text" matInput formControlName="NOMBRE_TAREA" [matAutocomplete]="autoTask">
            <mat-autocomplete autoActiveFirstOption #autoTask="matAutocomplete">
              @for (task of filteredOptionsTask | async; track task) {
                <mat-option [value]="task">{{ task }}</mat-option>
              }
            </mat-autocomplete>
            <mat-icon matSuffix>task_alt</mat-icon>
          </mat-form-field>
        }
      </div>
      <div class="col-flex-6">
        <mat-form-field appearance="outline" class="w-100">
          <mat-label>{{ interService.get('numero_ejecucion_tarea') }}</mat-label>
          <input matInput type="number" formControlName="NUMERO_EJECUCION_TAREA">
          <mat-icon matSuffix>format_list_numbered</mat-icon>
          @if (formGroup.controls['NUMERO_EJECUCION_TAREA'].hasError('min')) {
            <mat-error [title]="interService.get('el_campo')+' '+interService.get('numero_ejecucion_tarea')+' '+interService.get('no_es_valido')">
              {{ interService.get('el_campo') }} <b>{{ interService.get('numero_ejecucion_tarea') }}</b> {{ interService.get('no_es_valido') }}
            </mat-error>
          }
        </mat-form-field>
      </div>
      <div class="col-flex-6">
        <mat-form-field appearance="outline" class="w-100">
          <mat-label>{{ interService.get('estado_ejecucion_tarea') }}</mat-label>
          <mat-select formControlName="ESTADO_EJECUCION_TAREA">
            <mat-option [value]="null">-- Ninguno --</mat-option>
            <mat-option value="En espera">En espera</mat-option>
            <mat-option value="En proceso">En proceso</mat-option>
            <mat-option value="Aceptado">Aceptado</mat-option>
            <mat-option value="Rechazado">Rechazado</mat-option>
          </mat-select>
          <mat-icon matSuffix>rule</mat-icon>
        </mat-form-field>
      </div>
      <div class="col-flex-6">
        <mat-form-field appearance="outline" class="w-100">
          <mat-label>{{ interService.get('nombre_proceso') }}</mat-label>
          <input type="text" matInput formControlName="NOMBRE_PROCESO" [matAutocomplete]="autoProcessWorkflow">
          <mat-autocomplete autoActiveFirstOption #autoProcessWorkflow="matAutocomplete">
            @for (processWorkflow of filteredOptionsProcessWorkflow | async; track processWorkflow) {
              <mat-option [value]="processWorkflow">{{ processWorkflow }}</mat-option>
            }
          </mat-autocomplete>
          <mat-icon matSuffix>developer_board</mat-icon>
        </mat-form-field>
      </div>
      <div class="col-flex-6">
        <mat-form-field appearance="outline" class="w-100">
          <mat-label>{{ interService.get('rango_fecha') }}</mat-label>
          <mat-date-range-input [rangePicker]="picker">
            <input matStartDate formControlName="FECHA_INICIO" [placeholder]="interService.get('fecha_inicial')" readonly>
            <input matEndDate formControlName="FECHA_FINAL" [placeholder]="interService.get('fecha_final')" readonly>
          </mat-date-range-input>
          <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
          <mat-date-range-picker #picker></mat-date-range-picker>
          @if (formGroup.controls['FECHA_INICIO'].hasError('matDatepickerParse')) {
            <mat-error>{{ interService.get('fecha_inicio_no_valida') }}</mat-error>
          }
          @if (formGroup.controls['FECHA_FINAL'].hasError('matDatepickerParse')) {
            <mat-error>{{ interService.get('fecha_finalizacion_no_valida') }}</mat-error>
          }
        </mat-form-field>
      </div>
    </form>
  }
</mat-dialog-content>
<mat-dialog-actions align="end">
  <button mat-button [disabled]="isLoading || isLoadingTask" [mat-dialog-close]="false">{{ interService.get('cerrar') }}</button>
  <button mat-button [disabled]="isLoading || formGroup.invalid || isLoadingTask" (click)="search()">{{ interService.get('buscar') }}</button>
</mat-dialog-actions>