<!-- add active class to c8y-stacked-item when clicked -->
<div class="card-block" *ngIf="serverList.length === 0">
  <c8y-ui-empty-state
    class="m-l-auto p-l-8 d-flex p-r-16"
    [icon]="'server'"
    [title]="'No servers found.' | translate"
    [subtitle]="'Click below to add a new server.' | translate"
  ></c8y-ui-empty-state>
</div>
<div
  class="c8y-stacked-item"
  [class.active]="server.active"
  *ngFor="let server of serverList"
  (click)="presentConfig(server)"
>
  <i [c8yIcon]="'server'" class="icon-20"></i>
  <div class="p-l-16 text-truncate">
    <p id="serverName" class="text-truncate">{{ server.name }}</p>
    <small id="serverUrl" class="text-truncate text-muted">{{ server.config.serverUrl }}</small>
  </div>
  <div class="m-l-auto p-l-8 d-flex p-r-16 a-i-center">
    <device-status class="p-r-8" [mo]="server"></device-status>
    <button
      class="btn btn-dot text-gray-darker"
      type="button"
      [attr.aria-label]="server.quickInfo.padlockMsg | translate"
      tooltip="{{ server.quickInfo.padlockMsg | translate }}"
      placement="left"
      container="body"
    >
      <i [c8yIcon]="server.quickInfo.padlock"></i>
    </button>
  </div>
</div>