File Upload

<pk-file-upload
  #fu
  accept=".jpg,.png,.pdf"
  (filesAdded)="addFiles($event)"
>
  <!-- spartan input-group: chips above, textarea, actions below -->
  <div hlmInputGroup class="rounded-3xl">
    @if (files().length) {
      <div hlmInputGroupAddon align="block-start" class="grid grid-cols-2 gap-2">
        @for (f of files(); track $index) {
          <div class="bg-secondary flex items-center justify-between gap-2 rounded-lg px-3 py-2 text-sm">
            <span class="truncate">{{ f.name }}</span>
            <button hlmBtn variant="ghost" size="icon-xs" (click)="removeFile($index)">
              <ng-icon name="lucideX" class="text-[length:--spacing(3)]" />
            </button>
          </div>
        }
      </div>
    }

    <textarea
      hlmInputGroupTextarea
      placeholder="Type a message or drop files..."
      [value]="input()"
      (input)="input.set($any($event.target).value)"
      (keydown.enter)="onEnter($event)"
    ></textarea>

    <div hlmInputGroupAddon align="block-end" class="justify-between">
      <button hlmBtn variant="ghost" size="icon-sm" hlmTooltip="Attach files"
              (click)="fu.openPicker(); $event.stopPropagation()">
        <ng-icon name="lucidePaperclip" class="text-[length:--spacing(4)]" />
      </button>
      <button hlmBtn size="icon-sm" hlmTooltip="Send" (click)="onSubmit()">
        <ng-icon name="lucideArrowUp" class="text-[length:--spacing(3)]" />
      </button>
    </div>
  </div>

  <pk-file-upload-content>
    <div class="flex min-h-[200px] w-full items-center justify-center backdrop-blur-sm">
      <div class="bg-background/90 border-border m-4 max-w-md rounded-lg border p-8 shadow-lg text-center">
        <ng-icon name="lucideUpload" class="text-[length:--spacing(8)] text-muted-foreground" />
        <h3 class="text-base font-medium">Drop files to upload</h3>
        <p class="text-muted-foreground text-sm">Release to add files to your message</p>
      </div>
    </div>
  </pk-file-upload-content>
</pk-file-upload>