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

      <div>
        <jhi-alert-error></jhi-alert-error>

        <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.plantilla.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?.minlength"
              jhiTranslate="entity.validation.minlength"
              [translateValues]="{ min: 1 }"
            >
              This field is required to be at least 1 characters.
            </small>
            <small
              class="form-text text-danger"
              *ngIf="editForm.get('nombre')?.errors?.maxlength"
              jhiTranslate="entity.validation.maxlength"
              [translateValues]="{ max: 50 }"
            >
              This field cannot be longer than 50 characters.
            </small>
          </div>
        </div>

        <div class="form-group">
          <label class="form-control-label" jhiTranslate="dataSurveyApp.plantilla.descripcion" for="field_descripcion">Descripcion</label>
          <input
            type="text"
            class="form-control"
            name="descripcion"
            id="field_descripcion"
            data-cy="descripcion"
            formControlName="descripcion"
          />
        </div>

        <div class="form-group">
          <label class="form-control-label" jhiTranslate="dataSurveyApp.plantilla.fechaCreacion" for="field_fechaCreacion"
            >Fecha Creacion</label
          >
          <div class="d-flex">
            <input
              id="field_fechaCreacion"
              data-cy="fechaCreacion"
              type="datetime-local"
              class="form-control"
              name="fechaCreacion"
              formControlName="fechaCreacion"
              placeholder="YYYY-MM-DD HH:mm"
            />
          </div>
          <div
            *ngIf="
              editForm.get('fechaCreacion')!.invalid && (editForm.get('fechaCreacion')!.dirty || editForm.get('fechaCreacion')!.touched)
            "
          >
            <small
              class="form-text text-danger"
              *ngIf="editForm.get('fechaCreacion')?.errors?.required"
              jhiTranslate="entity.validation.required"
            >
              This field is required.
            </small>
            <small
              class="form-text text-danger"
              [hidden]="!editForm.get('fechaCreacion')?.errors?.ZonedDateTimelocal"
              jhiTranslate="entity.validation.ZonedDateTimelocal"
            >
              This field should be a date and time.
            </small>
          </div>
        </div>

        <div class="form-group">
          <label class="form-control-label" jhiTranslate="dataSurveyApp.plantilla.fechaPublicacionTienda" for="field_fechaPublicacionTienda"
            >Fecha Publicacion Tienda</label
          >
          <div class="d-flex">
            <input
              id="field_fechaPublicacionTienda"
              data-cy="fechaPublicacionTienda"
              type="datetime-local"
              class="form-control"
              name="fechaPublicacionTienda"
              formControlName="fechaPublicacionTienda"
              placeholder="YYYY-MM-DD HH:mm"
            />
          </div>
        </div>

        <div class="form-group">
          <label class="form-control-label" jhiTranslate="dataSurveyApp.plantilla.estado" for="field_estado">Estado</label>
          <select class="form-control" name="estado" formControlName="estado" id="field_estado" data-cy="estado">
            <option [ngValue]="null">{{ 'dataSurveyApp.EstadoPlantilla.null' | translate }}</option>
            <option value="DRAFT">{{ 'dataSurveyApp.EstadoPlantilla.DRAFT' | translate }}</option>
            <option value="ACTIVE">{{ 'dataSurveyApp.EstadoPlantilla.ACTIVE' | translate }}</option>
            <option value="DELETED">{{ 'dataSurveyApp.EstadoPlantilla.DELETED' | translate }}</option>
            <option value="DISABLED">{{ 'dataSurveyApp.EstadoPlantilla.DISABLED' | 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 class="form-group">
          <label class="form-control-label" jhiTranslate="dataSurveyApp.plantilla.precio" for="field_precio">Precio</label>
          <input type="number" class="form-control" name="precio" id="field_precio" data-cy="precio" formControlName="precio" />
          <div *ngIf="editForm.get('precio')!.invalid && (editForm.get('precio')!.dirty || editForm.get('precio')!.touched)">
            <small class="form-text text-danger" *ngIf="editForm.get('precio')?.errors?.required" jhiTranslate="entity.validation.required">
              This field is required.
            </small>
            <small class="form-text text-danger" [hidden]="!editForm.get('precio')?.errors?.number" jhiTranslate="entity.validation.number">
              This field should be a number.
            </small>
          </div>
        </div>

        <div class="form-group">
          <label class="form-control-label" jhiTranslate="dataSurveyApp.plantilla.categoria" for="field_categoria">Categoria</label>
          <select class="form-control" id="field_categoria" data-cy="categoria" name="categoria" formControlName="categoria">
            <option [ngValue]="null"></option>
            <option
              [ngValue]="categoriaOption.id === editForm.get('categoria')!.value?.id ? editForm.get('categoria')!.value : categoriaOption"
              *ngFor="let categoriaOption of categoriasSharedCollection; trackBy: trackCategoriaById"
            >
              {{ categoriaOption.nombre }}
            </option>
          </select>
        </div>
      </div>

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

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