@if (transfers.hasJobs()) {
  <div class="max-h-40 overflow-y-auto border-t border-border">
    @for (job of transfers.jobs(); track job.id) {
      <div class="flex items-center gap-2 px-3 py-1.5 text-xs">
        <ng-icon [name]="stateIcon(job)" size="0.95rem" [class]="stateClass(job)" />
        <span class="w-40 shrink-0 truncate font-medium" [title]="job.srcPath">{{ job.name }}</span>
        <div class="min-w-0 flex-1">
          <div class="truncate text-[11px] text-muted-foreground">{{ progressLabel(job) }}</div>
          @if (isActive(job)) {
            <div class="mt-0.5 h-1 overflow-hidden rounded-full bg-muted">
              <div
                class="h-full rounded-full bg-primary transition-[width] duration-100"
                [style.width.%]="jobPercent(job)"
              ></div>
            </div>
          }
        </div>
        @if (isActive(job)) {
          <button
            (click)="transfers.cancel(job.id)"
            title="Cancel"
            class="shrink-0 rounded p-1 text-muted-foreground hover:bg-accent hover:text-destructive"
          >
            <ng-icon name="mynaX" size="0.9rem" />
          </button>
        } @else {
          <button
            (click)="transfers.dismiss(job.id)"
            title="Dismiss"
            class="shrink-0 rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
          >
            <ng-icon name="mynaX" size="0.9rem" />
          </button>
        }
      </div>
    }
  </div>
}