<div
  class="course-header"
  data-test-course-header
  {{did-insert (perform this.load)}}
  {{did-update this.revertTitleChanges}}
>
  {{#unless this.load.isRunning}}
    <span class="title" data-test-title>
      {{#if @editable}}
        <EditableField
          @value={{this.courseTitle}}
          @save={{perform this.changeTitle}}
          @close={{this.revertTitleChanges}}
          @saveOnEnter={{true}}
          @onEditingStatusChange={{set this.isEditingTitle}}
          @closeOnEscape={{true}} as |isSaving|
        >
          <input
            aria-label={{t "general.courseTitle"}}
            disabled={{isSaving}}
            type="text"
            value={{this.courseTitle}}
            {{on "input" (pick "target.value" (set this.courseTitle))}}
            {{on "keypress" (fn this.addErrorDisplayFor "courseTitle")}}
          >
          <ValidationError @errors={{get-errors-for this.courseTitle}} />
        </EditableField>
      {{else}}
        <h2>
          {{#if @course.locked}}
            <FaIcon @icon="lock" />
          {{/if}}
          {{@course.title}}
        </h2>
      {{/if}}
      {{#unless this.isEditingTitle}}
        <h3 class="academic-year" data-test-academic-year>
          {{#if this.academicYearCrossesCalendarYearBoundaries}}
            {{@course.year}} - {{add @course.year 1}}
          {{else}}
            {{@course.year}}
          {{/if}}
        </h3>
      {{/unless}}
    </span>
    <div class="course-publication">
      {{#if @editable}}
        <Course::PublicationMenu @course={{@course}} />
      {{else}}
        <PublicationStatus @item={{@course}} @showIcon={{true}} @showText={{true}} />
      {{/if}}
    </div>
  {{/unless}}
</div>
