<div class="separator-top p-t-8 m-t-auto c8y-right-drawer__item sticky-top">
  <i class="dlt-c8y-icon-science"></i>
  <span
    class="text-bold"
    translate
  >
    Beta features
  </span>
  <span
    class="m-l-8 tag tag--primary"
    *ngIf="hasUnseenFeatures$ | async"
  >
    {{ 'New' | translate }}
  </span>
</div>
<ul class="list-unstyled">
  <li class="c8y-right-drawer__item">
    <small translate>
      Enable or disable experimental features. Your feedback helps us improve functionality before
      final release.
    </small>
  </li>
  <li class="c8y-right-drawer__item">
    <button
      class="btn btn-default btn-sm"
      title="{{ 'Manage beta features' | translate }}"
      [attr.tabindex]="(open$ | async) ? '0' : '-1'"
      (click)="openBetaPreview()"
    >
      <i class="m-t-0 m-b-9 text-14 dlt-c8y-icon-settings"></i>
      <span translate>Manage beta features</span>
    </button>
  </li>
</ul>