<commit_before><template>

  <div>
    <div class="top-buttons pure-g">

      <div :class="windowSize.breakpoint > 2 ? 'pure-u-1-2' : 'pure-u-1-1 align-center'">
        <router-link :to="editClassLink">
          <icon-button
            :text="$tr('backToClassDetails')"
            :primary="false">
            <mat-svg category="navigation" name="arrow_back"/>
          </icon-button>
        </router-link>
      </div>

      <div :class="windowSize.breakpoint > 2 ? 'pure-u-1-2 align-right' : 'pure-u-1-1 align-center'">
        <icon-button
          :text="$tr('enrollSelectedUsers')"
          :primary="true"
          @click="openConfirmEnrollmentModal"
          :disabled="selectedUsers.length === 0">
        </icon-button>
      </div>

    </div>

    <confirm-enrollment-modal
      v-if="showConfirmEnrollmentModal"
      :className="className"
      :classId="classId"
      :selectedUsers="selectedUsers"/>

    <h1>{{ $tr('selectLearners') }} {{ className }}</h1>
    <h2 class="subheader-text">{{ $tr('showingAllUnassigned') }}</h2>

    <div class="toolbar">
      <div class="search-box" role="search">
        <mat-svg class="icon" category="action" name="search" aria-hidden="true"/>
        <input
          :aria-label="$tr('searchForUser')"
          type="search"
          v-model="filterInput"
          :placeholder="$tr('searchForUser')"
          @input="pageNum = 1">
      </div>
    </div>

    <ui-switch
      name="showSelectedUsers"
      :label="$tr('selectedUsers')"
      v-model="showSelectedUsers"
      class="switch"/>


    <p v-if="usersNotInClass.length === 0">{{ $tr('noUsersExist') }}</p>
    <p v-else-if="showSelectedUsers && filteredUsers.length === 0">{{ $tr('noUsersSelected') }}</p>
    <p v-else-if="filteredUsers.length === 0">{{ $tr('noUsersMatch') }} <strong>"{{ filterInput }}"</strong></p>

    <div v-else>
      <p class="results-text">
        {{ $tr('showing') }} <strong>{{ visibleStartRange }} - {{ visibleEndRange }}</strong>
        {{ $tr('of') }} {{$tr('numLearners', {count: numFilteredUsers}) }}
        <span v-if="filterInput">{{ $tr('thatMatch') }} <strong>"{{ filterInput }}"</strong></span>
      </p>

      <table>
        <thead>
        <tr>
          <th></th>
          <th>{{ $tr('username') }}</th>
          <th>
            <span class="visuallyhidden">{{ $tr('role') }}</span>
          </th>
          <th>{{ $tr('name') }}</th>
        </tr>
        </thead>

        <tbody>
        <tr v-for="learner in visibleFilteredUsers" :class="isSelected(learner.id) ? 'selectedrow' : ''"
            @click="toggleSelection(learner.id)">
          <td class="col-checkbox"><input type="checkbox" :id="learner.id" :value="learner.id" v-model="selectedUsers"></td>
          <th scope="col">{{ learner.username }}</th>
          <td class="col-role">
            <user-role :role="learner.kind" :omitLearner="true" />
          </td>
          <td><strong>{{ learner.full_name }}</strong></td>
        </tr>
        </tbody>
      </table>
    </div>


    <nav v-if="numPages > 1" class="pagination">
      <ui-icon-button
        type="secondary"
        color="default"
        icon="chevron_left"
        :ariaLabel="$tr('previousResults')"
        :disabled="pageNum === 1"
        size="small"
        @click="goToPage(pageNum - 1)"/>
      <icon-button
        v-for="page in numPages"
        :text="String(page)"
        :primary="false"
        :ariaLabel="`${$tr('goToPage')} ${page}`"
        :disabled="pageNum === page"
        size="small"
        @click="goToPage(page)"
        v-if="windowSize.breakpoint > 2 && pageWithinRange(page)"/>
      <ui-icon-button
        type="secondary"
        color="default"
        icon="chevron_right"
        :ariaLabel="$tr('nextResults')"
        :disabled="pageNum === numPages"
        size="small"
        @click="goToPage(pageNum + 1)"/>
    </nav>

    <hr>

    <div>
      <h2>{{ $tr('createAndEnroll') }}</h2>
      <p>{{ $tr('enrollSomeone') }}</p>

      <icon-button
        :text="$tr('createNewUser')"
        :primary="false"
        @click="openCreateUserModal">
        <mat-svg category="content" name="add"/>
      </icon-button>

      <user-create-modal
        v-if="showCreateUserModal"/>
    </div>
  </div>

