<remark
  [markdown]="displayContent()"
  [processor]="$any(remarkProcessor)"
>
  <ng-template
    [remarkTemplate]="'code'"
    let-node
  >
    @if (isMermaidCodeBlock(node.lang) && getMermaidCode(node.value)) {
      <remark-mermaid [code]="getMermaidCode(node.value)" />
    } @else {
      <pre [class]="getCodeBlockClass(node.lang)"><code [class]="getCodeBlockClass(node.lang)">{{ node.value }}</code></pre>
    }
  </ng-template>
  <ng-template
    [remarkTemplate]="'image'"
    let-node
  >
    <div
      class="relative inline-block overflow-hidden"
      [attr.data-custom-emoji]="isCustomEmojiMarkdownImage(node.alt) ? '' : null"
      [attr.data-custom-emoji-id]="getCustomEmojiId(node.alt)"
      [class.rounded-md]="!isCustomEmojiDataUrl(node.url)"
      [class.align-text-bottom]="isCustomEmojiDataUrl(node.url)"
      [class.mt-2]="!isCustomEmojiDataUrl(node.url)"
      [class.border]="!isCustomEmojiDataUrl(node.url)"
      [class.border-border\/60]="!isCustomEmojiDataUrl(node.url)"
      [class.bg-secondary\/20]="!isCustomEmojiDataUrl(node.url)"
    >
      <img
        [appChatImageProxyFallback]="node.url"
        [alt]="getCustomEmojiAlt(node.alt) || ('chat.markdown.sharedImage' | translate)"
        class="block object-contain"
        [class.chat-custom-emoji-image]="isCustomEmojiDataUrl(node.url)"
        [style.height]="isCustomEmojiDataUrl(node.url) ? (largeCustomEmoji() ? '46px' : '1.2em') : null"
        [style.width]="isCustomEmojiDataUrl(node.url) ? (largeCustomEmoji() ? '46px' : '1.2em') : null"
        [style.max-height]="isCustomEmojiDataUrl(node.url) ? (largeCustomEmoji() ? '46px' : '1.2em') : null"
        [style.max-width]="isCustomEmojiDataUrl(node.url) ? (largeCustomEmoji() ? '46px' : '1.2em') : null"
        [class.inline]="isCustomEmojiDataUrl(node.url)"
        [class.h-[1.2em]]="isCustomEmojiDataUrl(node.url) && !largeCustomEmoji()"
        [class.w-[1.2em]]="isCustomEmojiDataUrl(node.url) && !largeCustomEmoji()"
        [class.h-[46px]]="shouldRenderLargeCustomEmoji(node.url)"
        [class.w-[46px]]="shouldRenderLargeCustomEmoji(node.url)"
        [class.max-h-80]="!isCustomEmojiDataUrl(node.url)"
        [class.max-w-full]="!isCustomEmojiDataUrl(node.url)"
        [class.w-auto]="!isCustomEmojiDataUrl(node.url)"
        loading="lazy"
      />
      @if (isKlipyMediaUrl(node.url)) {
        <span
          class="pointer-events-none absolute bottom-2 left-2 rounded-full bg-black/70 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-[0.24em] text-white/90 backdrop-blur-sm"
        >
          {{ 'chat.markdown.klipy' | translate }}
        </span>
      }
    </div>
  </ng-template>
  <ng-template
    [remarkTemplate]="'text'"
    let-node
  >
    @for (segment of splitTextIntoEmojiSegments(node.value); track $index) {
      @if (segment.kind === 'emoji') {
        <span [class.chat-inline-emoji-large]="largeUnicodeEmoji()">{{ segment.value }}</span>
      } @else {
        <span>{{ segment.value }}</span>
      }
    }
  </ng-template>
  <ng-template
    [remarkTemplate]="'link'"
    let-node
  >
    <a
      [href]="node.url"
      [title]="node.title ?? ''"
      [remarkNode]="node"
    ></a>
    @if (isYoutubeUrl(node.url)) {
      <div class="block">
        <app-chat-youtube-embed [url]="node.url" />
      </div>
    } @else if (isSpotifyUrl(node.url)) {
      <div class="block">
        <app-chat-spotify-embed [url]="node.url" />
      </div>
    } @else if (isSoundcloudUrl(node.url)) {
      <div class="block">
        <app-chat-soundcloud-embed [url]="node.url" />
      </div>
    }
  </ng-template>
</remark>
