@if (entities().length > 0) {
    <section
        class="download-library"
        data-test-id="downloads-library-section"
        aria-labelledby="downloads-library-heading"
    >
        <header class="download-library__header">
            <h2 id="downloads-library-heading">
                <span>{{ 'DOWNLOADS.READY_TO_WATCH' | translate }}</span>
                <span class="app-count-badge" aria-hidden="true">
                    {{ entities().length }}
                </span>
            </h2>
        </header>
        <div class="download-library__grid">
            @for (entity of entities(); track entity.key) {
                <article
                    class="download-library__card"
                    [attr.data-test-id]="libraryTestId(entity)"
                >
                    <div class="download-library__artwork">
                        <button
                            type="button"
                            class="download-library__artwork-button"
                            [attr.data-test-id]="
                                entity.kind === 'series'
                                    ? 'download-library-series-open'
                                    : null
                            "
                            [disabled]="isPending(representativeOf(entity))"
                            [attr.aria-label]="
                                (entity.kind === 'catchup'
                                    ? 'DOWNLOADS.PLAY'
                                    : 'DOWNLOADS.OPEN_ARTWORK'
                                ) | translate: { title: entityTitle(entity) }
                            "
                            (click)="openDetails(representativeOf(entity))"
                        >
                            @if (artworkUrl(entity); as artwork) {
                                <img
                                    [src]="artwork"
                                    alt=""
                                    loading="lazy"
                                    decoding="async"
                                    (error)="markArtworkFailed(entity, $event)"
                                />
                            } @else {
                                <span
                                    class="download-library__placeholder"
                                    role="img"
                                    [attr.aria-label]="
                                        ('DOWNLOADS.ARTWORK_UNAVAILABLE'
                                            | translate) +
                                        ': ' +
                                        entityTitle(entity)
                                    "
                                >
                                    <mat-icon aria-hidden="true">
                                        {{ placeholderIcon(entity) }}
                                    </mat-icon>
                                </span>
                            }
                        </button>

                        <span class="download-library__type">
                            {{ typeKey(entity) | translate }}
                        </span>

                        <button
                            mat-icon-button
                            type="button"
                            class="download-library__more"
                            [matMenuTriggerFor]="itemMenu"
                            [disabled]="moreDisabled(entity)"
                            [attr.aria-label]="
                                ('DOWNLOADS.MORE_ACTIONS' | translate) +
                                ': ' +
                                entityTitle(entity)
                            "
                            [matTooltip]="'DOWNLOADS.MORE_ACTIONS' | translate"
                        >
                            <mat-icon aria-hidden="true">more_vert</mat-icon>
                        </button>
                        <mat-menu #itemMenu="matMenu" xPosition="before">
                            <app-download-source-menu-header
                                [sourceName]="entity.sourceName"
                            />
                            @if (entity.kind === 'series') {
                                <button
                                    mat-menu-item
                                    type="button"
                                    [attr.aria-label]="
                                        ('DOWNLOADS.OPEN_EPISODES'
                                            | translate) +
                                        ': ' +
                                        entity.title
                                    "
                                    (click)="openEpisodes(entity)"
                                >
                                    <mat-icon aria-hidden="true">
                                        video_library
                                    </mat-icon>
                                    <span>
                                        {{
                                            'DOWNLOADS.OPEN_EPISODES'
                                                | translate
                                        }}
                                    </span>
                                </button>
                            } @else {
                                <button
                                    mat-menu-item
                                    type="button"
                                    [disabled]="isPending(entity.item)"
                                    [attr.aria-label]="
                                        ('DOWNLOADS.PLAY' | translate) +
                                        ': ' +
                                        entity.item.title
                                    "
                                    (click)="emitAction('play', entity.item)"
                                >
                                    <mat-icon aria-hidden="true">
                                        play_arrow
                                    </mat-icon>
                                    <span>
                                        {{ 'DOWNLOADS.PLAY' | translate }}
                                    </span>
                                </button>
                                <button
                                    mat-menu-item
                                    type="button"
                                    [disabled]="isPending(entity.item)"
                                    [attr.aria-label]="
                                        ('DOWNLOADS.REVEAL' | translate) +
                                        ': ' +
                                        entity.item.title
                                    "
                                    (click)="emitAction('reveal', entity.item)"
                                >
                                    <mat-icon aria-hidden="true">
                                        folder_open
                                    </mat-icon>
                                    <span>
                                        {{ 'DOWNLOADS.REVEAL' | translate }}
                                    </span>
                                </button>
                                <button
                                    mat-menu-item
                                    type="button"
                                    [disabled]="isPending(entity.item)"
                                    [attr.aria-label]="
                                        ('DOWNLOADS.COPY_URL' | translate) +
                                        ': ' +
                                        entity.item.title
                                    "
                                    (click)="
                                        emitAction('copy-url', entity.item)
                                    "
                                >
                                    <mat-icon aria-hidden="true">
                                        content_copy
                                    </mat-icon>
                                    <span>
                                        {{ 'DOWNLOADS.COPY_URL' | translate }}
                                    </span>
                                </button>
                                <button
                                    mat-menu-item
                                    type="button"
                                    [disabled]="isPending(entity.item)"
                                    [attr.aria-label]="
                                        ('DOWNLOADS.REMOVE_FROM_MANAGER'
                                            | translate) +
                                        ': ' +
                                        entity.item.title
                                    "
                                    (click)="emitAction('remove', entity.item)"
                                >
                                    <mat-icon aria-hidden="true">
                                        remove_circle_outline
                                    </mat-icon>
                                    <span>
                                        {{
                                            'DOWNLOADS.REMOVE_FROM_MANAGER'
                                                | translate
                                        }}
                                    </span>
                                </button>
                            }
                        </mat-menu>
                    </div>

                    <div class="download-library__body">
                        <button
                            type="button"
                            class="download-library__title-button"
                            [attr.data-test-id]="
                                entity.kind === 'series'
                                    ? 'download-library-series-open'
                                    : null
                            "
                            [disabled]="isPending(representativeOf(entity))"
                            [attr.aria-label]="
                                ((entity.kind === 'catchup'
                                    ? 'DOWNLOADS.PLAY'
                                    : 'DOWNLOADS.OPEN_DETAILS'
                                ) | translate) +
                                ': ' +
                                entityTitle(entity)
                            "
                            (click)="openDetails(representativeOf(entity))"
                        >
                            {{ entityTitle(entity) }}
                        </button>
                        @if (entity.kind === 'series') {
                            <div class="download-library__facts">
                                <button
                                    type="button"
                                    class="download-library__episodes-button"
                                    [attr.aria-label]="
                                        ('DOWNLOADS.OPEN_EPISODES'
                                            | translate) +
                                        ': ' +
                                        entity.title
                                    "
                                    (click)="openEpisodes(entity)"
                                >
                                    {{
                                        episodeCountKey(entity.members.length)
                                            | translate
                                                : {
                                                      count: entity.members
                                                          .length,
                                                  }
                                    }}
                                </button>
                                @if (
                                    entity.firstSeason !== undefined &&
                                    entity.lastSeason !== undefined
                                ) {
                                    <span aria-hidden="true">·</span>
                                    <span>
                                        @if (
                                            entity.firstSeason ===
                                            entity.lastSeason
                                        ) {
                                            {{
                                                'DOWNLOADS.SEASON'
                                                    | translate
                                                        : {
                                                              season: entity.firstSeason,
                                                          }
                                            }}
                                        } @else {
                                            {{
                                                'DOWNLOADS.SEASON_RANGE'
                                                    | translate
                                                        : {
                                                              first: entity.firstSeason,
                                                              last: entity.lastSeason,
                                                          }
                                            }}
                                        }
                                    </span>
                                }
                            </div>
                        }
                        @if (
                            entity.kind === 'catchup' && entity.item.catchup;
                            as archive
                        ) {
                            <div class="download-library__facts">
                                {{ archive.channelName }} ·
                                {{
                                    archive.startTimestamp * 1000
                                        | date: 'medium'
                                }}
                            </div>
                        }
                        @if (entity.kind === 'episode' && entity.episodeLabel) {
                            <span class="download-library__episode-label">
                                {{ entity.episodeLabel }}
                            </span>
                        }
                    </div>
                </article>
            }
        </div>
    </section>
}