<h2 mat-dialog-title>{{ interService.get('busqueda_notificaciones') }}</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-12">
        <mat-form-field appearance="outline" class="w-100">
          <mat-label>{{ interService.get('numero_notificacion') }}</mat-label>
          <input matInput type="number" formControlName="NUMERO_NOTIFICACION">
          <mat-icon matSuffix>notifications</mat-icon>
          @if (formGroup.controls['NUMERO_NOTIFICACION'].hasError('min')) {
            <mat-error [title]="interService.get('el_campo')+' '+interService.get('numero_notificacion')+' '+interService.get('no_es_valido')">
              {{ interService.get('el_campo') }} <b>{{ interService.get('numero_notificacion') }}</b> {{ interService.get('no_es_valido') }}
            </mat-error>
          }
        </mat-form-field>
      </div>
      <div class="col-flex-12">
        <mat-form-field appearance="outline" class="w-100">
          <mat-label>{{ interService.get('usuario_notificado') }}</mat-label>
          <input type="text" matInput formControlName="USUARIO_NOTIFICADO" [matAutocomplete]="autoProcessWorkflow">
          <mat-autocomplete autoActiveFirstOption #autoProcessWorkflow="matAutocomplete">
            @for (user of filteredOptionsUser | async; track user) {
              <mat-option [value]="user">{{ user }}</mat-option>
            }
          </mat-autocomplete>
          <mat-icon matSuffix>campaign</mat-icon>
        </mat-form-field>
      </div>
      <div class="col-flex-12">
        <mat-form-field appearance="outline" class="w-100">
          <mat-label>{{ interService.get('tipo_notificacion') }}</mat-label>
          <mat-select formControlName="TIPO_NOTIFICACION">
            <mat-option value="V">De validación</mat-option>
            <mat-option value="N">De notificación</mat-option>
          </mat-select>
          <mat-icon matSuffix>circle_notifications</mat-icon>
        </mat-form-field>
      </div>
      <div class="col-flex-12">
        <mat-form-field appearance="outline" class="w-100">
          <mat-label>{{ interService.get('estado_notifiación') }}</mat-label>
          <mat-select formControlName="ESTADO_NOTIFICACION">
            <mat-option value="Notificado">Notificado</mat-option>
            <mat-option value="En espera">En espera</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-12">
        <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 [mat-dialog-close]="false">{{ interService.get('cerrar') }}</button>
  <button mat-button [disabled]="isLoading || formGroup.invalid" (click)="search()">{{ interService.get('buscar') }}</button>
</mat-dialog-actions>