<div class="header">
  <div class="title">
    <div class="submenu">
      <a ng-click="openDialog()" os-perms="users.can_manage" class="btn btn-primary btn-sm">
        <i class="fa fa-user-plus fa-lg"></i>
        <translate>New</translate>
      </a>
      <a ui-sref="users.group.list" os-perms="users.can_manage" class="btn btn-default btn-sm">
        <i class="fa fa-group fa-lg"></i>
        <translate>Groups</translate>
      </a>
      <a ui-sref="users.user.import" os-perms="users.can_manage" class="btn btn-default btn-sm">
        <i class="fa fa-download fa-lg"></i>
        <translate>Import</translate>
      </a>
      <div class="btn-group" uib-dropdown>
        <button os-perms="users.can_manage" class="btn btn-default btn-sm" uib-dropdown-toggle>
          <i class="fa fa-file-pdf-o fa-lg"></i>
          <translate>PDF</translate>
          <span class="caret"></span>
        </button>
        <ul class="uib-dropdown-menu uib-dropdown-menu-right">
          <li><a ui-sref="user_listpdf" target="_blank">
                <i class="fa fa-list fa-fw"></i>
                <translate>List of participants</translate>
              </a>
          <li os-perms="users.can_manage">
              <a ui-sref="user_passwordspdf" target="_blank">
                <i class="fa fa-qrcode fa-fw"></i>
                <translate>List of access data</translate>
              </a>
        </ul>
      </div>
    </div>
    <h1 translate>Participants</h1>
  </div>
</div>

