@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">
                {{ 'DOWNLOADS.READY_TO_WATCH' | translate }}
            </h2>
        </header>
        <div class="download-library__grid">
            @for (entity of entities(); track entity.key) {
                @if (entity.kind === 'series') {
                    <article
                        class="download-library__card"
                        [attr.data-test-id]="libraryTestId(entity)"
                    >
                        <div
                            class="download-library__artwork download-library__artwork-hint"
                        >
                            <button
                                type="button"
                                class="download-library__artwork-button"
                                data-test-id="download-library-series-open"
                                [disabled]="isPending(entity.representative)"
                                [attr.aria-label]="
                                    'DOWNLOADS.OPEN_ARTWORK'
                                        | translate: { title: entity.title }
                                "
                                (click)="openDetails(entity.representative)"
                            >
                                @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) +
                                            ': ' +
                                            entity.title
                                        "
                                    >
                                        <mat-icon aria-hidden="true"
                                            >tv</mat-icon
                                        >
                                    </span>
                                }
                            </button>
                        </div>

                        <div class="download-library__body">
                            <span class="download-library__type">
                                {{ 'DOWNLOADS.SERIES' | translate }}
                            </span>
                            <span class="download-library__title-hint">
                                <button
                                    type="button"
                                    class="download-library__title-button"
                                    data-test-id="download-library-series-open"
                                    [disabled]="
                                        isPending(entity.representative)
                                    "
                                    [attr.aria-label]="
                                        ('DOWNLOADS.OPEN_DETAILS' | translate) +
                                        ': ' +
                                        entity.title
                                    "
                                    (click)="openDetails(entity.representative)"
                                >
                                    {{ entity.title }}
                                </button>
                            </span>
                            <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>
                            <div class="download-library__metadata">
                                <span>{{
                                    formatBytes(entity.trackedBytes)
                                }}</span>
                            </div>
                            <div
                                class="download-library__actions"
                                [attr.aria-label]="entity.title"
                            >
                                <button
                                    mat-icon-button
                                    type="button"
                                    [matMenuTriggerFor]="seriesMenu"
                                    [attr.aria-label]="
                                        ('DOWNLOADS.MORE_ACTIONS' | translate) +
                                        ': ' +
                                        entity.title
                                    "
                                    [matTooltip]="
                                        'DOWNLOADS.MORE_ACTIONS' | translate
                                    "
                                >
                                    <mat-icon aria-hidden="true">
                                        more_vert
                                    </mat-icon>
                                </button>
                                <mat-menu #seriesMenu="matMenu">
                                    <app-download-source-menu-header
                                        [sourceName]="entity.sourceName"
                                    />
                                    <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>
                                </mat-menu>
                            </div>
                        </div>
                    </article>
                } @else {
                    <article
                        class="download-library__card"
                        [attr.data-test-id]="libraryTestId(entity)"
                    >
                        <div class="download-library__artwork">
                            <button
                                type="button"
                                class="download-library__artwork-button"
                                [disabled]="isPending(entity.item)"
                                [attr.aria-label]="
                                    entity.kind === 'movie'
                                        ? ('DOWNLOADS.OPEN_ARTWORK'
                                          | translate
                                              : { title: entity.item.title })
                                        : ('DOWNLOADS.PLAY' | translate) +
                                          ': ' +
                                          entity.item.title
                                "
                                (click)="
                                    entity.kind === 'movie'
                                        ? openDetails(entity.item)
                                        : emitAction('play', entity.item)
                                "
                            >
                                @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) +
                                            ': ' +
                                            entity.item.title
                                        "
                                    >
                                        <mat-icon aria-hidden="true">
                                            {{
                                                entity.kind === 'movie'
                                                    ? 'movie'
                                                    : 'live_tv'
                                            }}
                                        </mat-icon>
                                    </span>
                                }
                            </button>
                        </div>

                        <div class="download-library__body">
                            <span class="download-library__type">
                                {{
                                    (entity.kind === 'movie'
                                        ? 'DOWNLOADS.MOVIE'
                                        : 'DOWNLOADS.EPISODE'
                                    ) | translate
                                }}
                            </span>
                            <button
                                type="button"
                                class="download-library__title-button"
                                [disabled]="isPending(entity.item)"
                                [attr.aria-label]="
                                    ((entity.kind === 'movie'
                                        ? 'DOWNLOADS.OPEN_DETAILS'
                                        : 'DOWNLOADS.PLAY'
                                    ) | translate) +
                                    ': ' +
                                    entity.item.title
                                "
                                (click)="
                                    entity.kind === 'movie'
                                        ? openDetails(entity.item)
                                        : emitAction('play', entity.item)
                                "
                            >
                                {{ entity.item.title }}
                            </button>
                            @if (
                                entity.kind === 'episode' && entity.episodeLabel
                            ) {
                                <span class="download-library__episode-label">
                                    {{ entity.episodeLabel }}
                                </span>
                            }
                            <div class="download-library__metadata">
                                <span>{{
                                    formatBytes(entity.trackedBytes)
                                }}</span>
                            </div>

                            <div
                                class="download-library__actions"
                                [attr.aria-label]="entity.item.title"
                            >
                                <button
                                    mat-icon-button
                                    type="button"
                                    [disabled]="isPending(entity.item)"
                                    [attr.aria-label]="
                                        ('DOWNLOADS.PLAY' | translate) +
                                        ': ' +
                                        entity.item.title
                                    "
                                    [matTooltip]="'DOWNLOADS.PLAY' | translate"
                                    (click)="emitAction('play', entity.item)"
                                >
                                    <mat-icon aria-hidden="true"
                                        >play_arrow</mat-icon
                                    >
                                </button>
                                <button
                                    mat-icon-button
                                    type="button"
                                    [disabled]="isPending(entity.item)"
                                    [attr.aria-label]="
                                        ('DOWNLOADS.REVEAL' | translate) +
                                        ': ' +
                                        entity.item.title
                                    "
                                    [matTooltip]="
                                        'DOWNLOADS.REVEAL' | translate
                                    "
                                    (click)="emitAction('reveal', entity.item)"
                                >
                                    <mat-icon aria-hidden="true"
                                        >folder_open</mat-icon
                                    >
                                </button>
                                <button
                                    mat-icon-button
                                    type="button"
                                    [matMenuTriggerFor]="itemMenu"
                                    [disabled]="isPending(entity.item)"
                                    [attr.aria-label]="
                                        ('DOWNLOADS.MORE_ACTIONS' | translate) +
                                        ': ' +
                                        entity.item.title
                                    "
                                    [matTooltip]="
                                        'DOWNLOADS.MORE_ACTIONS' | translate
                                    "
                                >
                                    <mat-icon aria-hidden="true"
                                        >more_vert</mat-icon
                                    >
                                </button>
                                <mat-menu #itemMenu="matMenu">
                                    <app-download-source-menu-header
                                        [sourceName]="entity.sourceName"
                                    />
                                    <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>
                    </article>
                }
            }
        </div>
    </section>
}