<commit_before><template>

  <div class="user-roster">

    <!-- Modals -->
    <class-rename-modal
      v-if="showEditNameModal"
      :classname="currClass.name"
      :classid="currClass.id"
      :classes="classes"
    />

    <div id="name-edit-box" @click="openEditNameModal">
      <div id="edit-name" class="name-edit">{{currClass.name}}</div>
      <mat-svg id="edit-icon" class="name-edit" category="image" name="edit" aria-hidden="true"/>
    </div>

    <div class="header">
      <h2 class="table-title">
        {{$tr('tableTitle')}}
      </h2>
    </div>

    <div class="toolbar">
      <div class="searchbar" role="search">
        <mat-svg class="icon" category="action" name="search" aria-hidden="true"/>
        <input
          id="search-field"
          :aria-label="$tr('searchText')"
          type="search"
          v-model="searchFilter"
          :placeholder="$tr('searchText')">
      </div>

      <div class="enroll">
        <router-link :to="classEnrollLink" class="table-name">
          <icon-button
            class="enroll-user-button"
            :text="$tr('enrollUsers')"
            :primary="true"/>
        </router-link>
      </div>

    </div>

    <!-- Modals -->
    <user-remove-modal
      v-if="showRemoveUserModal"
      :classname="currClass.name"
      :classid="currClass.id"
      :username="currentUserRemove.username"
      :userid="currentUserRemove.id"
    />

    <table class="roster">

      <caption class="visuallyhidden">{{$tr('users')}}</caption>

      <!-- Table Headers -->
      <thead v-if="usersMatchFilter">
        <tr>
          <th class="col-header table-username" scope="col"> {{$tr('username')}} </th>
          <th class="col-header" scope="col">
            <span class="visuallyhidden">{{ $tr('role') }}</span>
          </th>
          <th class="col-header" scope="col"> {{$tr('fullName')}} </th>
          <th class="col-header" scope="col"></th>
        </tr>
      </thead>

      <!-- Table body -->
      <tbody v-if="usersMatchFilter">
        <tr v-for="user in visibleUsers">
          <!-- Username field -->
          <th class="table-cell table-username" scope="col">
            {{user.username}}
          </th>

          <!-- Logic for role tags -->
          <td class="table-cell table-role">
            <user-role :role="user.kind" :omitLearner="true" />
            <!--
            <role-switcher
              class="user-role-switcher"
              :currentRole="user.kind"
              @click-add-coach="addCoachRoleToUser(user)"
              @click-remove-coach="removeCoachRoleFromUser(user)"
            />
            -->
          </td>

          <!-- Full Name field -->
          <td scope="row" class="table-cell full-name">
            <span class="table-name">
              {{user.full_name}}
            </span>
          </td>

          <!-- Edit field -->
          <td class="table-cell">
            <div class="remove-user-btn" @click="openRemoveUserModal(user)">
              {{$tr('remove')}}
            </div>
          </td>

        </tr>
      </tbody>

    </table>

    <p class="empty-list" v-if="noUsersExist">{{ $tr('noUsersExist') }}</p>
    <p class="empty-list" v-if="allUsersFilteredOut">{{ $tr('allUsersFilteredOut') }}</p>

  </div>

</template>


