<div class="c8y-right-drawer">
  <div class="summary">
    <h4 class="text-light">
      {{ 'Welcome to' | translate }} {{ app | humanizeAppName | async }}
    </h4>
  </div>

  <div *ngIf="quickLinks.length">
    <div class="legend form-block" translate>Quick links</div>
    <div class="quick-links-drawer">
      <ng-container *ngFor="let quickLink of quickLinks">
        <a
          class="quick-link"
          [href]="quickLink.url || '#'"
          (click)="quickLink.click && $event.preventDefault(); quickLink.click && quickLink.click();"
          c8yProductExperience
          [actionName]="'quickLinkRightDrawer:' + quickLink.label"
          [actionData]=""
        >
          <h2 *ngIf="quickLink.icon"><i class="{{ quickLink.icon }}"></i></h2>
          <img
            *ngIf="quickLink.iconSrc"
            [src]="quickLink.iconSrc"
            style="max-width:50px;"
            class="img-responsive center-block"
            onerror="this.style.display = 'none'">
          {{ quickLink.label | translate }}
        </a>
      </ng-container>
    </div>
  </div>

  <div *ngIf="helpAndSupport.length">
    <div class="legend form-block m-t-24" translate>Help &amp; support</div>
    <div class="help-support" *ngFor="let link of helpAndSupport">
      <a
        class="help-and-support-link text-truncate"
        target="_blank"
        rel="noopener noreferrer"
        [href]="link.url"
        c8yProductExperience
        [actionName]="'quickLinkRightDrawer:' + link.label"
        [actionData]=""
      >
        <i [c8yIcon]="link.icon"></i>
        <span title="{{ link.label | translate }}" class="d-inline">
          {{ link.label | translate }}
        </span>
      </a>
    </div>
  </div>
</div>