<section
    class="detail-learners-and-learner-groups"
    data-test-detail-learners-and-learner-groups
>
  <div class="detail-learners-and-learner-groups-header">
    <div class="title" data-test-title>
      {{#if this.isManaging}}
        <span class="detail-specific-title">
          {{t "general.manageLearners"}}
        </span>
      {{else}}
        {{t "general.learnersAndLearnerGroups"}}
        ({{this.learnerCount}}/{{this.learnerGroupCount}})
      {{/if}}
    </div>
    <div class="actions">
      {{#if this.isManaging}}
        <button class="bigadd" type="button" {{on "click" (perform this.save)}} data-test-save>
          <FaIcon @icon="check" />
        </button>
        <button class="bigcancel" type="button" {{on "click" this.cancel}} data-test-cancel>
          <FaIcon @icon="arrow-rotate-left" />
        </button>
      {{else if @editable}}
        <button type="button" {{on "click" (perform this.manage)}} data-test-manage>
          {{t "general.manageLearners"}}
        </button>
      {{/if}}
    </div>
  </div>
  <div class="detail-learners-and-learner-groups-content">
    {{#if this.isManaging}}
      <LearnergroupSelectionManager
        @learnerGroups={{this.learnerGroupBuffer}}
        @cohorts={{this.cohorts}}
        @add={{this.addLearnerGroupToBuffer}}
        @remove={{this.removeLearnerGroupFromBuffer}}
      />
      <LearnerSelectionManager
        @learners={{this.learnerBuffer}}
        @add={{this.addLearnerToBuffer}}
        @remove={{this.removeLearnerFromBuffer}}
      />
    {{else}}
      {{#if this.learnerGroupCount}}
        <SelectedLearnerGroups @learnerGroups={{this.ilmLearnerGroups}} @isManaging={{false}} class="display-selected-learner-groups" />
      {{/if}}
      {{#if this.learnerCount}}
        <SelectedLearners @learners={{this.ilmLearners}} @isManaging={{false}} class="display-selected-learners" />
      {{/if}}
    {{/if}}
  </div>
</section>
