@if (alignedGoal ? !!parentFormGroup.value.assignAsObjective : true) {
<!-- Each field reports itself through `helperTextChange` on hover and on keyboard focus, so a dialog can show
     its help in a column of its own. Hover and focus go to separate handlers because the component resolves
     them together: with both bound to one setter, leaving a field with the pointer cleared the help the
     keyboard was still on, and vice versa. With `enableHelperText` this component draws that help itself,
     beside the field. `goal-level-field` marks the three fields for dialogs that lay them out on their own
     grid. -->
<div [formGroup]="parentFormGroup">
	<div class="goal-level-field" [class.row]="enableHelperText">
		<div
			[class.col-md-7]="enableHelperText"
			(mouseenter)="hoverHelper('objective-level')"
			(mouseleave)="hoverHelper('')"
			(focusin)="focusHelper('objective-level')"
			(focusout)="focusHelper('')"
		>
			<label for="objective-level" class="label mt-3">
				{{ 'GOALS_PAGE.FORM.LABELS.LEVEL' | translate }}
			</label>
			<nb-select
				id="objective-level"
				formControlName="level"
				[placeholder]="'GOALS_PAGE.FORM.PLACEHOLDERS.LEVEL' | translate"
				(selectedChange)="onLevelChange($event)"
				fullWidth
			>
				@for (level of goalLevelEnum | keyvalue; track level) {
				<nb-option [hidden]="isLevelHidden(level.value)" [value]="level.value">
					{{ 'GOALS_PAGE.LEVELS.' + level.key | translate }}
				</nb-option>
				}
			</nb-select>
		</div>
		@if (enableHelperText) {
		<div class="col-md-5 position-relative helper-text">
			@if (helperText == 'objective-level') {
			<div class="mt-3 position-absolute">
				<p>
					{{ 'GOALS_PAGE.HELPER_TEXT.OBJECTIVE_LEVEL' | translate }}
				</p>
			</div>
			}
		</div>
		}
	</div>
	<!-- The Owner label and whichever control the level calls for, in one field: the team and organization
	     selects used to sit in rows of their own under a label-only row. -->
	@if (alignedGoal ? !!parentFormGroup.value.level : true) {
	<div class="goal-level-field" [class.row]="enableHelperText">
		<div
			[class.col-md-7]="enableHelperText"
			(mouseenter)="hoverHelper('objective-owner')"
			(mouseleave)="hoverHelper('')"
			(focusin)="focusHelper('objective-owner')"
			(focusout)="focusHelper('')"
		>
			<label for="objective-owner" class="label mt-3">
				{{ 'KEY_RESULT_PAGE.FORM.LABELS.OWNER' | translate }}
			</label>
			@if (parentFormGroup.value.level === goalLevelEnum.EMPLOYEE) {
			<ga-employee-multi-select
				[multiple]="false"
				[allEmployees]="employees"
				[selectedEmployeeIds]="parentFormGroup.value.owner"
				[label]="false"
				(selectedChange)="selectEmployee($event, 'owner')"
				id="key-result-owner"
				placeholder="{{ 'GOALS_PAGE.FORM.LABELS.OWNER' | translate }}"
				class="header-selector employee-selector"
			></ga-employee-multi-select>
			} @else if (parentFormGroup.value.level === goalLevelEnum.TEAM) {
			<nb-select
				formControlName="ownerId"
				fullWidth
				placeholder="{{ 'GOALS_PAGE.FORM.LABELS.OWNER' | translate }}"
			>
				@for (team of teams; track team) {
				<nb-option [value]="team.id">
					{{ team.name }}
				</nb-option>
				}
			</nb-select>
			} @else if (parentFormGroup.value.level === goalLevelEnum.ORGANIZATION) {
			<nb-select
				fullWidth
				formControlName="ownerId"
				placeholder="{{ 'GOALS_PAGE.FORM.LABELS.OWNER' | translate }}"
				[(selected)]="orgId"
				(selectedChange)="selectEmployee($event, 'owner')"
			>
				<nb-option [(value)]="orgId">
					{{ orgName }}
				</nb-option>
			</nb-select>
			}
		</div>
		@if (enableHelperText) {
		<div class="col-md-5 position-relative helper-text">
			@if (helperText == 'objective-owner') {
			<div class="mt-3 position-absolute">
				<p>
					{{ 'GOALS_PAGE.HELPER_TEXT.OBJECTIVE_OWNER' | translate }}
				</p>
			</div>
			}
		</div>
		}
	</div>
	}
	@if (!alignedGoal) {
	<div class="goal-level-field" [class.row]="enableHelperText">
		<div
			[class.col-md-7]="enableHelperText"
			(mouseenter)="hoverHelper('objective-lead')"
			(mouseleave)="hoverHelper('')"
			(focusin)="focusHelper('objective-lead')"
			(focusout)="focusHelper('')"
		>
			<label for="objective-lead" class="label mt-3">
				{{ 'GOALS_PAGE.FORM.LABELS.LEAD_OPTIONAL' | translate }}
			</label>
			<ga-employee-multi-select
				[multiple]="false"
				[allEmployees]="employees"
				[selectedEmployeeIds]="parentFormGroup.value.leadId"
				[label]="false"
				(selectedChange)="selectEmployee($event, 'lead')"
				id="objective-lead"
				placeholder="{{ 'GOALS_PAGE.FORM.LABELS.LEAD_OPTIONAL' | translate }}"
				class="header-selector employee-selector"
			></ga-employee-multi-select>
		</div>
		@if (enableHelperText) {
		<div class="col-md-5 position-relative helper-text">
			@if (helperText == 'objective-lead') {
			<div class="mt-3 position-absolute">
				<p>
					{{ 'GOALS_PAGE.HELPER_TEXT.OBJECTIVE_LEAD' | translate }}
				</p>
			</div>
			}
		</div>
		}
	</div>
	}
</div>
}