@for (section of sections(); track section.testId) {
    <section
        class="recording-queue"
        [attr.data-test-id]="section.testId"
        [attr.aria-labelledby]="section.headingId"
    >
        <h2 class="recording-queue__heading" [id]="section.headingId">
            <span class="recording-queue__heading-label">
                {{ section.headingKey | translate }}
            </span>
            <span class="app-count-badge" aria-hidden="true">
                {{ section.items.length }}
            </span>
        </h2>

        <div class="recording-queue__list" role="list">
            @for (row of section.items; track row.item.id) {
                <article
                    class="recording-queue__item"
                    [class.recording-queue__item--pending]="
                        isPending(row.item.id)
                    "
                    [class.recording-queue__item--attention]="
                        row.attentionReason !== null
                    "
                    [attr.aria-busy]="isPending(row.item.id) ? 'true' : null"
                    [attr.data-test-id]="'recording-queue-item-' + row.item.id"
                    role="listitem"
                >
                    <button
                        type="button"
                        class="recording-queue__artwork"
                        data-test-control="artwork"
                        [attr.aria-label]="
                            'DOWNLOADS.ARIA.OPEN'
                                | translate
                                    : {
                                          title:
                                              row.programTitle ||
                                              row.channelName,
                                      }
                        "
                        [disabled]="isPending(row.item.id)"
                        (click)="requestOpen(row.item)"
                    >
                        @if (row.item.channelLogoUrl) {
                            <img
                                [src]="row.item.channelLogoUrl"
                                alt=""
                                loading="lazy"
                                decoding="async"
                            />
                        } @else {
                            <span
                                class="recording-queue__logo-placeholder"
                                aria-hidden="true"
                            >
                                <mat-icon>live_tv</mat-icon>
                            </span>
                        }
                    </button>

                    <div class="recording-queue__content">
                        <div class="recording-queue__title-line">
                            @if (row.item.status === 'recording') {
                                <span
                                    class="recording-queue__rec-chip"
                                    role="status"
                                    aria-live="off"
                                >
                                    <span
                                        class="recording-queue__rec-dot"
                                        aria-hidden="true"
                                    ></span>
                                    REC&nbsp;{{ elapsedLabel(row.item) }}
                                </span>
                            }
                            <button
                                type="button"
                                class="recording-queue__title"
                                data-test-control="title"
                                [disabled]="isPending(row.item.id)"
                                (click)="requestOpen(row.item)"
                            >
                                {{
                                    row.programTitle ||
                                        row.channelName +
                                            ' — ' +
                                            (row.item.startedAt
                                                | date: 'd MMM, HH:mm')
                                }}
                            </button>
                        </div>

                        <div class="recording-queue__metadata">
                            @if (row.attentionReason !== null) {
                                <span class="recording-queue__warn-chip">
                                    <mat-icon aria-hidden="true">
                                        {{
                                            row.attentionReason ===
                                            'file-missing'
                                                ? 'file_off'
                                                : 'error'
                                        }}
                                    </mat-icon>
                                    {{ attentionStatusKey(row) | translate }}
                                </span>
                            }
                            <span class="recording-queue__channel">
                                {{ row.channelName }}
                            </span>
                            @if (row.item.status === 'recording') {
                                <span class="recording-queue__bytes">
                                    {{ formatBytes(row.item.fileSizeBytes) }}
                                </span>
                            } @else if (row.item.fileSizeBytes) {
                                <span class="recording-queue__bytes">
                                    {{ formatBytes(row.item.fileSizeBytes) }}
                                </span>
                            }
                            @if (row.item.errorMessage?.trim(); as error) {
                                <span class="recording-queue__error">
                                    {{ error }}
                                </span>
                            }
                        </div>

                        @if (row.item.status === 'recording') {
                            <div
                                class="recording-queue__progress"
                                aria-hidden="true"
                            ></div>
                        }
                    </div>

                    <div class="recording-queue__actions">
                        @if (row.item.status === 'recording') {
                            <button
                                type="button"
                                mat-icon-button
                                class="recording-queue__stop"
                                data-test-action="stop-recording"
                                [matTooltip]="
                                    'DOWNLOADS.STOP_RECORDING' | translate
                                "
                                [attr.aria-label]="
                                    'DOWNLOADS.STOP_RECORDING' | translate
                                "
                                [disabled]="isPending(row.item.id)"
                                (click)="emitAction('stop', row.item)"
                            >
                                <mat-icon>stop</mat-icon>
                            </button>
                        } @else {
                            <button
                                type="button"
                                mat-stroked-button
                                data-test-action="remove-recording"
                                [disabled]="isPending(row.item.id)"
                                (click)="emitAction('remove', row.item)"
                            >
                                {{ 'DOWNLOADS.REMOVE_FROM_MANAGER' | translate }}
                            </button>
                        }

                        <button
                            type="button"
                            mat-icon-button
                            class="recording-queue__more"
                            data-test-action="more"
                            [matMenuTriggerFor]="rowMenu"
                            [attr.aria-label]="
                                'DOWNLOADS.MORE_ACTIONS' | translate
                            "
                            [disabled]="isPending(row.item.id)"
                        >
                            <mat-icon>more_vert</mat-icon>
                        </button>
                        <mat-menu #rowMenu="matMenu" xPosition="before">
                            <app-download-source-menu-header
                                [sourceName]="row.item.playlistName ?? ''"
                            />
                            @if (row.attentionReason === null) {
                                <button
                                    mat-menu-item
                                    data-test-action="reveal-recording"
                                    (click)="emitAction('reveal', row.item)"
                                >
                                    <mat-icon>folder_open</mat-icon>
                                    <span>
                                        {{ 'DOWNLOADS.REVEAL' | translate }}
                                    </span>
                                </button>
                            }
                            @if (row.item.status !== 'recording') {
                                <button
                                    mat-menu-item
                                    data-test-action="menu-remove-recording"
                                    (click)="emitAction('remove', row.item)"
                                >
                                    <mat-icon>remove_circle_outline</mat-icon>
                                    <span>
                                        {{
                                            'DOWNLOADS.REMOVE_FROM_MANAGER'
                                                | translate
                                        }}
                                    </span>
                                </button>
                            }
                        </mat-menu>
                    </div>
                </article>
            }
        </div>
    </section>
}