<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<div class="contenedor">
  <div class="sobremontado">
    <span class="icono-instituciones material-icons">new_label</span>
    Agregar Opciones de Respuesta
    <button class="volver" (click)="onCancel()">
      <mat-icon>keyboard_arrow_left</mat-icon>
    </button>
  </div>
  <div class="contenedor-dos">
    <form [formGroup]="myForm" (ngSubmit)="onSubmit()" class="formulario">
      <div class="input-container">
        <mat-form-field class="example-full-width">
          <mat-label>Descripción:</mat-label>
          <input matInput formControlName="descripcion" required >
          <mat-error *ngIf="myForm.get('descripcion').invalid && (myForm.get('descripcion').dirty || myForm.get('descripcion').touched)">
            Por favor, ingrese la descripción.
          </mat-error>
        </mat-form-field>
      </div>
      <div class="input-container">
        <mat-form-field class="example-full-width">
          <mat-label>Puntaje:</mat-label>
          <input matInput formControlName="puntaje" required pattern="[0-9]+">
          <mat-error *ngIf="myForm.get('puntaje').invalid && (myForm.get('puntaje').dirty || myForm.get('puntaje').touched)">
            Por favor, ingrese un puntaje válido.
          </mat-error>
        </mat-form-field>
      </div>
      <button mat-raised-button color="primary" [disabled]="myForm.invalid" (click)="onSubmit()">Guardar</button>
    </form>
  </div>
</div>