</template>


<script>

  const constants = require('../../constants');
  const actions = require('../../state/actions');
  const differenceWith = require('lodash/differenceWith');
  const responsiveWindow = require('kolibri.coreVue.mixins.responsiveWindow');

  module.exports = {
    mixins: [responsiveWindow],
    $trNameSpace: 'managementClassEnroll',
    $trs: {
      backToClassDetails: 'Back to class details',
      enrollSelectedUsers: 'Review selected users',
      selectLearners: 'Choose users to enroll in',
      showingAllUnassigned: 'Showing all users not assigned to this class',
      searchForUser: 'Search for a user',
      createAndEnroll: 'Or: create & enroll a brand new user',
      enrollSomeone: `Enroll someone who isn't already a user`,
      createNewUser: 'Create a new user account',
      showing: 'Showing',
      of: 'of',
      numLearners: '{count, number, integer} {count, plural, one {User} other {Users}}',
      name: 'Name',
      username: 'Username',
      role: 'Role',
      selectedUsers: 'Only show selected users',
      noUsersExist: 'No users exist',
      noUsersSelected: 'No users are selected',
      noUsersMatch: 'No users match',
      thatMatch: 'that match',
      previousResults: 'Previous results',
      goToPage: 'Go to page',
      nextResults: 'Next results',
    },
    components: {
      'icon-button': require('kolibri.coreVue.components.iconButton'),
      'ui-checkbox': require('keen-ui/src/UiCheckbox'),
      'ui-icon-button': require('keen-ui/src/UiIconButton'),
      'textbox': require('kolibri.coreVue.components.textbox'),
      'user-create-modal': require('../user-page/user-create-modal'),
      'confirm-enrollment-modal': require('./confirm-enrollment-modal'),
      'ui-switch': require('keen-ui/src/UiSwitch'),
      'user-role': require('../user-role'),<commit_msg>rename ‘enroll’ button - fixes #1289<commit_after><template>

  <div>
    <div class="top-buttons pure-g">

      <div :class="windowSize.breakpoint > 2 ? 'pure-u-1-2' : 'pure-u-1-1 align-center'">
        <router-link :to="editClassLink">
          <icon-button
            :text="$tr('backToClassDetails')"
            :primary="false">
            <mat-svg category="navigation" name="arrow_back"/>
          </icon-button>
        </router-link>
      </div>

      <div :class="windowSize.breakpoint > 2 ? 'pure-u-1-2 align-right' : 'pure-u-1-1 align-center'">
        <icon-button
          :text="$tr('enrollSelectedUsers')"
          :primary="true"
          @click="openConfirmEnrollmentModal"
          :disabled="selectedUsers.length === 0">
        </icon-button>
      </div>

    </div>

    <confirm-enrollment-modal
      v-if="showConfirmEnrollmentModal"
      :className="className"
      :classId="classId"
      :selectedUsers="selectedUsers"/>

    <h1>{{ $tr('selectLearners') }} {{ className }}</h1>
    <h2 class="subheader-text">{{ $tr('showingAllUnassigned') }}</h2>

    <div class="toolbar">
      <div class="search-box" role="search">
        <mat-svg class="icon" category="action" name="search" aria-hidden="true"/>
        <input
          :aria-label="$tr('searchForUser')"
          type="search"
          v-model="filterInput"
          :placeholder="$tr('searchForUser')"
          @input="pageNum = 1">
      </div>
    </div>

    <ui-switch
      name="showSelectedUsers"
      :label="$tr('selectedUsers')"
      v-model="showSelectedUsers"
      class="switch"/>


    <p v-if="usersNotInClass.length === 0">{{ $tr('noUsersExist') }}</p>
    <p v-else-if="showSelectedUsers && filteredUsers.length === 0">{{ $tr('noUsersSelected') }}</p>
    <p v-else-if="filteredUsers.length === 0">{{ $tr('noUsersMatch') }} <strong>"{{ filterInput }}"</strong></p>

    <div v-else>
      <p class="results-text">
        {{ $tr('showing') }} <strong>{{ visibleStartRange }} - {{ visibleEndRange }}</strong>
        {{ $tr('of') }} {{$tr('numLearners', {count: numFilteredUsers}) }}
        <span v-if="filterInput">{{ $tr('thatMatch') }} <strong>"{{ filterInput }}"</strong></span>
      </p>

      <table>
        <thead>
        <tr>
          <th></th>
          <th>{{ $tr('username') }}</th>
          <th>
            <span class="visuallyhidden">{{ $tr('role') }}</span>
          </th>
          <th>{{ $tr('name') }}</th>
        </tr>
        </thead>

        <tbody>
        <tr v-for="learner in visibleFilteredUsers" :class="isSelected(learner.id) ? 'selectedrow' : ''"
            @click="toggleSelection(learner.id)">
          <td class="col-checkbox"><input type="checkbox" :id="learner.id" :value="learner.id" v-model="selectedUsers"></td>
          <th scope="col">{{ learner.username }}</th>
          <td class="col-role">
            <user-role :role="learner.kind" :omitLearner="true" />
          </td>
          <td><strong>{{ learner.full_name }}</strong></td>
        </tr>
        </tbody>
      </table>
    </div>


    <nav v-if="numPages > 1" class="pagination">
      <ui-icon-button
        type="secondary"
        color="default"
        icon="chevron_left"
        :ariaLabel="$tr('previousResults')"
        :disabled="pageNum === 1"
        size="small"
        @click="goToPage(pageNum - 1)"/>
      <icon-button
        v-for="page in numPages"
        :text="String(page)"
        :primary="false"
        :ariaLabel="`${$tr('goToPage')} ${page}`"
        :disabled="pageNum === page"
        size="small"
        @click="goToPage(page)"
        v-if="windowSize.breakpoint > 2 && pageWithinRange(page)"/>
      <ui-icon-button
        type="secondary"
        color="default"
        icon="chevron_right"
        :ariaLabel="$tr('nextResults')"
        :disabled="pageNum === numPages"
        size="small"
        @click="goToPage(pageNum + 1)"/>
    </nav>

    <hr>

    <div>
      <h2>{{ $tr('createAndEnroll') }}</h2>
      <p>{{ $tr('enrollSomeone') }}</p>

      <icon-button
        :text="$tr('createNewUser')"
        :primary="false"
        @click="openCreateUserModal">
        <mat-svg category="content" name="add"/>
      </icon-button>

      <user-create-modal
        v-if="showCreateUserModal"/>
    </div>
  </div>

</template>


<script>

  const constants = require('../../constants');
  const actions = require('../../state/actions');
  const differenceWith = require('lodash/differenceWith');
  const responsiveWindow = require('kolibri.coreVue.mixins.responsiveWindow');

  module.exports = {
    mixins: [responsiveWindow],
    $trNameSpace: 'managementClassEnroll',
    $trs: {
      backToClassDetails: 'Back to class details',
      enrollSelectedUsers: 'Enroll selected users',
      selectLearners: 'Choose users to enroll in',
      showingAllUnassigned: 'Showing all users not assigned to this class',
      searchForUser: 'Search for a user',
      createAndEnroll: 'Or: create & enroll a brand new user',
      enrollSomeone: `Enroll someone who isn't already a user`,
      createNewUser: 'Create a new user account',
      showing: 'Showing',
      of: 'of',
      numLearners: '{count, number, integer} {count, plural, one {User} other {Users}}',
      name: 'Name',
      username: 'Username',
      role: 'Role',
      selectedUsers: 'Only show selected users',
      noUsersExist: 'No users exist',
      noUsersSelected: 'No users are selected',
      noUsersMatch: 'No users match',
      thatMatch: 'that match',
      previousResults: 'Previous results',
      goToPage: 'Go to page',
      nextResults: 'Next results',
    },
    components: {
      'icon-button': require('kolibri.coreVue.components.iconButton'),
      'ui-checkbox': require('keen-ui/src/UiCheckbox'),
      'ui-icon-button': require('keen-ui/src/UiIconButton'),
      'textbox': require('kolibri.coreVue.components.textbox'),
      'user-create-modal': require('../user-page/user-create-modal'),
      'confirm-enrollment-modal': require('./confirm-enrollment-modal'),
      'ui-switch': require('keen-ui/src/UiSwitch'),
      'user-role': require('../user-role'),
{'fraction_non_alphanumeric': 0.18709834865370537, 'fraction_numerical': 0.004555438054177174, 'mean_word_length': 2.623342175066313, 'pattern_counts': {'":': 0, '<': 195, '<?xml version=': 0, '>': 203, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5218805', 'n_tokens_mistral': 3979, 'n_tokens_neox': 3854, 'n_words': 725}