@let links = config().links;
@let pointerNoneStylesPreview = isPreview() ? { 'pointer-events': 'none' } : null;

@if (config().displayOption === DisplayOption.GRID) {
  @if (links?.length) {
    <div class="card-group-block interact-grid border-top m-b-0">
      @for (link of links; track $index) {
        @let linkLabel = config().translateLinkLabels ? (link.label | translate) : link.label;
        <a
          class="card card--btn pointer"
          [ngStyle]="pointerNoneStylesPreview"
          [title]="linkLabel"
          [ngClass]="{
            disabled: isPreview()
          }"
          data-cy="c8y-quick-links-widget-view--quick-link-card"
          [attr.role]="isPreview() ? null : 'button'"
          [target]="!isPreview() && link.newTab ? '_blank' : '_self'"
          [attr.rel]="isPreview() ? null : 'noopener noreferrer'"
          [attr.href]="isPreview() ? null : (link.url | relativeUrlParser)"
        >
          @if (link.newTab && !isPreview()) {
            <div
              class="card-actions showOnHover"
              title="{{ 'Open in new tab' | translate }}"
            >
              <span class="dropdown-toggle c8y-dropdown">
                <i c8yIcon="external-link"></i>
              </span>
            </div>
          }

          <div class="card-block text-center">
            <div class="icon-32">
              @if (link.icon) {
                <i
                  class="c8y-icon-duocolor"
                  [c8yIcon]="link.icon"
                ></i>
              } @else {
                <c8y-app-icon
                  [name]="link.app.name"
                  [app]="link.app"
                  [contextPath]="link.app.contextPath"
                ></c8y-app-icon>
              }
            </div>
            <small class="text-muted">
              {{ linkLabel }}
            </small>
          </div>
        </a>
      }
    </div>
  } @else {
    <c8y-ui-empty-state
      [icon]="DEFAULT_QUICK_LINK_ICON"
      [title]="'No quick links to display.' | translate"
      [horizontal]="true"
    ></c8y-ui-empty-state>
  }
} @else {
  @if (links?.length) {
    <div class="separator-top">
      @for (link of links; track $index) {
        @let linkLabel = config().translateLinkLabels ? (link.label | translate) : link.label;
        <a
          class="d-flex a-i-center btn-clean gap-8 p-16 text-truncate separator-bottom"
          [ngStyle]="pointerNoneStylesPreview"
          [title]="linkLabel"
          data-cy="c8y-quick-links-widget-view--quick-link-list-item"
          [attr.role]="isPreview() ? null : 'button'"
          [target]="!isPreview() && link.newTab ? '_blank' : '_self'"
          [attr.rel]="isPreview() ? null : 'noopener noreferrer'"
          [attr.href]="isPreview() ? null : (link.url | relativeUrlParser)"
        >
          @if (link.icon) {
            <i
              class="c8y-icon-duocolor icon-24"
              [c8yIcon]="link.icon"
            ></i>
          } @else {
            <c8y-app-icon
              [name]="link.app.name"
              [app]="link.app"
              [contextPath]="link.app.contextPath"
            ></c8y-app-icon>
          }

          <span
            class="text-truncate"
            [title]="linkLabel"
          >
            {{ linkLabel }}
          </span>
          @if (link.newTab) {
            <i
              class="text-muted m-l-auto showOnHover"
              [c8yIcon]="'external-link'"
              title="{{ 'Open in new tab' | translate }}"
            ></i>
          }
        </a>
      }
    </div>
  } @else {
    <c8y-ui-empty-state
      [icon]="DEFAULT_QUICK_LINK_ICON"
      [title]="'No quick links to display.' | translate"
      [horizontal]="true"
    ></c8y-ui-empty-state>
  }
}