<div
  id="objective-{{@courseObjective.id}}"
  class="grid-row objective-row {{if this.showRemoveConfirmation "confirm-removal"}} {{if this.highlightSave.isRunning "highlight-ok"}} {{if this.isManaging "is-managing"}}"
  data-test-course-objective-list-item
  {{did-insert this.load @courseObjective}}
  {{did-update this.load @courseObjective}}
>
  <div class="description grid-item" data-test-description>
    {{#if (and @editable (not this.isManaging) (not this.showRemoveConfirmation))}}
      <EditableField
        @value={{@courseObjective.title}}
        @renderHtml={{true}}
        @isSaveDisabled={{has-error-for this "title"}}
        @save={{perform this.saveTitleChanges}}
        @close={{this.revertTitleChanges}}
      >
        <HtmlEditor @content={{@courseObjective.title}} @update={{this.changeTitle}} @autofocus={{true}} />
        <ValidationError @errors={{get-errors-for this.title}} />
      </EditableField>
    {{else}}
      {{! template-lint-disable no-triple-curlies }}
      {{{@courseObjective.title}}}
    {{/if}}
  </div>
  <Course::ObjectiveListItemParents
    @parents={{this.parents}}
    @editable={{and @editable (not this.isManaging) (not this.showRemoveConfirmation)}}
    @manage={{perform this.manageParents}}
    @isManaging={{this.isManagingParents}}
    @save={{perform this.saveParents}}
    @isSaving={{this.saveParents.isRunning}}
    @cancel={{this.cancel}}
  />

  <ObjectiveListItemTerms
      @subject={{@courseObjective}}
      @editable={{and @editable (not this.isManaging) (not this.showRemoveConfirmation)}}
      @manage={{perform this.manageTerms}}
      @isManaging={{this.isManagingTerms}}
      @save={{perform this.saveTerms}}
      @isSaving={{this.saveTerms.isRunning}}
      @cancel={{this.cancel}}
  />

  <Course::ObjectiveListItemDescriptors
    @meshDescriptors={{this.meshDescriptors}}
    @editable={{and @editable (not this.isManaging) (not this.showRemoveConfirmation)}}
    @manage={{perform this.manageDescriptors}}
    @isManaging={{this.isManagingDescriptors}}
    @save={{perform this.saveDescriptors}}
    @isSaving={{this.saveDescriptors.isRunning}}
    @cancel={{this.cancel}}
  />

  <div class="actions grid-item" data-test-actions>
    {{#if (and @editable (not this.isManaging) (not this.showRemoveConfirmation) (not this.showRemoveConfirmation))}}
      <button
        class="link-button"
        type="button"
        aria-label={{t "general.remove"}}
        {{on "click" (set this.showRemoveConfirmation true)}}
        data-test-remove
      >
        <FaIcon @icon="trash" class="enabled remove" />
      </button>
    {{else}}
      <FaIcon @icon="trash" class="disabled" />
    {{/if}}
  </div>

  {{#if this.showRemoveConfirmation}}
    <div class="confirm-message" data-test-confirm-removal>
      {{t "general.confirmObjectiveRemoval"}}
      <button
        class="remove"
        type="button"
        data-test-confirm
        {{on "click" (perform this.deleteObjective)}}
      >
        {{#if this.deleteObjective.isRunning}}
          <FaIcon @icon="spinner" @spin={{true}} />
        {{else}}
          {{t "general.yes"}}
        {{/if}}
      </button>
      <button
        class="done"
        type="button"
        data-test-cancel
        {{on "click" (set this.showRemoveConfirmation false)}}
      >
        {{t "general.cancel"}}
      </button>
    </div>
  {{/if}}

  {{#if this.isManagingParents}}
    <Course::ManageObjectiveParents
      @cohortObjectives={{@cohortObjectives}}
      @selected={{this.parentsBuffer}}
      @add={{this.addParentToBuffer}}
      @remove={{this.removeParentFromBuffer}}
      @removeFromCohort={{this.removeParentsWithCohortFromBuffer}}
    />
  {{/if}}
  {{#if this.isManagingDescriptors}}
    <Course::ManageObjectiveDescriptors
      @selected={{this.descriptorsBuffer}}
      @add={{this.addDescriptorToBuffer}}
      @remove={{this.removeDescriptorFromBuffer}}
      @editable={{@editable}}
      @save={{perform this.saveDescriptors}}
      @cancel={{this.cancel}}
    />
  {{/if}}
  {{#if this.isManagingTerms}}
    <TaxonomyManager
      @vocabularies={{@course.assignableVocabularies}}
      @vocabulary={{this.selectedVocabulary}}
      @selectedTerms={{this.termsBuffer}}
      @add={{this.addTermToBuffer}}
      @remove={{this.removeTermFromBuffer}}
      @editable={{@editable}}
      @save={{perform this.saveTerms}}
      @cancel={{this.cancel}}
    />
  {{/if}}
</div>
