<!-- eslint-disable @angular-eslint/template/prefer-ngsrc -->
@if (metadata(); as meta) {
  @if (!meta.failed && (meta.title || meta.description)) {
    <div class="group/embed relative mt-2 max-w-[480px] overflow-hidden rounded-md border border-border/60 bg-secondary/20">
      @if (canRemove()) {
        <button
          type="button"
          (click)="removed.emit()"
          class="absolute right-1.5 top-1.5 z-10 grid h-5 w-5 place-items-center rounded bg-background/80 text-muted-foreground opacity-0 backdrop-blur-sm transition-opacity hover:text-foreground group-hover/embed:opacity-100"
        >
          <ng-icon
            name="lucideX"
            class="h-3 w-3"
          />
        </button>
      }
      <div class="flex">
        @if (meta.imageUrl) {
          <img
            [src]="meta.imageUrl"
            [alt]="meta.title || ('chat.linkEmbed.previewAlt' | translate)"
            class="hidden h-auto w-28 flex-shrink-0 object-cover sm:block"
            loading="lazy"
            referrerpolicy="no-referrer"
          />
        }
        <div class="flex min-w-0 flex-1 flex-col gap-0.5 p-3">
          @if (meta.siteName) {
            <span class="truncate text-xs text-muted-foreground">{{ meta.siteName }}</span>
          }
          @if (meta.title) {
            <a
              [href]="meta.url"
              target="_blank"
              rel="noopener noreferrer"
              class="line-clamp-2 text-sm font-semibold text-foreground hover:underline"
              >{{ meta.title }}</a
            >
          }
          @if (meta.description) {
            <span class="line-clamp-2 text-xs text-muted-foreground">{{ meta.description }}</span>
          }
        </div>
      </div>
    </div>
  }
}
