<div class="header">
  <div class="title">
    <div class="submenu">
      <a ui-sref="users.group.create" os-perms="users.can_manage" class="btn btn-primary btn-sm">
        <i class="fa fa-plus fa-lg"></i>
        <translate>New</translate>
      </a>
      <a ui-sref="users.user.list" class="btn btn-sm btn-default">
        <i class="fa fa-angle-double-left fa-lg"></i>
        <translate>Back to overview</translate>
      </a>
    </div>
    <h1 translate>Groups</h1>
  </div>
</div>

<div class="details">
  <div class="row form-group">
    <div class="col-sm-4 pull-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" class="form-control"
             placeholder="{{ 'Search' | translate}}">
        </div>
      </div>
    </div>
  </div>

  <table class="table table-striped table-bordered table-hover">
    <thead>
      <tr>
        <th ng-click="sortby='id';reverse=!reverse">
          <translate>ID</translate>
          <i class="fa" ng-show="sortby == 'id'"
              ng-class="reverse ? 'fa-caret-down' : 'fa-caret-up'"></i>
        <th ng-click="sortby='name';reverse=!reverse">
          <translate>Name</translate>
          <i class="fa" ng-show="sortby == 'name'"
              ng-class="reverse ? 'fa-caret-down' : 'fa-caret-up'"></i>
        <th os-perms="users.can_manage core.can_manage_projector" class="mini_width" translate>Actions</th>
    <tbody>
      <tr ng-repeat="group in groups | filter: filter.search | orderBy:sortby:reverse">
        <td>{{ group.id }}
        <td><a ui-sref="users.group.detail({id: group.id})">{{ group.name | translate }}</a>
        <td os-perms="users.can_manage" class="nobr">
          <!-- edit -->
          <a ui-sref="users.group.detail.update({id: group.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 this entry?' | translate }}<br>
              <b>{{ group.name }}</b>"
              ng-bootbox-confirm-action="delete(group)"
              title="{{ 'Delete' | translate }}">
            <i class="fa fa-trash-o"></i>
          </a>
  </table>
</div>
