fab-manager/app/frontend/templates/admin/open_api_clients/index.html.erb

<section class="heading b-b">
  <div class="row no-gutter">
    <div class="col-xs-2 col-sm-2 col-md-1">
      <section class="heading-btn">
        <a href="#" ng-click="backPrevLocation($event)"><i class="fa fa-long-arrow-left "></i></a>
      </section>
    </div>
    <div class="col-xs-10 col-sm-10 col-md-7 b-l b-r-md">
      <section class="heading-title">
        <h1 translate>{{ 'app.admin.open_api_clients.open_api_clients' }}</h1>
      </section>
    </div>

    <div class="col-xs-12 col-sm-12 col-md-4 b-t hide-b-md">
      <section class="heading-actions wrapper">
        <a href="<%= apipie_apipie_path({version: 'v1'}) %>" target="_blank" class="btn btn-info b-2x rounded m-t-sm documentation-button">
          <i class="fa fa-book" aria-hidden="true"></i>&nbsp;
           <span translate>{{ 'app.admin.open_api_clients.api_documentation' }}</span>&nbsp;
          <span class="exponent"><i class="fa fa-external-link" aria-hidden="true"></i></span>
        </a>
      </section>
    </div>
  </div>
</section>

<section class="m-lg open-api-clients"
         ui-tour="open-api"
         ui-tour-backdrop="true"
         ui-tour-template-url="'shared/tour-step-template.html'"
         ui-tour-use-hotkeys="true"
         ui-tour-scroll-parent-id="content-main"
         post-render="setupOpenAPITour">
  <div class="row">
    <div class="col-md-12">
      <div class="col-md-12">

        <button type="button" class="btn btn-warning m-t m-b" ng-click="createClient()" ng-show="!clientFormVisible" translate>{{ 'app.admin.open_api_clients.add_new_client' | translate }}</button>

        <form role="form" id="clientForm" ng-show="clientFormVisible" name="clientForm" class="form-inline m-b m-t" novalidate>
          <div class="form-group" ng-class="{'has-error': clientForm['client[name]'].$dirty && clientForm['client[name]'].$invalid}">
            <input class="form-control" type="text" name="client[name]" ng-model="client.name" value="" placeholder="{{ 'app.admin.open_api_clients.client_name' | translate }}" required>
          </div>

          <button class="btn btn-default" ng-click="cancelEdit()" name="button">{{ 'app.shared.buttons.cancel' | translate }}</button>
          <input type="submit" class="btn btn-warning" ng-disabled="!client.name || client.name.length == 0" ng-click="saveClient(client)" value="{{ 'app.shared.buttons.save' | translate }}">
        </form>

        <table class="table">
          <thead>
            <tr>
              <th style="width:20%"><a href="" ng-click="setOrder('name')">{{ 'app.admin.open_api_clients.name' | translate }} <i class="fa fa-arrows-v" ng-class="{'fa fa-sort-alpha-asc': order == 'name', 'fa fa-sort-alpha-desc': order == '-name', 'fa fa-arrows-v': order }"></i></a></th>

              <th style="width:15%"><a href="" ng-click="setOrder('calls_count')">{{ 'app.admin.open_api_clients.calls_count' | translate }} <i class="fa fa-arrows-v" ng-class="{'fa fa-sort-numeric-asc': order == 'calls_count', 'fa fa-sort-numeric-desc': order == '-calls_count', 'fa fa-arrows-v': order }"></i></a></th>

              <th style="width:20%"><a href="">{{ 'app.admin.open_api_clients.token' | translate }}</a></th>

              <th style="width:20%"><a href="" ng-click="setOrder('created_at')">{{ 'app.admin.open_api_clients.created_at' | translate }} <i class="fa fa-arrows-v" ng-class="{'fa fa-sort-numeric-asc': order == 'created_at', 'fa fa-sort-numeric-desc': order == '-created_at', 'fa fa-arrows-v': order }"></i></a></th>

              <th style="width:25%"></th>
            </tr>
          </thead>
          <tbody>
              <tr ng-repeat="client in clients | orderBy: order">
                  <td>{{ client.name }}</td>
                  <td>{{ client.calls_count }}</td>
                  <td>{{ client.token }}</td>
                  <td>{{ client.created_at | amDateFormat: 'LL' }}</td>
                  <td>
                    <div class="buttons">
                        <button class="btn btn-default" ng-click="editClient(client)">
                          <i class="fa fa-pencil"></i> {{ 'app.shared.buttons.edit' | translate }}
                        </button>

                        <button class="btn btn-default" ng-click="resetToken(client)">
                          <i class="fa fa-times"></i> {{ 'app.admin.open_api_clients.reset_token' | translate }}
                        </button>

                        <button class="btn btn-danger" ng-click="deleteClient($index)" ng-show="client.calls_count == 0">
                          <i class="fa fa-trash"></i>
                        </button>
                    </div>
                  </td>
              </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</section>