<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-plus fa-lg"></i>
        <translate>New</translate>
      </a>
      <span ng-if="config('users_enable_presence_view')">
        <a ui-sref="users.user.presence" os-perms="users.can_manage" class="btn btn-default btn-sm">
          <i class="fa fa-barcode fa-lg"></i>
          <translate>Presence</translate>
        </a>
      </span>
      <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>
      <template-hook hook-name="userListMenuButtons"></template-hook>
    </div>
    <h1 translate>Participants</h1>
  </div>
</div>

<div class="details">
  <div uib-alert ng-show="alert.show" ng-class="'alert-' + (alert.type || 'warning')" close="alert={}">
    {{ alert.msg }}
  </div>
  <div class="row">
    <div class="col-sm-6">
      <!-- select mode -->
      <button os-perms="users.can_manage" class="btn btn-sm"
          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="dropdown pull-right" uib-dropdown>
        <button os-perms="users.can_manage" class="btn btn-default btn-sm" uib-dropdown-toggle
            id="user-pdf-dropdown">
          <i class="fa fa-upload"></i>
          <span ng-if="usersFiltered.length == users.length" translate>
            Export all
          </span>
          <span ng-if="usersFiltered.length != users.length" translate>
            Export filtered
          </span>
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" dropdown-menu-right aria-labelledby="user-pdf-dropdown">
          <li>
              <a href="" ng-click="pdfExportUserList()">
                <i class="fa fa-list fa-fw"></i>
                <translate>List of participants</translate> (PDF)
              </a>
          <li os-perms="users.can_manage">
              <a href="" ng-click="pdfExportUserAccessDataList()">
                <i class="fa fa-qrcode fa-fw"></i>
                <translate>List of access data</translate> (PDF)
              </a>
          <li>
              <a href="" id="downloadLinkCSV" ng-click="csvExport()">
                <i class="fa fa-file-text-o fa-fw"></i>
                CSV
              </a>
        </ul>
      </div>

      <template-hook hook-name="userListSubmenuRight"></template-hook>
    </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 input-sm">
        <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>
        <option value="generatePasswords" translate>Generate new passwords</option>
        <option value="is_active" translate>Set/Unset 'is active'</option>
        <option value="is_present" translate>Set/Unset 'is present'</option>
        <option value="is_committee" translate>Set/Unset 'is a committee'</option>
        <option value="send_invite_email" translate>Send invitation emails</option>
      </select>
      <!-- delete button -->
      <a ng-show="selectedAction == 'delete'"
        ng-bootbox-confirm="{{ 'Are you sure you want to delete all selected users?' | translate }}"
        ng-bootbox-confirm-action="deleteMultiple()"
        class="btn btn-default btn-sm btn-danger">
        <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 input-sm">
        <option value="" translate>--- Select group ---</option>
        <option ng-repeat="group in groups | orderBy: 'id'" value="{{ group.id }}">{{ group.name | translate }}</option>
      </select>
      <!-- add group button -->
      <a ng-show="selectedAction == 'addGroup'"
          ng-click="addGroupMultiple(selectedGroup)" class="btn btn-default btn-sm">
        <i class="fa fa-plus"></i>
        <translate>Add group</translate>
      </a>
      <!-- remove group button -->
      <a ng-show="selectedAction == 'removeGroup'"
          ng-click="removeGroupMultiple(selectedGroup)" class="btn btn-default btn-sm">
        <i class="fa fa-minus"></i>
        <translate>Remove group</translate>
      </a>
      <!-- generate new password button -->
      <a ng-show="selectedAction == 'generatePasswords'" class="btn btn-default btn-sm"
        ng-click="generateNewPasswordsMultiple()">
        <i class="fa fa-magic"></i>
        <translate>Generate new passwords</translate>
      </a>
      <!-- set bool property button -->
      <a ng-show="inArray(['is_active', 'is_present', 'is_committee'], selectedAction)"
        ng-click="setBoolPropertyMultiple(selectedAction, true)" class="btn btn-default btn-sm">
        <i class="fa fa-check"></i>
        <span ng-if="selectedAction == 'is_active'" translate>Is active</span>
        <span ng-if="selectedAction == 'is_present'" translate>Is present</span>
        <span ng-if="selectedAction == 'is_committee'" translate>Is committee</span>
      </a>
      <!-- unset bool property button -->
      <a ng-show="inArray(['is_active', 'is_present', 'is_committee'], selectedAction)"
        ng-click="setBoolPropertyMultiple(selectedAction, false)" class="btn btn-default btn-sm">
        <i class="fa fa-ban"></i>
        <span ng-if="selectedAction == 'is_active'" translate>Is not active</span>
        <span ng-if="selectedAction == 'is_present'" translate>Is not present</span>
        <span ng-if="selectedAction == 'is_committee'" translate>Is not a committee</span>
      </a>
      <!-- send_invite_email -->
      <a ng-show="selectedAction == 'send_invite_email'" class="btn btn-default btn-sm"
        ng-click="sendInvitationEmails()">
        <translate>Send invitation emails</translate>
      </a>
    </div>
  </div>

  <div class="spacer-top-lg italic row">
    <div class="col-md-6">
      {{ usersFiltered.length }} /
      {{ users.length }} {{ "participants" | translate }}<span ng-if="(users|filter:{selected:true}).length > 0">,
      {{(users|filter:{selected:true}).length}} {{ "selected" | translate }}</span>
      <template-hook hook-name="userListTableStats"></template-hook>
    </div>
    <div class="col-md-6" ng-show="usersFiltered.length > pagination.itemsPerPage">
      <span class="pull-right">
        <a href="" class="pagination-arrow" ng-click="pagination.prevPage()"
          ng-if="pagination.showPrevPageArrow()">
          &laquo;
        </a>
        <translate>Page</translate> {{ pagination.currentPage }} /
        {{ pagination.getPageCount(usersFiltered) }}
        <a href="" class="pagination-arrow" ng-click="pagination.nextPage(usersFiltered)"
          ng-if="pagination.showNextPageArrow(usersFiltered)">
          &raquo;
        </a>
      </span>
    </div>
  </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
      | osFilter: filter.filterString : filter.getObjectQueryString
      | filter: {is_present: filter.booleanFilters.isPresent.value}
      | filter: {is_active: filter.booleanFilters.isActive.value}
      | filter: {is_committee: filter.booleanFilters.isCommittee.value}
      | filter: {has_last_email_send: filter.booleanFilters.hasLastEmailSend.value}
      | MultiselectFilter: filter.multiselectFilters.group : getItemId.group
      | orderByEmptyLast: sort.column: sort.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
      | osFilter: filter.filterString : filter.getObjectQueryString
      | filter: {is_committee: filter.booleanFilters.isCommittee.value}
      | MultiselectFilter: filter.multiselectFilters.group : getItemId.group
      | orderByEmptyLast: sort.column: sort.reverse)"></div>

  <div class="os-table container-fluid">
    <div class="row header-row">
      <div class="col-xs-1 centered" ng-show="isSelectMode" os-perms="users.can_manage">
        <i class="fa text-danger pointer" ng-class="selectedAll ? 'fa-check-square-o' : 'fa-square-o'"
          ng-click="checkAll()"></i>
      </div>
      <div class="col-xs-11 main-header">
        <span class="form-inline text-right pull-right">
          <!-- reset Filters -->
          <span class="sort-spacer pointer" ng-click="filter.reset(isSelectMode)"
            ng-if="filter.areFiltersSet()" ng-disabled="isSelectMode"
            ng-class="{'disabled': isSelectMode}">
            <i class="fa fa-times-circle"></i>
            <translate>Filter</translate>
          </span>
          <!-- Group filter -->
          <span uib-dropdown>
            <span class="pointer" id="dropdownGroup" uib-dropdown-toggle
              ng-class="{'bold': filter.multiselectFilters.group.length > 0, 'disabled': isSelectMode}"
              ng-disabled="isSelectMode">
              <translate>Groups</translate>
              <span class="caret"></span>
            </span>
            <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownGroup">
              <li ng-repeat="group in groups | orderBy: 'id'">
                <a href ng-click="filter.operateMultiselectFilter('group', group.id, isSelectMode)">
                  <i class="fa fa-check" ng-if="filter.multiselectFilters.group.indexOf(group.id) > -1"></i>
                  {{ group.name | translate }}
                </a>
              </li>
              <li class="divider"></li>
              <li>
                <a href ng-click="filter.operateMultiselectFilter('group', -1, isSelectMode)">
                  <i class="fa fa-check" ng-if="filter.multiselectFilters.group.indexOf(-1) > -1"></i>
                  <translate>No group set</translate>
                </a>
              </li>
            </ul>
          </span>
          <!-- boolean Filters -->
          <span ng-repeat="(name, booleanFilter) in filter.booleanFilters"
            ng-if="!booleanFilter.needExtraPermission || operator.hasPerms('users.can_see_extra_data')" uib-dropdown>
            <span class="pointer" id="dropdown{{ name }}" uib-dropdown-toggle
              ng-class="{'bold': booleanFilter.value !== undefined, 'disabled': isSelectMode}"
              ng-disabled="isSelectMode">
              {{ booleanFilter.displayName | translate }}
              <span class="caret"></span>
            </span>
            <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdown{{ name }}">
              <li>
                <a href ng-click="booleanFilter.value = (booleanFilter.value ? undefined : true); filter.save();">
                  <i class="fa" ng-class="{'fa-check': booleanFilter.value === true}"></i>
                  {{ booleanFilter.choiceYes | translate }}
                </a>
              </li>
              <li>
                <a href ng-click="booleanFilter.value = (booleanFilter.value === false) ? undefined : false; filter.save();">
                  <i class="fa" ng-class="{'fa-check': booleanFilter.value === false}"></i>
                  {{ booleanFilter.choiceNo | translate }}
                </a>
              </li>
            </ul>
          </span>
          <!-- dropdown sort -->
          <span uib-dropdown>
            <span class="pointer" id="dropdownSort" uib-dropdown-toggle
              ng-class="{'disabled': isSelectMode}"
              ng-disabled="isSelectMode">
              <translate>Sort</translate>
              <span class="caret"></span>
            </span>
            <ul class="dropdown-menu dropdown-menu-right dropdown-entries" aria-labelledby="dropdownSort">
              <li ng-repeat="option in sortOptions">
                <a href ng-click="sort.toggle(option.name)">
                  {{ option.display_name | translate }}
                  <span class="spacer-right pull-right"></span>
                  <i class="pull-right fa"
                    ng-style="{'visibility': sort.column === option.name ? 'visible' : 'hidden'}"
                    ng-class="sort.reverse ? 'fa-sort-desc' : 'fa-sort-asc'">
                  </i>
                </a>
              </li>
            </ul>
          </span>
          <!-- search field -->
          <span class="form-group">
            <span class="input-group">
              <span class="input-group-addon"><i class="fa fa-search"></i></span>
              <input type="text" ng-model="filter.filterString" class="form-control" ng-model-options="{debounce: 500}" 
                 placeholder="{{ 'Search' | translate}}" ng-disabled="isSelectMode"
                 ng-change="filter.save()">
            </span>
          </span>
        </span>
        <!-- show all selected multiselectoptions -->
        <span>
          <span ng-repeat="group in groups | orderBy: 'id'" class="pointer spacer-left-lg"
            ng-if="filter.multiselectFilters.group.indexOf(group.id) > -1"
            ng-click="filter.operateMultiselectFilter('group', group.id, isSelectMode)"
            ng-class="{'disabled': isSelectMode}">
            <span class="nobr">
              <i class="fa fa-times-circle"></i>
              {{ group.name | translate }}
            </span>
          </span>
          <span ng-if="filter.multiselectFilters.group.indexOf(-1) > -1" class="pointer spacer-left-lg"
            ng-click="filter.operateMultiselectFilter('group', -1, isSelectMode)"
            ng-class="{'disabled': isSelectMode}">
            <i class="fa fa-times-circle"></i>
            <translate>No group set</translate>
          </span>
          <!-- for all boolean Filters -->
          <span ng-repeat="(name, booleanFilter) in filter.booleanFilters"
            ng-hide="booleanFilter.value === undefined"
            class="pointer spacer-left-lg"
            ng-click="booleanFilter.value = undefined; filter.save();"
            ng-class="{'disabled': isSelectMode}">
            <span class="nobr">
              <i class="fa fa-times-circle"></i>
              {{ booleanFilter.value ? booleanFilter.choiceYes : booleanFilter.choiceNo | translate }}
            </span>
          </span>
        </span>
      </div>
    </div>

    <!-- main table -->
    <div class="row data-row" ng-mouseover="user.hover=true"
      ng-mouseleave="user.hover=false"
      ng-class="{'projected': user.isProjected().length}"
      ng-repeat="user in usersFiltered
      | limitTo : pagination.itemsPerPage : pagination.limitBegin">

      <!-- select column -->
      <div ng-show="isSelectMode" os-perms="users.can_manage" class="col-xs-1 centered">
        <i class="fa text-danger pointer" ng-click="user.selected=!user.selected"
        ng-class="user.selected ? 'fa-check-square-o' : 'fa-square-o'"></i>
      </div>
      <!-- projector column -->
      <div class="col-xs-1 centered projector" os-perms="core.can_manage_projector">
        <projector-button model="user" default-projector-id="defaultProjectorId">
        </projector-button>
      </div>
      <div class="no-projector-spacer" os-perms="!core.can_manage_projector"></div>
      <!-- main content column -->
      <div class="col-xs-6 content">
        <div class="spacer-right"> <!-- horizontal block -->
          <i ng-style="{'visibility': user.is_active === false ? 'visible' : 'hidden'}" class="fa fa-ban"
            title="{{ 'Is inactive' | translate }}"></i>
          <i ng-style="{'visibility': user.is_committee ? 'visible' : 'hidden'}" class="fa fa-university"
            title="{{ 'Is a committee' | translate }}"></i>
        </div>
        <div>
          <div> <!-- vertical block -->
            <a ui-sref="users.user.detail({id: user.id})" class="title">{{ user.get_short_name() }}</a>
          </div>
          <div os-perms="users.can_manage"> <!-- user number -->
            <div ng-if="user.number" editable-text="user.number" onaftersave="save(user)">
              <translate translate-comment="abbreviation for number">No.</translate> {{ user.number }}
            </div>
          </div>
          <div os-perms="!users.can_manage" ng-if="user.number">
              <translate translate-comment="abbreviation for number">No.</translate> {{ user.number }}
          </div>
          <div os-perms="users.can_manage" ng-class="{'hiddenDiv': !user.hover}">
            <small>
              <template-hook hook-name="userListEditButton">
                <a href="" ng-click="openDialog(user)" translate>Edit</a> &middot;
              </template-hook>
              <a ui-sref="users.user.change-password({id: user.id})" translate>Change password</a> &middot;
              <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>
            </small>
          </div>
        </div>
      </div>

      <!-- additional content column -->
      <div class="col-xs-4 content" ng-style="{'width': isSelectMode ? 'calc(50% - 120px)' : 'calc(50% - 70px)'}">
        <div style="width: 60%;" class="optional">
          <small>
            <!-- Group dropdown for manage user -->
            <div os-perms="users.can_manage" ng-show="groups.length > 0"
              uib-tooltip="{{ 'Groups' | translate }}" tooltip-placement="top-left"
              ng-mouseover="user.groupHover=true"
              ng-mouseleave="user.groupHover=false">
              <span uib-dropdown>
                <span id="dropdown-group{{ user.id }}" class="pointer" uib-dropdown-toggle>
                  <span ng-if="!user.groups_id.length" ng-show="user.hover">
                    <i class="fa fa-users"></i>
                    <i class="fa fa-plus"></i>
                  </span>
                  <span ng-if="user.groups_id.length">
                    <i class="fa fa-users"></i>
                    <span ng-repeat="group in user.groups_id | limitTo:2">
                      {{ (groups | filter: {id: group}:true)[0].name | translate }}<span ng-if="!$last">,</span></span><span ng-if="user.groups_id.length > 2">,
                      ... [+{{ user.groups_id.length - 2}}]</span>
                    <i class="fa fa-cog fa-lg spcaer-left" ng-show="user.groupHover"></i>
                  </span>
                </span>
                <ul class="dropdown-menu" aria-labelledby="dropdown-group{{ user.id }}">
                  <li ng-repeat="group in groups | orderBy: 'id'">
                    <a href ng-click="toggleGroup(user, group)">
                      <i class="fa fa-check" ng-if="inArray(user.groups_id, group.id)"></i>
                      {{ group.name | translate }}
                    </a>
                  </li>
                </ul>
              </span>
            </div>
            <!-- Group dropdown for normal user -->
            <div os-perms="!users.can_manage" ng-show="user.groups_id.length"
              uib-tooltip="{{ 'Groups' | translate }}" tooltip-placement="top-left">
              <i class="fa fa-users"></i>
              <span ng-repeat="group in user.groups_id | limitTo:2">
                {{ (groups | filter: {id: group})[0].name | translate }}<span ng-if="!$last">,</span></span><span ng-if="user.groups_id.length > 2">,
                ... [+{{ user.groups_id.length - 2}}]</span>
              <!-- sorry for merging them together, but otherwise there would be a whitespace because of the new line -->
            </div>

            <div os-perms="users.can_manage" ng-show="user.structure_level || user.hover">
              <div class="popover-wrapper" uib-tooltip="{{ 'Structure level' | translate }}" tooltip-placement="top-left">
                <i class="fa fa-flag"></i>
                <span editable-text="user.structure_level" onaftersave="save(user)">
                  <span ng-if="!user.structure_level" translate>Set structure level ...</span>
                  <span ng-if="user.structure_level">{{ user.structure_level }}</span>
                </span>
              </div>
            </div>
            <div os-perms="!users.can_manage">
              <div ng-if="user.structure_level" uib-tooltip="{{ 'Structure level' | translate }}" tooltip-placement="top-left">
                <i class="fa fa-flag"></i>
                {{ user.structure_level }}
              </div>
            </div>

            <div os-perms="users.can_manage" ng-show="user.comment || user.hover">
              <div class="popover-wrapper" uib-tooltip="{{ 'Comment' | translate }}" tooltip-placement="top-left">
                <i class="fa fa-info-circle"></i>
                <span editable-text="user.comment" onaftersave="save(user)">
                  <span ng-if="!user.comment" translate>Set comment ...</span>
                  <span ng-if="user.comment">{{ user.comment }}</span>
                </span>
              </div>
            </div>
            <div os-perms="!users.can_manage">
              <div ng-if="user.comment" uib-tooltip="{{ 'Comment' | translate }}" tooltip-placement="top-left">
                <i class="fa fa-info-circle"></i>
                {{ user.comment | limitTo:25}}{{ user.comment.length > 25 ? '...' : '' }}
              </div>
            </div>

            <div os-perms="users.can_manage" ng-show="user.last_email_send">
              <div uib-tooltip="{{ 'Last email send to the user' | translate }}" tooltip-placement="top-left">
                <i class="fa fa-envelope"></i>
                {{ user.last_email_send | date: 'yyyy-MM-dd HH:mm:ss' }}
              </div>
            </div>
          </small>
        </div>
        <div style="width: 40%;" class="pull-right">
          <div os-perms="users.can_see_extra_data users.can_manage"
               ng-style="{'visibility': (user.hover || user.is_present) ? 'visible' : 'hidden'}">
            <span class="pointer nobr" ng-click="user.is_present = !user.is_present; save(user);">
              <i class="fa" ng-class="user.is_present ? 'fa-check-square-o' : 'fa-square-o'"></i>
              <span class="spacer-left" translate>Present</span>
            </span>
          </div>
          <div os-perms="!users.can_manage" class="nobr"
            ng-style="{'visibility': user.is_present ? 'visible' : 'hidden'}">
            <i class="fa fa-check-square-o"></i>
            <span class="spacer-left" translate>Present</span>
          </div>
          <template-hook hook-name="userListExtraContent"></template-hook>
        </div>
      </div>

    </div><!-- end data row -->
  </div><!-- end os-table -->

  <ul uib-pagination
      ng-show="usersFiltered.length > pagination.itemsPerPage"
      total-items="usersFiltered.length"
      items-per-page="pagination.itemsPerPage"
      ng-model="pagination.currentPage"
      ng-change="pagination.pageChanged()"
      class="pagination-sm"
      direction-links="false"
      boundary-links="true"
      first-text="&laquo;"
      last-text="&raquo;">
  </ul>
</div>
