@let seasons = seasonsData;
<div class="container">
    @if (selectedItem(); as serial) {
        <div class="image">
            @if (serial.info.movie_image) {
                <img
                    [src]="serial.info.movie_image"
                    style="position: relative"
                    (error)="
                        $event.target.src = './assets/images/default-poster.png'
                    "
                />
            } @else {
                <div class="placeholder-cover"></div>
            }
        </div>

        <div class="details">
            <h2>{{ serial.info.name }}</h2>
            <div>
                {{ serial.info.description }}
            </div>
            <div>
                <div class="label">{{ 'XTREAM.DIRECTOR' | translate }}:</div>
                {{ serial.info.director }}
            </div>
            <div>
                <div class="label">{{ 'XTREAM.ACTORS' | translate }}:</div>
                {{ serial.info.actors }}
            </div>
            <div>
                <div class="label">{{ 'XTREAM.YEAR' | translate }}:</div>
                {{ serial.info.releasedate }}
            </div>
            <div>
                <div class="label">{{ 'XTREAM.GENRE' | translate }}:</div>
                {{ serial.info.genre }}
            </div>
            <div>
                <div class="label">{{ 'XTREAM.IMDB_RATING' | translate }}:</div>
                {{ serial.info.rating_imdb }}
            </div>
            <div>
                <div class="label">
                    {{ 'XTREAM.KINOPOISK_RATING' | translate }}:
                </div>
                {{ serial.info.rating_kinopoisk }}
            </div>
            <div class="action-buttons">
                <app-favorites-button
                    [itemId]="serial.id"
                    (addToFavoritesClicked)="addToFavorites(serial)"
                    (removeFromFavoritesClicked)="
                        removeFromFavorites(serial.id)
                    "
                />
            </div>
        </div>
    }
</div>
<div class="seasons">
    @for (item of seasons(); track $index) {
        <mat-divider />
        <h4>{{ item.name }}</h4>
        <div class="episodes">
            @for (episode of item.series; track $index) {
                <button
                    mat-stroked-button
                    (click)="playEpisodeClicked(episode, item.cmd)"
                >
                    {{ 'XTREAM.EPISODE' | translate }} {{ episode }}
                </button>
            }
        </div>
    }
</div>