<div
  appThemeNode="contextMenuSurface"
  class="w-80 rounded-lg border border-border bg-card p-3 shadow-xl"
  role="menu"
  [attr.aria-label]="'plugins.actionMenu.menuAria' | translate"
  style="animation: profile-card-in 120ms cubic-bezier(0.2, 0, 0, 1) both"
>
  <div class="mb-3 flex items-center justify-between gap-3">
    <div class="min-w-0">
      <p class="text-sm font-semibold text-foreground">{{ 'plugins.actionMenu.title' | translate }}</p>
      <p class="truncate text-xs text-muted-foreground">
        {{ 'plugins.actionMenu.availableActions' | translate: { count: actions().length } }}
      </p>
    </div>
    <button
      type="button"
      class="grid h-7 w-7 shrink-0 place-items-center rounded-md text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground"
      [attr.aria-label]="'plugins.actionMenu.closeAria' | translate"
      [title]="'plugins.actionMenu.close' | translate"
      (click)="close()"
    >
      <ng-icon
        name="lucideX"
        class="h-4 w-4"
      />
    </button>
  </div>

  @if (actions().length > 0) {
    <div class="grid max-h-80 grid-cols-3 gap-2 overflow-auto pr-1">
      @for (record of actions(); track record.id) {
        <button
          type="button"
          class="group flex min-h-20 flex-col items-center justify-start gap-2 rounded-md px-2 py-2 text-center transition-colors hover:text-foreground focus:outline-none focus:ring-2 focus:ring-primary/60"
          role="menuitem"
          [attr.aria-label]="actionTitle(record)"
          [title]="actionTitle(record)"
          (click)="runAction(record)"
        >
          <span
            class="grid h-11 w-11 shrink-0 place-items-center overflow-hidden rounded-md border border-border bg-secondary text-xs font-semibold text-foreground transition-colors group-hover:border-primary/40"
          >
            @if (isImageIcon(record)) {
              <img
                class="h-full w-full object-cover"
                [src]="iconText(record)"
                [alt]="record.contribution.label"
              />
            } @else {
              <span class="max-w-full truncate px-1">{{ iconText(record) }}</span>
            }
          </span>
          <span class="line-clamp-2 min-h-8 text-[11px] font-medium leading-4 text-foreground">
            {{ record.contribution.label }}
          </span>
        </button>
      }
    </div>
  } @else {
    <p class="rounded-md border border-dashed border-border bg-background/40 px-3 py-4 text-center text-sm text-muted-foreground">
      {{ 'plugins.actionMenu.empty' | translate }}
    </p>
  }
</div>
