<aside class="c8y-right-drawer" [cdkTrapFocus]="drawerOpen">
<!-- drawer header -->
  <div class="c8y-right-drawer__header separator-bottom">
    <button type="button" class="close" title="{{'Close' | translate}}" (click)="close()">&times;</button>
    <div class="d-flex a-i-center">
      <div class="user-dot"> {{appState.currentUser | async | userNameInitials}}</div>
      <div class="min-width-0">
        <p
          *ngIf="appState.currentUser | async"
          class="text-truncate text-medium text-16"
          title="{{appState.currentUser | async | shortenUserName}}"
        >
          {{appState.currentUser | async | shortenUserName}}
        </p>
        <small *ngIf="appState.currentUser | async | userRolesList as userRoles" [title]="userRoles" class="text-truncate">{{ userRoles }}</small>
      </div>
    </div>
  </div>

  <!-- user menu -->
  <c8y-user-menu-outlet
    [items]="(userMenuService.items$ | async)"
    class="c8y-right-drawer__container"
  ></c8y-user-menu-outlet>

  <!-- Version list -->
  <c8y-version-list *ngIf="showPlatformInformation"></c8y-version-list>

<!-- quicklinks > bookmarks -->
  <div *ngIf="(appState$ | async).showRightDrawer && quickLinks.length"
    class="separator-top p-t-8 p-b-8">
    <div class="c8y-right-drawer__item sticky-top">
      <i c8yIcon="bookmark"></i>
      <span class="text-bold">{{ 'Quick links' | translate }}</span>
    </div>

    <ng-container *ngFor="let quickLink of quickLinks">
      <ng-container *ngIf="quickLink.component">
        <ng-container
          *ngComponentOutlet="quickLink.component; injector: quickLink.injector"
        ></ng-container>
      </ng-container>
      <a
        *ngIf="!quickLink.component"
        title="{{ quickLink.label | translate }}"
        type="button"
        class="c8y-right-drawer__link"
        [href]="quickLink.url || '#'"
        (click)="quickLink.click && $event.preventDefault(); quickLink.click && quickLink.click()"
        c8yProductExperience
        [actionName]="'quickLinkRightDrawer:' + quickLink.label"
        [actionData]=""
        tabindex="{{ drawerOpen ? '0' : '-1' }}"
      >
        <i *ngIf="quickLink.icon" class="{{ quickLink.icon }} c8y-icon-duocolor"></i>
        <img
          *ngIf="quickLink.iconSrc"
          [src]="quickLink.iconSrc"
          style="max-width: 20px"
          class="img-responsive"
          onerror="this.style.display = 'none'"
        />
        <span>{{ quickLink.label | translate }}</span>
      </a>
    </ng-container>

  </div>

  <div *ngIf="(appState$ | async).showRightDrawer && helpAndSupport.length"
    class="separator-top p-t-8 p-b-8">
    <button type="button" class="c8y-right-drawer__link sticky-top" (click)="documentationOpen = !documentationOpen"
      [attr.aria-expanded]="!documentationCol.isCollapsed" [attr.aria-controls]="'collapseDocs'">
      <i c8yIcon="book-shelf"></i>
      <span class="text-bold">{{ 'Documentation' | translate }}</span>
      <i c8yIcon="angle-down" class="m-l-auto" [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 *ngComponentOutlet="link.component; injector: link.injector"></ng-container>
        </ng-container>
        <a
          *ngIf="!link.component"
          title="{{ link.label | translate }}"
          type="button"
          class="c8y-right-drawer__link"
          target="_blank"
          rel="noopener noreferrer"
          [href]="link.url"
          c8yProductExperience
          [actionName]="'quickLinkRightDrawer:' + link.label"
          [actionData]=""
          tabindex="{{ drawerOpen ? '0' : '-1' }}"
        >
          <span title="{{ link.label | translate }}" class="text-truncate text-12">
            {{ link.label | translate }}
          </span>
        </a>
      </ng-container>
    </div>
  </div>

  <!-- TODO: move legal notices here -->
  <!-- <div class="separator-top p-t-8 m-t-auto">
    <a href="#" class="c8y-right-drawer__link">
      <small>Legal notices</small>
    </a>
  </div> -->
</aside>