<div class="row" style="margin-bottom: 20px">
  <div class="col-xs-12 col-md-3">
    <div>
      <button ng-click="rebuildPackages()" class="btn btn-default" ng-disabled="building">
        <i class="fa fa-refresh" ng-class="building ? 'fa-spin' : ''"></i>
        Rebuild package list
      </button>
    </div>
    <div style="margin-top: 10px">
      <a ng-href="{{ ADMIN }}acl.json.gz" class="btn btn-default">
        <i class="fa fa-download"></i>
        Download ACL
      </a>
    </div>
  </div>
  <div class="col-xs-12 col-md-offset-1 col-md-4" ng-if="pendingUsers && pendingUsers.length > 0">
    <h4>
      <i class="fa fa-gavel"></i>
      Pending Users
    </h4>
    <table class="table table-striped table-bordered table-hover">
      <tbody>
        <tr ng-repeat="user in pendingUsers | orderBy:'toString()' | limitTo:pageSize"
          ng-mouseenter="showOptions = true" ng-mouseleave="showOptions = false">
          <td>
            <div class="pull-left">
              {{ user }}
            </div>
            <div class="pull-right">
              <button ng-click="approveUser(user)" ng-show="showOptions" class="btn btn-success btn-xs pull-right" style="margin-left: 10px">
                <i class="fa fa-thumbs-up"></i>
                Approve
              </button>
              <button ng-click="rejectUser(user)" ng-show="showOptions" class="btn btn-danger btn-xs pull-right">
                <i class="fa fa-thumbs-down"></i>
                Reject
              </button>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="col-xs-12 col-md-4" ng-show="ACCESS_MUTABLE">
    <button ng-click="toggleAllowRegister()" class="btn btn-default pull-right" ng-class="ALLOW_REGISTER ? 'active' : ''">
      <i class="fa fa-check-square-o" ng-show="ALLOW_REGISTER"></i>
      <i class="fa fa-square-o" ng-hide="ALLOW_REGISTER"></i>
      Registration {{ ALLOW_REGISTER ? 'allowed' : 'disabled' }}
    </button>
  </div>
</div>

<div class="row">
  <div class="col-xs-12 col-md-4">
    <div ng-switch on="!!userTableArgs">
      <div ng-switch-when="false" ng-switch-when="undefined" class="text-center">
        <i class="fa fa-spinner fa-spin fa-4x"></i>
      </div>
      <div ng-switch-default>
        <div ng-include="PARTIAL + 'pretty_table.html'" ng-init="tableArgs = userTableArgs"></div>
      </div>
    </div>
  </div>
  <div class="col-xs-12 col-md-4">
    <div ng-switch on="!!groupTableArgs">
      <div ng-switch-when="false" class="text-center">
        <i class="fa fa-spinner fa-spin fa-4x"></i>
      </div>
      <div ng-switch-default>
        <div ng-include="PARTIAL + 'pretty_table.html'" ng-init="tableArgs = groupTableArgs"></div>
      </div>
    </div>
  </div>
  <div class="col-xs-12 col-md-4">
    <div ng-switch on="!!packageTableArgs">
      <div ng-switch-when="false" class="text-center">
        <i class="fa fa-spinner fa-spin fa-4x"></i>
      </div>
      <div ng-switch-default>
        <div ng-include="PARTIAL + 'pretty_table.html'" ng-init="tableArgs = packageTableArgs"></div>
      </div>
    </div>
  </div>
</div>