<script>

  const constants = require('../../constants');
  const UserKinds = require('kolibri.coreVue.vuex.constants').UserKinds;
  const actions = require('../../state/actions');
  const orderBy = require('lodash/orderBy');


  module.exports = {
    $trNameSpace: 'classEnrollPage',
    $trs: {
      enrollUsers: 'Enroll users',
      tableTitle: 'Manage Learners and Coaches in this class',
      searchText: 'Find a learner or coach...',
      users: 'Users',
      // table info
      fullName: '<NAME>',
      username: 'Username',
      role: 'Role',
      learner: 'Learner',
      coach: 'Coach',
      remove: 'Remove',
      // search-related error messages
      noUsersExist: 'No users in this class',
      allUsersFilteredOut: 'No matching users',
    },
    components: {
      'class-rename-modal': require('./class-rename-modal'),
      'role-switcher': require('./role-switcher'),
      'user-remove-modal': require('./user-remove-modal'),
      'icon-button': require('kolibri.coreVue.components.iconButton'),
      'user-role': require('../user-role'),
    },
    data: () => ({
      searchFilter: '',
      currentUserRemove: null,
    }),
    computed: {
      LEARNER: () => UserKinds.LEARNER,
      COACH: () => UserKinds.COACH,
      classEnrollLink() {<commit_msg>Make class management only about learners.<commit_after><template>

  <div class="user-roster">

    <!-- Modals -->
    <class-rename-modal
      v-if="showEditNameModal"
      :classname="currClass.name"
      :classid="currClass.id"
      :classes="classes"
    />

    <div id="name-edit-box" @click="openEditNameModal">
      <div id="edit-name" class="name-edit">{{currClass.name}}</div>
      <mat-svg id="edit-icon" class="name-edit" category="image" name="edit" aria-hidden="true"/>
    </div>

    <div class="header">
      <h2 class="table-title">
        {{$tr('tableTitle')}}
      </h2>
    </div>

    <div class="toolbar">
      <div class="searchbar" role="search">
        <mat-svg class="icon" category="action" name="search" aria-hidden="true"/>
        <input
          id="search-field"
          :aria-label="$tr('searchText')"
          type="search"
          v-model="searchFilter"
          :placeholder="$tr('searchText')">
      </div>

      <div class="enroll">
        <router-link :to="classEnrollLink" class="table-name">
          <icon-button
            class="enroll-user-button"
            :text="$tr('enrollUsers')"
            :primary="true"/>
        </router-link>
      </div>

    </div>

    <!-- Modals -->
    <user-remove-modal
      v-if="showRemoveUserModal"
      :classname="currClass.name"
      :classid="currClass.id"
      :username="currentUserRemove.username"
      :userid="currentUserRemove.id"
    />

    <table class="roster">

      <caption class="visuallyhidden">{{$tr('users')}}</caption>

      <!-- Table Headers -->
      <thead v-if="usersMatchFilter">
        <tr>
          <th class="col-header table-username" scope="col"> {{$tr('username')}} </th>
          <th class="col-header" scope="col">
            <span class="visuallyhidden">{{ $tr('role') }}</span>
          </th>
          <th class="col-header" scope="col"> {{$tr('fullName')}} </th>
          <th class="col-header" scope="col"></th>
        </tr>
      </thead>

      <!-- Table body -->
      <tbody v-if="usersMatchFilter">
        <tr v-for="user in visibleUsers">
          <!-- Username field -->
          <th class="table-cell table-username" scope="col">
            {{user.username}}
          </th>

          <!-- Logic for role tags -->
          <td class="table-cell table-role">
            <!-- <user-role :role="user.kind" :omitLearner="true" /> -->
            <!--
            <role-switcher
              class="user-role-switcher"
              :currentRole="user.kind"
              @click-add-coach="addCoachRoleToUser(user)"
              @click-remove-coach="removeCoachRoleFromUser(user)"
            />
            -->
          </td>

          <!-- Full Name field -->
          <td scope="row" class="table-cell full-name">
            <span class="table-name">
              {{user.full_name}}
            </span>
          </td>

          <!-- Edit field -->
          <td class="table-cell">
            <div class="remove-user-btn" @click="openRemoveUserModal(user)">
              {{$tr('remove')}}
            </div>
          </td>

        </tr>
      </tbody>

    </table>

    <p class="empty-list" v-if="noUsersExist">{{ $tr('noUsersExist') }}</p>
    <p class="empty-list" v-if="allUsersFilteredOut">{{ $tr('allUsersFilteredOut') }}</p>

  </div>

</template>


<script>

  const constants = require('../../constants');
  const UserKinds = require('kolibri.coreVue.vuex.constants').UserKinds;
  const actions = require('../../state/actions');
  const orderBy = require('lodash/orderBy');


  module.exports = {
    $trNameSpace: 'classEnrollPage',
    $trs: {
      enrollUsers: 'Enroll users',
      tableTitle: 'Manage learners in this class',
      searchText: 'Find a learner or coach...',
      users: 'Users',
      // table info
      fullName: '<NAME>',
      username: 'Username',
      role: 'Role',
      learner: 'Learner',
      coach: 'Coach',
      remove: 'Remove',
      // search-related error messages
      noUsersExist: 'No users in this class',
      allUsersFilteredOut: 'No matching users',
    },
    components: {
      'class-rename-modal': require('./class-rename-modal'),
      'role-switcher': require('./role-switcher'),
      'user-remove-modal': require('./user-remove-modal'),
      'icon-button': require('kolibri.coreVue.components.iconButton'),
      'user-role': require('../user-role'),
    },
    data: () => ({
      searchFilter: '',
      currentUserRemove: null,
    }),
    computed: {
      LEARNER: () => UserKinds.LEARNER,
      COACH: () => UserKinds.COACH,
      classEnrollLink() {
{'fraction_non_alphanumeric': 0.1876355748373102, 'fraction_numerical': 0.0004338394793926247, 'mean_word_length': 2.1331974176010875, 'pattern_counts': {'":': 0, '<': 158, '<?xml version=': 0, '>': 164, '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': '5937219', 'n_tokens_mistral': 2884, 'n_tokens_neox': 2843, 'n_words': 505}