<ng-container *ngIf="helpAndSupport$ | async as helpAndSupport">
  <div
    class="separator-top p-t-8 p-b-8"
    *ngIf="(appState$ | async).showRightDrawer && helpAndSupport.length"
  >
    <button
      class="c8y-right-drawer__link sticky-top"
      [tabindex]="(drawerOpen$ | async) ? '0' : '-1'"
      [attr.aria-expanded]="documentationOpen"
      [attr.aria-controls]="'collapseDocs'"
      type="button"
      (click)="documentationOpen = !documentationOpen"
    >
      <i c8yIcon="book-shelf"></i>
      <span class="text-bold">{{ 'Documentation' | translate }}</span>
      <i
        class="m-l-auto"
        c8yIcon="angle-down"
        [ngClass]="{ 'icon-rotate-180': documentationOpen }"
      ></i>
    </button>
    <div
      class="collapse"
      id="collapseDocs"
      [collapse]="!documentationOpen"
      [isAnimated]="true"
      #documentationCol="bs-collapse"
    >
      <ng-container *ngFor="let link of helpAndSupport">
        <ng-container *ngIf="link.component">
          <ng-container *c8yComponentOutlet="link.component; environmentInjector: link.injector"></ng-container>
        </ng-container>
        <a
          class="c8y-right-drawer__link"
          title="{{ link.label | translate }}"
          [tabindex]="(drawerOpen$ | async) ? '0' : '-1'"
          type="button"
          target="_blank"
          *ngIf="!link.component"
          rel="noopener noreferrer"
          [href]="link.url"
          c8yProductExperience
          [actionName]="PRODUCT_EXPERIENCE.QUICK_LINKS.EVENTS.QUICK_LINK_RIGHT_DRAWER"
          [actionData]="{
            component: PRODUCT_EXPERIENCE.QUICK_LINKS.COMPONENTS.RIGHT_DRAWER_COMPONENT,
            action: link.label
          }"
        >
          <span
            class="text-truncate text-12"
            title="{{ link.label | translate }}"
          >
            {{ link.label | translate }}
          </span>
        </a>
      </ng-container>
    </div>
  </div>
</ng-container>