<div class="contenedor-dos">
  <form class="formulario" [formGroup]="myForm" (ngSubmit)="onSubmit()">
    <div class="columna-unico">
      <div class="save-button">
        <button mat-raised-button class="botones" color="primary" *ngIf="!cambio" (click)="cambiar()">Agregar</button>

        <button mat-raised-button class="botones" color="primary" *ngIf="cambio"
        [disabled]="myForm.invalid">Guardar</button>

        <span class="separator"></span>
        <button mat-raised-button class="botones" color="warn" *ngIf="cambio"
       (click)="cancelado()">Cancelar</button>
      </div>


      <div class="input-container">
        <mat-form-field class="contenedor-dos">
          <mat-label>Nombres</mat-label>
          <input matInput #searchInput id="#searchInput"
          (input)="resetAutocompleteVisibility();realizarBusqueda(searchInput.value)"
            [value]="selectedUsuario ? selectedUsuario.uzytusuario_nombres + ' ' + selectedUsuario.uzytusuario_apellidos : ''"
            placeholder="Realizar búsqueda" [disabled]="!cambio" />
        </mat-form-field>

        <mat-autocomplete *ngIf="usuarios && autocompleteVisible" [displayWith]="displayFn">
          <mat-option *ngFor="let usuario of usuarios" [value]="usuario" (click)="onUsuarioSelected(usuario)">
            {{ usuario.uzytusuario_nombres }} {{ usuario.uzytusuario_apellidos }}
          </mat-option>
        </mat-autocomplete>
      </div>
      <div class="input-container">
        <mat-form-field class="contenedor-dos">
          <mat-label>Seleccionar Funcion</mat-label>
          <mat-select formControlName="funcion">
            <mat-option *ngFor="let option of tipres" [value]="option.uzytavtipres_id">
              {{ option.uzytavtipres_descrip }}
            </mat-option>
          </mat-select>
        </mat-form-field>
      </div>

      <div class="input-container">
        <mat-form-field class="contenedor-dos">
          <mat-label>Número de horas planificadas:</mat-label>
          <input matInput formControlName="numero" required pattern="[0-9]+">
          <mat-error *ngIf="myForm.get('numero').invalid && (myForm.get('numero').dirty ||
           myForm.get('numero').touched)">
            Por favor, ingrese un Número de horas planificadas.
          </mat-error>
        </mat-form-field>
      </div>


    </div>
  </form>
</div>