@if (workPackage && relatedWorkPackage) {
  <div
    class="relation-row relation-row-{{ relatedWorkPackage.id }}"
    opFocusWithin=".relation-row--grid-actions button"
    >
    <div
      class="relation-row--grid"
      >
      <div>
        @if (!userInputs.showRelationTypesForm) {
          <button
            type="button"
            class="relation-row--type"
            data-test-selector="op-relation--row-type"
            (click)="activateRelationTypeEdit()"
            >
            @if (groupByWorkPackageType) {
              <span
                [textContent]="normalizedRelationType"
              ></span>
            }
            @if (!groupByWorkPackageType) {
              <span
                [ngClass]="highlightingClassForWpType()"
                [textContent]="relatedWorkPackage.type.name"
              ></span>
            }
            <span class="sr-only" [textContent]="text.updateRelation"></span>
          </button>
        }
        @if (userInputs.showRelationTypesForm) {
          <div
            class="inline-edit--container inplace-edit"
            >
            <select
              class="inline-edit--field form--select"
              [(ngModel)]="selectedRelationType"
              (change)="saveRelationType()"
              role="listbox"
              opAutofocus
              (keydown.escape)="cancelRelationTypeEditOnEscape($event)"
              >
              @for (relationType of availableRelationTypes; track relationType) {
                <option
                  [textContent]="relationType.label"
                  [ngValue]="relationType"
                ></option>
              }
            </select>
          </div>
        }
      </div>
      <a
        class="relation-row--grid-id"
        data-test-selector="op-relation--row-id"
        uiSref="work-packages.show.tabs"
        [uiParams]="{ workPackageId: relatedWorkPackage.id, tabIdentifier: 'relations' }"
      >{{relatedWorkPackage.formattedId}}</a>
      <a
        class="relation-row--grid-subject"
        data-test-selector="op-relation--row-subject"
        uiSref="work-packages.show.tabs"
        [uiParams]="{ workPackageId: relatedWorkPackage.id, tabIdentifier: 'relations' }"
        [textContent]="relatedWorkPackage.subject"
        [attr.aria-label]="normalizedRelationType + ' ' + relatedWorkPackage.subjectWithId(0)"
      ></a>
      @if (relatedWorkPackage) {
        <edit-form [resource]="relatedWorkPackage">
          <op-editable-attribute-field [resource]="relatedWorkPackage" fieldName="status" />
        </edit-form>
      }
      <div
        class="relation-row--grid-actions"
        >
        <button
          type="button"
          class="spot-link wp-relations--description-btn"
          [ngClass]="{'-visible': showDescriptionInfo }"
          [title]="text.description_label"
          (click)="userInputs.showRelationInfo = !userInputs.showRelationInfo"
          >
          <op-icon icon-classes="icon-info1 icon-no-color -padded wp-relations--icon wp-relations--description-icon"
            [icon-title]="text.toggleDescription"
           />
        </button>
        @if (!!relation.delete) {
          <button
            type="button"
            class="spot-link relation-row--remove-btn"
            [ngClass]="{'-visible': showDescriptionInfo }"
            [title]="text.removeButton"
            (click)="removeRelation()"
            >
            <op-icon icon-classes="icon-remove icon-no-color -padded wp-relations--icon"
              [icon-title]="text.removeButton"
             />
          </button>
        }
      </div>
    </div>
    @if (userInputs.showRelationInfo) {
      <div
        class="grid-block hierarchy-item description-container"
        >
        @if (!userInputs.showDescriptionEditForm) {
          <button
            type="button"
            class="wp-relation--description-read-value"
            [class.-placeholder]="!relation.description"
            (click)="startDescriptionEdit()"
            [textContent]="relation.description || text.placeholder.description"
          ></button>
        }
        @if (userInputs.showDescriptionEditForm) {
          <div
            class="wp-relation--description-wrapper textarea-wrapper"
            >
            <textarea
              #relationDescriptionTextarea

              class="wp-relation--description-textarea"
              name="description"
              (keyup)="handleDescriptionKey($event)"
              [(ngModel)]="userInputs.newRelationText"
            ></textarea>
            <edit-field-controls [fieldController]="fieldController"
              (onSave)="saveDescription()"
              (onCancel)="cancelDescriptionEdit()"
              [saveTitle]="text.save"
              [cancelTitle]="text.cancel"
             />
          </div>
        }
      </div>
    }
  </div>
}