<section
  class="detail-cohorts"
  data-test-detail-cohorts
>
  <div class="detail-cohorts-header">
    <div class="title">
      {{#if this.isManaging}}
        <span class="specific-title">
          {{t "general.cohortsManageTitle"}}
        </span>
      {{else}}
        {{t "general.programCohorts"}} ({{@course.cohorts.length}})
      {{/if}}
    </div>
    <div class="actions">
      {{#if this.isManaging}}
        <button class="bigadd" type="button" {{on "click" (perform this.save)}}>
          <FaIcon
            @icon={{if this.save.isRunning "spinner" "check"}}
            @spin={{this.save.isRunning}}
          />
        </button>
        <button class="bigcancel" type="button" {{on "click" this.cancel}}>
          <FaIcon @icon="arrow-rotate-left" />
        </button>
      {{else if @editable}}
        <button type="button" {{on "click" (perform this.manage)}}>
          {{t "general.cohortsManageTitle"}}
        </button>
      {{/if}}
    </div>
  </div>
  <div class="detail-cohorts-content">
    {{#if this.isManaging}}
      <DetailCohortManager
        @course={{@course}}
        @selectedCohorts={{this.bufferedCohorts}}
        @add={{this.addCohortToBuffer}}
        @remove={{this.removeCohortFromBuffer}}
      />
    {{else}}
      <DetailCohortList @cohorts={{this.cohorts}} />
    {{/if}}
  </div>
</section>
