@if (files().length > 0) {
  <span [id]="labelId" class="tw-sr-only">{{ "uploadedFiles" | i18n }}</span>
  <ul [attr.aria-labelledby]="labelId" class="tw-list-none tw-p-0 tw-m-0">
    @for (file of files(); track $index) {
      <li class="tw-flex tw-items-center tw-gap-3 tw-py-2 tw-border-b tw-border-border-light">
        <bit-icon-tile icon="bwi-file" variant="subtle" size="sm" />
        <div class="tw-flex tw-flex-col tw-flex-1 tw-min-w-0">
          <bit-file-name [name]="file.name" />
          <span class="tw-text-xs tw-text-muted">{{ formatFileSize(file.size) }}</span>
        </div>
        @if (!disabled()) {
          <button
            #deleteBtn
            type="button"
            bitIconButton="bwi-trash"
            buttonType="dangerGhost"
            size="small"
            [label]="['delete' | i18n, file.name].join(' ')"
            (click)="fileRemoved.emit(file)"
          ></button>
        }
      </li>
    }
  </ul>
}