<div class="separator-top p-t-8 p-b-8">
  <div class="c8y-right-drawer__item sticky-top">
    <i c8yIcon="c8y-cumulocity-iot"></i>
    <span class="text-bold">{{ 'Platform info' | translate }}</span>
  </div>

  <ul class="list-unstyled">
    <li class="c8y-right-drawer__item" *ngIf="currentTenantId$ | async as tenantId">
      <span class="flex-grow text-muted m-0 text-12 text-truncate" translate>Tenant ID</span>
      <button
        type="button"
        title="{{ 'Copy tenant ID to the clipboard' | translate }}"
        class="m-l-auto flex-no-shrink btn-clean p-0 text-info"
        (click)="$event.stopPropagation(); copyIt(tenantId)"
      >
        {{ tenantId }}
        <i [c8yIcon]="'clipboard'" class="text-14 m-0"></i>
      </button>
    </li>
    <li
      class="c8y-right-drawer__item"
      *ngFor="let versionEntry of versionsToDirectlyDisplay$ | async"
    >
      <span
        class="flex-grow text-muted text-12 text-truncate m-r-8"
        [title]="versionEntry.label | translate"
      >
        {{ versionEntry.label | translate }}
      </span>
      <span class="m-l-auto flex-no-shrink" [title]="versionEntry.version | translate">
        {{ versionEntry.version }}
      </span>
    </li>
    <li class="c8y-right-drawer__item">
      <button class="btn btn-default btn-sm" (click)="openDetailedInfo()" translate>
        Detailed info
      </button>
    </li>
  </ul>
</div>