Users.html

<div id="title" class="row">
  <h1 translate lib="web">users</h1>
</div>

<div class="col-sm-12 text-right">
  <input type="checkbox" id="checkbox-1" ng-model="ctrl.skipcustomerfilter" ng-change="ctrl.Search()"
    ng-show="menuctrl.WebSocketClientService.multi_tenant">
  <label for="checkbox-1" ng-show="menuctrl.WebSocketClientService.multi_tenant"><span translate lib="web">show
      all</span></label>
  <a href="#/User" class="btn btn-info" translate lib="web">Adduser</a>
</div>
<div ng-show="ctrl.errormessage != ''"" class=" alert alert-danger" role="alert">{{ctrl.errormessage}}</div>
<table id="table1" class="table table-striped" when-scrolled="ctrl.more()" style="width: 100%;">
  <thead class="thead-dark">
    <tr>
      <th ng-click="ctrl.ToggleOrder('name')"><b translate lib="web">name</b></th>
      <th ng-click="ctrl.ToggleOrder('username')"><b translate lib="web">username</b></th>
      <th ng-click="ctrl.ToggleOrder('_created')"><b translate lib="web">created</b></th>
      <th ng-click="ctrl.ToggleOrder('lastseen')"><b translate lib="web">lastseen</b></th>
      <th ng-click="ctrl.ToggleOrder('dbusage')"><b translate lib="web">dbusage</b></th>
      <th ng-show="ctrl.WebSocketClientService.stripe_api_key != ''" ng-click="ctrl.ToggleOrder('customerid')">
        <i class="fas fa-money-bill-wave"></i>
      </th>
      <th ng-show="ctrl.WebSocketClientService.validate_user_form != ''" ng-click="ctrl.ToggleOrder('validated')">
        <em class="fas fa-check"></em>
      </th>
      <th class="text-right"></th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="model in ctrl.models">
      <td class="text-truncate">{{model.name}}</td>
      <td class="text-truncate">{{model.username}}</td>
      <td>
        <timesince ng-model="model._created" />
      </td>
      <td>
        <timesince ng-model="model.lastseen" />
      </td>
      <td>
        <div class="w-100">
          <format-bytes ng-model="model.dbusage" />
        </div>

      </td>
      <td ng-show="ctrl.WebSocketClientService.stripe_api_key != ''">
        <a href ng-click="ctrl.ShowPlans(model)" class="btn" role="button" ng-show="menuctrl.user.customerid != null && menuctrl.customer.stripeid != null && model.customerid && model.customerid != '' &&
          (menuctrl.hasrole('admins') || menuctrl.hasrole('customer admins') || menuctrl.hasrole('resellers'))          
          ">
          <em class="fas fa-money-bill-wave"></em></a>
      </td>
      <td ng-show="ctrl.WebSocketClientService.validate_user_form != ''">
        <em ng-show="model.validated" class="fas fa-check"></em>
      </td>
      <td>
        <div class="w-200 text-right">
          <a ng-href ng-click="ctrl.Impersonate(model)" class="btn"
            ng-show="model._id != ctrl.WebSocketClientService.user._id"><em class="fas fa-user-secret"></em></a>
          <em class="btn fas fa-user-secret disabled" ng-show="model._id == ctrl.WebSocketClientService.user._id"></em>

          <a class="btn" ng-href="#/User/{{model._id}}">
            <em class="fas fa-edit"></em>
          </a>
          <a href ng-click="ctrl.DeleteOneUser(model)" class="btn" ng-disabled="ctrl.loading==true"><em
              class="fas fa-trash"></em></a>
        </div>
      </td>
    </tr>
  </tbody>
</table>



<div class="modal" id="resourceModal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <a href="#" class="close" role="button" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </a>
      <h5 class="modal-title">Services for {{ctrl.user.name}}</h5>
      <p>
      <div ng-repeat="Resource in ctrl.Resources">
        <div class="row" ng-repeat="Product in Resource.products" ng-show="Resource.userassign == 'multiplevariants'">
          <div class="col">{{Product.name}}</div>
          <div class="col">{{ Product.count }}</div>
          <div class="col">

            <a href ng-click="ctrl.AddPlan(Resource, Product)" class="btn" role="button"
              ng-show="(Product.count == 0 || Product.userassign == 'multiple') && ctrl.loading==false">
              <em class="fas fa-money-bill-wave"></em></a>
            <a href ng-click="ctrl.RemovePlan(Resource, Product)" class="btn" role="button"
              ng-show="Product.count > 0 && ctrl.loading==false">
              <em class="fas fa-trash"></em></a>

          </div>
        </div>
        <div class="row" ng-show="Resource.userassign == 'singlevariant'">
          <div class="col">{{Resource.name}}</div>
          <div class="col">
            <select ng-model="Resource.newproduct" ng-options="item as item.name for item in Resource.products"
              ng-disabled="ctrl.loading==true">
            </select>
          </div>
          <div class="col">
            <a href ng-click="ctrl.AddPlan(Resource, Resource.newproduct)" class="btn" role="button"
              ng-show="(Resource.newproduct.count == 0 || Resource.newproduct.userassign == 'multiple') && ctrl.loading==false">
              <em class="fas fa-money-bill-wave"></em></a>
            <em class="fas fa-money-bill-wave disabled btn"
              ng-show="(Resource.newproduct.count > 0 && Resource.newproduct.userassign != 'multiple') || Resource.newproduct == null || ctrl.loading==true"></em>
            <a href ng-click="ctrl.RemovePlan(Resource, Resource.newproduct)" class="btn" role="button"
              ng-show="Resource.newproduct.count > 0 && ctrl.loading==false">
              <em class="fas fa-trash"></em></a>
            <em class="fas fa-trash disabled btn"
              ng-show="(Resource.newproduct.count == 0) || Resource.newproduct == null || ctrl.loading==true"></em>

          </div>
        </div>
      </div>
      </p>
      <div class="text-right mt-20">
        <!-- text-right = text-align: right, mt-20 = margin-top: 2rem (20px) -->
        <a href class="btn mr-5" role="button" ng-click="ctrl.ToggleModal()">Close</a>
      </div>
    </div>
  </div>
</div>