<div
  class="course-objective-list"
  data-test-course-objective-list
  {{did-insert (perform this.load)}}
  {{did-update (perform this.load) @course}}
>
  {{#if this.isSorting}}
    <ObjectiveSortManager
      @subject={{@course}}
      @close={{set this.isSorting false}}
    />
  {{/if}}

  {{#if (and this.courseObjectiveCount (not this.isSorting))}}
    {{#if (and @editable (gt this.courseObjectiveCount 1))}}
      <button
        class="sort-button"
        type="button"
        {{on "click" (set this.isSorting true)}}
        data-test-sort
      >
        {{t "general.sortObjectives"}}
      </button>
    {{/if}}
    <div class="grid-row headers" data-test-headers>
      <span class="grid-item" data-test-header>{{t "general.description"}}</span>
      <span class="grid-item" data-test-header>{{t "general.parentObjectives"}}</span>
      <span class="grid-item" data-test-header>{{t "general.vocabularyTerms"}}</span>
      <span class="grid-item" data-test-header>{{t "general.meshTerms"}}</span>
      <span class="actions grid-item" data-test-header>{{t "general.actions"}}</span>
    </div>
    {{#if (and (is-array this.courseObjectives) (is-array this.cohortObjectives))}}
      {{#each this.courseObjectives as |courseObjective|}}
        <Course::ObjectiveListItem
          @courseObjective={{courseObjective}}
          @editable={{@editable}}
          @cohortObjectives={{this.cohortObjectives}}
          @course={{@course}}
        />
      {{/each}}
    {{else}}
      <Course::ObjectiveListLoading @count={{this.courseObjectiveCount}} />
    {{/if}}
  {{/if}}
</div>
