<section
  class="session-objectives"
  {{did-insert (perform this.load) }}
  {{did-update (perform this.load) @session}}
  data-test-session-objectives
>
  <div class="header">
    {{#if this.showCollapsible}}
      <div>
        <button
          class="title link-button"
          type="button"
          aria-expanded="true"
          data-test-title
          {{on "click" this.collapse}}
        >
          {{t "general.objectives"}} ({{this.objectiveCount}})
          <FaIcon @icon="caret-down" />
        </button>
      </div>
    {{else}}
      <h3 class="title" data-test-title>
        {{t "general.objectives"}} ({{this.objectiveCount}})
      </h3>
    {{/if}}
    {{#if @editable}}
      <span data-test-actions>
        <ExpandCollapseButton
          @value={{this.newObjectiveEditorOn}}
          @action={{this.toggleNewObjectiveEditor}}
          @expandButtonLabel={{t "general.addNew"}}
        />
      </span>
    {{/if}}
  </div>
  <div class="content">
    {{#if this.newObjectiveEditorOn}}
      <NewObjective
        @save={{perform this.saveNewObjective}}
        @cancel={{this.toggleNewObjectiveEditor}}
      />
    {{/if}}
    <Session::ObjectiveList
      @session={{@session}}
      @editable={{@editable}}
    />
  </div>
</section>
