<button
  class="c8y-right-drawer__link sticky-top"
  [tabindex]="tabIndex$ | async"
  type="button"
  (click)="isCollapsed = !isCollapsed"
  *ngIf="isCollapsible"
>
  <i c8yIcon="c8y-c8y-support"></i>
  <span class="text-bold">{{ 'Support' | translate }}</span>
  <i
    class="m-l-auto"
    c8yIcon="angle-up"
    [ngClass]="{ 'icon-rotate-180': isCollapsed }"
  ></i>
</button>
<div
  class="collapse"
  id="collapseSupport"
  [collapse]="isCollapsed"
  [isAnimated]="true"
>
  <button
    class="c8y-right-drawer__link"
    title="{{ 'Activate support access' | translate }}"
    [tabindex]="tabIndex$ | async"
    *ngIf="!(supportUserEnabled$ | async) && userSupportAvailable"
    (click)="activateSupportAccess()"
    c8yProductExperience
    [actionName]="PRODUCT_EXPERIENCE.QUICK_LINKS.EVENTS.QUICK_LINK_RIGHT_DRAWER"
    [actionData]="{ action: PRODUCT_EXPERIENCE.QUICK_LINKS.ACTIONS.ACTIVATE_SUPPORT_ACCESS }"
  >
    <i
      c8yIcon="c8y-c8y-support"
      *ngIf="!isCollapsible"
    ></i>
    <span
      [class]="textClass"
      title="{{ 'Activate support access' | translate }}"
    >
      {{ 'Activate support access' | translate }}
    </span>
  </button>
  <button
    class="c8y-right-drawer__link"
    title="{{ 'Deactivate support access' | translate }}"
    [tabindex]="tabIndex$ | async"
    *ngIf="(supportUserEnabled$ | async) && userSupportAvailable"
    (click)="deactivateSupportAccess()"
    c8yProductExperience
    [actionName]="PRODUCT_EXPERIENCE.QUICK_LINKS.EVENTS.QUICK_LINK_RIGHT_DRAWER"
    [actionData]="{ action: PRODUCT_EXPERIENCE.QUICK_LINKS.ACTIONS.DEACTIVATE_SUPPORT_ACCESS }"
  >
    <i
      c8yIcon="c8y-c8y-support"
      *ngIf="!isCollapsible"
    ></i>
    <span
      [class]="textClass"
      title="{{ 'Deactivate support access' | translate }}"
    >
      {{ 'Deactivate support access' | translate }}
    </span>
  </button>
  <a
    class="c8y-right-drawer__link"
    title="{{ 'Request support' | translate }}"
    [tabindex]="tabIndex$ | async"
    role="button"
    target="_blank"
    [ngClass]="{ 'separator-top': !isCollapsible }"
    *ngIf="supportUrl"
    rel="noopener noreferrer"
    [href]="supportUrl"
    c8yProductExperience
    [actionName]="PRODUCT_EXPERIENCE.QUICK_LINKS.EVENTS.QUICK_LINK_RIGHT_DRAWER"
    [actionData]="{ action: PRODUCT_EXPERIENCE.QUICK_LINKS.ACTIONS.OPEN_SUPPORT_LINK }"
  >
    <i
      c8yIcon="c8y-c8y-support"
      *ngIf="!isCollapsible"
    ></i>
    <span
      [class]="textClass"
      title="{{ 'Request support' | translate }}"
    >
      {{ 'Request support' | translate }}
    </span>
  </a>
</div>