<div class="learnergroup-selection-manager" data-test-learnergroup-selection-manager>
  <SelectedLearnerGroups @learnerGroups={{@learnerGroups}} @isManaging={{true}} @remove={{@remove}}/>
  <div class="available-learner-groups" data-test-available-learner-groups>
    <label data-test-heading>
      {{t "general.availableLearnerGroups"}}:
    </label>
    <SearchBox
      @search={{fn (mut this.filter)}}
      placeholder={{t "general.filterPlaceholder"}}
    />
    <div class="cohorts-container" data-test-cohorts>
      {{#each (sort-by "title" @cohorts) as |cohort|}}
        <LearnergroupSelectionCohortManager
          @cohort={{cohort}}
          @learnerGroups={{@learnerGroups}}
          @add={{@add}}
          @remove={{@remove}}
          @filter={{this.filter}}
        />
      {{/each}}
    </div>
  </div>
</div>
