<h1 translate>Participants</h1>

<div id="submenu">
  <a ui-sref="users.user.create" 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">
    <a ui-sref="user_print" class="btn btn-default btn-sm" target="_blank">
      <i class="fa fa-file-pdf-o fa-lg"></i>
      <translate>PDF</translate>
    </a>
    <button os-perms="users.can_manage" class="btn btn-default btn-sm dropdown-toggle"
        data-toggle="dropdown">
      <i class="fa fa-caret-down"></i>
    </button>
    <ul class="dropdown-menu 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>

<div class="row form-group">
  <div class="col-sm-8">
    <input type="checkbox" ng-model="filterPresent" ng-false-value="''">
    <translate>Is present</translate>
  </div>
  <div class="col-sm-4">
    <input type="text" os-focus-me ng-model="filter.search" class="form-control"
        placeholder="{{ 'Filter' | translate}}">
  </div>
</div>

<table class="table table-striped table-bordered table-hover">
  <thead>
    <tr>
      <th 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>
      <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_manage core.can_manage_projector" class="minimum">
        <translate>Actions</translate>
  <tbody>
    <tr ng-repeat="user in users | filter: filter.search | filter: {is_present: filterPresent} |
        orderBy: sortColumn:reverse" ng-class="{ 'activeline': user.isProjected() }">
      <td><input type="checkbox" ng-model="user.is_present" ng-click="togglePresent(user)">
      <td><a ui-sref="users.user.detail({id: user.id})">{{ user.get_short_name() }}</a>
          <div ng-if="user.comment"><small><i class="fa fa-info-circle"></i> {{ user.comment }}</small></div>
      <td class="optional">{{ user.structure_level }}
      <td class="optional">
        <div ng-repeat="group in user.groups">
          {{ (groups | filter: {id: group})[0].name }}
        </div>
      <td os-perms="users.can_manage core.can_manage_projector" class="nobr">
        <!-- project -->
        <a os-perms="core.can_manage_projector" 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>
        <!-- edit -->
        <a ui-sref="users.user.detail.update({id: user.id})" os-perms="users.can_manage"
            class="btn btn-default btn-sm"
            title="{{ 'Edit' | translate}}">
          <i class="fa fa-pencil"></i>
        </a>
        <!-- delete -->
        <a os-perms="users.can_manage" class="btn btn-danger btn-sm"
            ng-bootbox-confirm="Are you sure you want to delete <b>{{ user.get_short_name() }}</b>?"
            ng-bootbox-confirm-action="delete(user)"
            title="{{ 'Delete' | translate }}">
          <i class="fa fa-trash-o"></i>
        </a>
</table>
