<div class="row justify-content-center">
    <div class="col-8">
        <form name="editForm" role="form" novalidate (ngSubmit)="save()" [formGroup]="editForm">
            <h2 id="jhi-user-watch-list-heading" jhiTranslate="gitsearchApp.userWatchList.home.createOrEditLabel">Create or edit a User Watch List</h2>

            <div>
                <jhi-alert-error></jhi-alert-error>
                <!-- 
                <div class="form-group" [hidden]="!editForm.get('id')!.value">
                    <label for="id" jhiTranslate="global.field.id">ID</label>
                    <input type="text" class="form-control" id="id" name="id" formControlName="id" readonly />
                </div>
                 -->
                 <div class="form-group">
                    <label class="form-control-label" jhiTranslate="gitsearchApp.userWatchList.name" for="fields">Name</label>
                    <input type="text" class="form-control" name="name" id="field_name"
                           formControlName="name"/>
                    <div *ngIf="editForm.get('name')!.invalid && (editForm.get('name')!.dirty || editForm.get('name')!.touched)">
                        <small class="form-text text-danger"
                               *ngIf="editForm.get('name')?.errors?.required" jhiTranslate="entity.validation.required">
                        This field is required.
                        </small>
                        <small class="form-text text-danger"
                               *ngIf="editForm.get('name')?.errors?.minlength" jhiTranslate="entity.validation.minlength" [translateValues]="{ min: 1 }">
                        This field is required to be at least 1 characters.
                        </small>
                    </div>
                </div>

<!-- 
                <div class="form-group">
                    <label class="form-control-label" jhiTranslate="gitsearchApp.userWatchList.userId" for="field_userId">User Id</label>
                    <select class="form-control" id="field_userId" name="userId" formControlName="userIdId">
                        <option *ngIf="!editForm.get('userIdId')!.value" [ngValue]="null" selected></option>
                        <option [ngValue]="userOption.id" *ngFor="let userOption of users; trackBy: trackById">{{ userOption.login }}</option>
                    </select>
                </div>
                <div *ngIf="editForm.get('userIdId')!.invalid && (editForm.get('userIdId')!.dirty || editForm.get('userIdId')!.touched)">
                    <small class="form-text text-danger"
                           *ngIf="editForm.get('userIdId')?.errors?.required" jhiTranslate="entity.validation.required">
                        This field is required.
                    </small>
                </div>
 -->                
            </div>

            <div>
                <button type="button" id="cancel-save" 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" [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>