@if (transfers.expanded() && transfers.hasJobs()) {
  <div class="flex items-center justify-between border-t border-border bg-chrome px-3 py-1 text-[11px] text-muted-foreground">
    <span>
      {{ i18n.t('transfer.summary', { active: transfers.activeJobs().length, finished: transfers.finishedJobs().length }) }}
    </span>
    <button
      (click)="transfers.clearFinished()"
      [disabled]="!transfers.finishedJobs().length"
      class="flex items-center gap-1 rounded px-1.5 py-0.5 hover:bg-accent hover:text-foreground disabled:opacity-40 disabled:hover:bg-transparent"
    >
      <ng-icon name="mynaTrash" size="0.75rem" /> {{ i18n.t('transfer.clearFinished') }}
    </button>
  </div>
  <div class="has-scrollbar max-h-40 overflow-y-auto border-t border-border bg-chrome">
    @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)) {
            <!-- role+aria are 7.css's hook for the Win7 progress bar
                 ([role=progressbar] > div); under the modern skin they are
                 inert and the Tailwind classes below still draw the bar. -->
            <div
              role="progressbar"
              aria-valuemin="0"
              aria-valuemax="100"
              [attr.aria-valuenow]="jobPercent(job)"
              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]="i18n.t('transfer.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]="i18n.t('transfer.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>
}