<div class="row justify-content-center">
  <div class="col-8">
    <form name="editForm" role="form" novalidate (ngSubmit)="save()" [formGroup]="editForm" class="ds-form">
      <h2 id="jhi-categoria-heading" data-cy="CategoriaCreateUpdateHeading" jhiTranslate="dataSurveyApp.categoria.home.createOrEditLabel">
        Create or edit a Category
      </h2>

      <div>
        <jhi-alert-error></jhi-alert-error>
        <div class="alert alert-danger" *ngIf="duplicateName" jhiTranslate="dataSurveyApp.categoria.errors.duplicateName">
          A category with that name already exists.
        </div>

        <div class="form-group" [hidden]="editForm.get('id')!.value == null">
          <label class="form-control-label" jhiTranslate="global.field.id" for="field_id">ID</label>
          <input type="number" class="form-control" name="id" id="field_id" data-cy="id" formControlName="id" [readonly]="true" />
        </div>

        <div class="form-group">
          <label class="form-control-label" jhiTranslate="dataSurveyApp.categoria.nombre" for="field_nombre">Nombre</label>
          <input type="text" class="form-control" name="nombre" id="field_nombre" data-cy="nombre" formControlName="nombre" />
          <div *ngIf="editForm.get('nombre')!.invalid && (editForm.get('nombre')!.dirty || editForm.get('nombre')!.touched)">
            <small class="form-text text-danger" *ngIf="editForm.get('nombre')?.errors?.required" jhiTranslate="entity.validation.required">
              This field is required.
            </small>
          </div>
        </div>

        <div class="form-group">
          <label class="form-control-label" jhiTranslate="dataSurveyApp.categoria.estado" for="field_estado">Estado</label>
          <select class="form-control" name="estado" formControlName="estado" id="field_estado" data-cy="estado">
            <option [ngValue]="null">{{ 'dataSurveyApp.EstadoCategoria.null' | translate }}</option>
            <option value="ACTIVE">{{ 'dataSurveyApp.EstadoCategoria.ACTIVE' | translate }}</option>
            <option value="INACTIVE">{{ 'dataSurveyApp.EstadoCategoria.INACTIVE' | translate }}</option>
          </select>
          <div *ngIf="editForm.get('estado')!.invalid && (editForm.get('estado')!.dirty || editForm.get('estado')!.touched)">
            <small class="form-text text-danger" *ngIf="editForm.get('estado')?.errors?.required" jhiTranslate="entity.validation.required">
              This field is required.
            </small>
          </div>
        </div>
      </div>

      <div>
        <button
          type="button"
          id="cancel-save"
          data-cy="entityCreateCancelButton"
          class="ds-btn ds-btn--secondary"
          (click)="previousState()"
        >
          <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;<span jhiTranslate="entity.action.cancel">Cancel</span>
        </button>

        <button
          *ngIf="this.id != 0"
          type="submit"
          id="save-entity"
          data-cy="entityCreateSaveButton"
          [disabled]="editForm.invalid || isSaving"
          class="ds-btn ds-btn--primary"
        >
          &nbsp;<span jhiTranslate="entity.action.save">Save</span>
        </button>
      </div>
    </form>
  </div>
</div>