<div class="details">
  <div class="row">
    <div class="col-sm-6">
      <!-- select mode -->
      <button os-perms="users.can_manage" class="btn"
          ng-class="$parent.isSelectMode ? 'btn-primary' : 'btn-default'"
          ng-click="$parent.isSelectMode = !$parent.isSelectMode; uncheckAll()">
        <i class="fa fa-check-square-o"></i>
        <translate>Select ...</translate>
      </button>
    </div>
    <div class="col-sm-6">
      <div class="form-inline text-right">
        <div class="form-group">
          <div class="input-group">
            <div class="input-group-addon"><i class="fa fa-search"></i></div>
            <input type="text" ng-model="filter.search" ng-model-options="{debounce: 500}" class="form-control"
               placeholder="{{ 'Search' | translate}}">
          </div>
        </div>
        <button class="btn btn-default" ng-click="$parent.isFilterOpen = !$parent.isFilterOpen"
            ng-class="$parent.isFilterOpen ? 'btn-primary' : 'btn-default'">
          <i class="fa fa-filter"></i>
          <translate>Filter ...</translate>
        </button>
      </div>
    </div>
  </div>
  <div uib-collapse="!$parent.isFilterOpen" class="row spacer">
    <div class="col-sm-6 text-right"></div>
    <div class="col-sm-6 text-right form-inline">
      <!-- group filter -->
      <select ng-model="groupFilter" class="form-control" id="groupFilter">
        <option ng-click="groupFilter = undefined" value="" translate>--- Select group ---</option>
        <option ng-repeat="group in groups" value="{{ group.id }}">{{ group.name | translate }}</option>
      </select>
      <!-- isPresent filter -->
      <span os-perms="users.can_see_extra_data">
        <input  type="checkbox" ng-model="$parent.filterPresent" ng-false-value="''">
        <translate>Is present</translate>
      </span>
    </div>
  </div>
  <div uib-collapse="!isSelectMode" class="row spacer">
    <div os-perms="users.can_manage" ng-show="isSelectMode" class="col-sm-12 text-left form-inline">
      <!-- actions -->
      <select ng-model="selectedAction" class="form-control">
        <option value="" translate>--- Select action ---</option>
        <option value="delete" translate>Delete</option>
        <option value="addGroup" translate>Add group</option>
        <option value="removeGroup" translate>Remove group</option>
      </select>
      <!-- delete button -->
      <a ng-show="selectedAction == 'delete'"
          ng-click="deleteMultiple()"
          class="btn btn-default">
        <i class="fa fa-trash fa-lg"></i>
        <translate>Delete selected participants</translate>
      </a>
      <!-- group select -->
      <select ng-show="selectedAction == 'addGroup' || selectedAction == 'removeGroup'"
          ng-model="selectedGroup" class="form-control">
        <option value="" translate>--- Select group ---</option>
        <option ng-repeat="group in groups" value="{{ group.id }}">{{ group.name | translate }}</option>
      </select>
      <!-- add group button -->
      <a ng-show="selectedAction == 'addGroup'"
          ng-click="addGroupMultiple(selectedGroup)" class="btn btn-default">
        <i class="fa fa-plus fa-lg"></i>
        <translate>Add group</translate>
      </a>
      <!-- remove group button -->
      <a ng-show="selectedAction == 'removeGroup'"
          ng-click="removeGroupMultiple(selectedGroup)" class="btn btn-default">
        <i class="fa fa-minus fa-lg"></i>
        <translate>Remove group</translate>
      </a>
    </div>
  </div>

  <div class="spacer-top-lg italic">
    {{ usersFiltered.length }} /
    {{ users.length }} {{ "participants" | translate }}<span ng-if="(users|filter:{selected:true}).length > 0">,
    {{(users|filter:{selected:true}).length}} {{ "selected" | translate }}</span>
  </div>

  <!-- filter users (for user with 'can_see_extra_data' permission) - consider present filter -->
  <div os-perms="users.can_see_extra_data">
    <span ng-repeat="user in $parent.usersFiltered = (users | filter: filter.search | filter: {groups_id: groupFilter} |
          filter: {is_present: filterPresent} | orderBy: sortColumn:reverse)"></span>
  </div>
  <!-- filter users (for user without 'can_see_extra_data' permission) -->
  <div os-perms="!users.can_see_extra_data"
      ng-repeat="user in $parent.usersFiltered = (users | filter: filter.search | filter: {groups_id: groupFilter} |
          orderBy: sortColumn:reverse)"></div>

  <table class="table table-striped table-bordered table-hover">
    <thead>
      <tr>
        <!-- projector column -->
        <th ng-show="!isSelectMode" os-perms="core.can_manage_projector" class="minimum">
        <!-- selection column -->
        <th ng-show="isSelectMode" os-perms="users.can_manage" class="minimum deleteColumn">
          <input type="checkbox" ng-model="$parent.selectedAll" ng-change="checkAll()">
        <th ng-click="toggleSort('first_name')" class="sortable">
          <translate>Name</translate>
          <!-- TODO: sort by first OR last name -->
          <i class="pull-right fa" ng-show="sortColumn === 'first_name' && header.sortable != false"
              ng-class="reverse ? 'fa-sort-desc' : 'fa-sort-asc'">
          </i>
        <th ng-click="toggleSort('structure_level')" class="sortable optional">
          <translate>Structure level</translate>
          <i class="pull-right fa" ng-show="sortColumn === 'structure_level' && header.sortable != false"
              ng-class="reverse ? 'fa-sort-desc' : 'fa-sort-asc'">
          </i>
        <th ng-click="toggleSort('groups')" class="sortable optional">
          <translate>Groups</translate>
          <i class="pull-right fa" ng-show="sortColumn === 'groups' && header.sortable != false"
              ng-class="reverse ? 'fa-sort-desc' : 'fa-sort-asc'">
          </i>
        <th os-perms="users.can_see_extra_data" ng-click="toggleSort('is_present')" class="sortable minimum">
          <translate>Present</translate>
          <i class="pull-right fa" ng-show="sortColumn === 'is_present' && header.sortable != false"
              ng-class="reverse ? 'fa-sort-desc' : 'fa-sort-asc'">
          </i>
    <tbody>
      <tr ng-repeat="user in usersFiltered | limitTo : itemsPerPage : limitBegin" class="animate-item"
          ng-class="{ 'activeline': user.isProjected(), 'selected': user.selected  }">
        <!-- projector column -->
        <td ng-show="!isSelectMode" os-perms="core.can_manage_projector">
          <a class="btn btn-default btn-sm"
              ng-class="{ 'btn-primary': user.isProjected() }"
              ng-click="user.project()"
              title="{{ 'Project user' | translate }}">
            <i class="fa fa-video-camera"></i>
          </a>
        <!-- selection column -->
        <td ng-show="isSelectMode" os-perms="users.can_manage" class="deleteColumn">
          <input type="checkbox" ng-model="user.selected">
        <!-- user data colums -->
        <td ng-mouseover="user.hover=true" ng-mouseleave="user.hover=false">
          <strong><a ui-sref="users.user.detail({id: user.id})">{{ user.get_short_name() }}</a></strong>
          <div ng-if="user.comment">
            <small><i class="fa fa-info-circle"></i> {{ user.comment }}</small>
          </div>
          <div os-perms="users.can_manage" class="hoverActions" ng-class="{'hiddenDiv': !user.hover}">
            <a href="" ng-click="openDialog(user)" translate>Edit</a> |
            <a href="" class="text-danger"
                ng-bootbox-confirm="{{ 'Are you sure you want to delete this entry?' | translate }}<br>
                <b>{{ user.get_short_name() }}</b>"
                ng-bootbox-confirm-action="delete(user)" translate>Delete</a>
          </div>
        <td class="optional">{{ user.structure_level }}
        <td class="optional">
          <div ng-repeat="group in user.groups_id">
            {{ (groups | filter: {id: group})[0].name | translate }}
          </div>
        <td os-perms="users.can_see_extra_data">
          <span os-perms="!users.can_manage">
            <i ng-if="user.is_present" class="fa fa-check-square-o"></i>
          </span>
          <input os-perms="users.can_manage" type="checkbox" ng-model="user.is_present" ng-click="save(user)">
  </table>
  <uib-pagination total-items="usersFiltered.length" items-per-page="itemsPerPage" ng-model="currentPage"
      ng-change="pageChanged()"
      class="pagination-sm" direction-links="false" boundary-links="true" first-text="&laquo;" last-text="&raquo;">
  </uib-pagination>
</div>
