<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
        class="m-l-auto flex-no-shrink btn-clean p-0 btn-link"
        title="{{ 'Copy tenant ID to the clipboard' | translate }}"
        [attr.tabindex]="(open$ | async) ? '0' : '-1'"
        type="button"
        (click)="$event.stopPropagation(); copyIt(tenantId)"
      >
        {{ tenantId }}
        <i
          class="text-14 m-0"
          [c8yIcon]="'clipboard'"
        ></i>
      </button>
    </li>
    <li
      class="c8y-right-drawer__item"
      *ngFor="let versionEntry of versionsToDirectlyDisplay$ | async"
    >
      <span
        class="flex-no-shrink text-muted text-12 text-truncate m-r-8"
        [title]="versionEntry.label | translate"
      >
        {{ versionEntry.label | translate }}
      </span>
      <span
        class="flex-grow text-right text-truncate"
        [title]="versionEntry.version | translate"
      >
        {{ versionEntry.version }}
      </span>
    </li>
    <li class="c8y-right-drawer__item">
      <button
        class="btn btn-default btn-sm"
        [attr.tabindex]="(open$ | async) ? '0' : '-1'"
        title="{{ 'Download platform details' | translate }}"
        translate
        (click)="downloadPlatformDetails()"
      >
        Download platform details
      </button>
    </li>
  </ul>
</div>