<div *ngIf="!movie" class="justify-content-md-center top-spacing loading-spinner">
    <mat-spinner [color]="'accent'"></mat-spinner>
</div>

<div *ngIf="movie" class="main-content-container">

    <top-banner [background]="movie.background" [available]="movie.available" [title]="movie.title" [releaseDate]="movie.releaseDate" [tagline]="movie.tagline"></top-banner>
    <div class="social-icons-container">

        <social-icons
            [homepage]="movie.homepage"
            [theMoviedbId]="movie.id"
            [hasTrailer]="movie.videos?.results?.length > 0"
            [imdbId]="movie.imdbId"
            [twitter]="movie.externalIds.twitterId"
            [facebook]="movie.externalIds.facebookId"
            [instagram]="movie.externalIds.instagramId"
            [available]="movie.available"
            [plexUrl]="movie.plexUrl"
            [embyUrl]="movie.embyUrl"
            [jellyfinUrl]="movie.jellyfinUrl"
            [isAdmin]="isAdmin"
            [canShowAdvanced]="showAdvanced && movieRequest"
            [type]="requestType"
            (openTrailer)="openDialog()"
            (onAdvancedOptions)="openAdvancedOptions()"
            (onReProcessRequest)="reProcessRequest()"
            >
        </social-icons>

    </div>
    <section id="info-wrapper">
        <div class="small-middle-container">

            <div class="row justify-content-center justify-content-sm-start header-container">
                <div class="details-poster-container">
                    <media-poster [posterPath]="'https://image.tmdb.org/t/p/w300/' + movie.posterPath"></media-poster>
                </div>

                <!--Next to poster-->
                <div class="details-button-container">
                    <div class="col-12 media-row">
                        <span *ngIf="movie.available">
                            <a id="viewOnPlexButton" *ngIf="movie.plexUrl" href="{{movie.plexUrl}}" mat-raised-button  target="_blank" class="btn-spacing viewon-btn plex">
                                {{'Search.ViewOnPlex' | translate}}
                                <i class="far fa-play-circle fa-2x"></i>
                            </a>
                            <a id="viewOnEmbyButton" *ngIf="movie.embyUrl" href="{{movie.embyUrl}}" mat-raised-button  target="_blank" class="btn-spacing viewon-btn emby">
                                {{'Search.ViewOnEmby' | translate}}
                                <i class="far fa-play-circle fa-2x"></i>
                            </a>
                            <a id="viewOnJellyfinButton" *ngIf="movie.jellyfinUrl" href="{{movie.jellyfinUrl}}" mat-raised-button  target="_blank" class="btn-spacing viewon-btn jellyfin">
                                {{'Search.ViewOnJellyfin' | translate}}
                                <i class="far fa-play-circle fa-2x"></i>
                            </a>
                        </span>
                            <button mat-raised-button class="btn-green btn-spacing" id="availableBtn" *ngIf="movie.available && !movie.plexUrl && !movie.embyUrl && !movie.jellyfinUrl"> {{
                                'Common.Available' | translate }}</button>
                            <span *ngIf="!movie.available">
                                <span *ngIf="movie.requested || movie.approved; then requestedBtn else notRequestedBtn"></span>
                                <ng-template #requestedBtn>
                                    <button id="requestedBtn" mat-raised-button *ngIf="!hasRequest || hasRequest && movieRequest && !movieRequest.denied" class="btn-spacing" color="warn" [disabled]>
                                        <i class="fas fa-check"></i>
                                        {{ 'Common.Requested' | translate }}
                                    </button>
                                </ng-template>
                                <ng-template #notRequestedBtn>
                                    <button *ngIf="!movie.requested" id="requestBtn" mat-raised-button class="btn-spacing" color="primary" (click)="request()">
                                        <i *ngIf="movie.requestProcessing" class="fas fa-circle-notch fa-spin fa-fw"></i> 
                                        <i *ngIf="!movie.requestProcessing && !movie.processed" class="fas fa-plus"></i>
                                        <i *ngIf="movie.processed && !movie.requestProcessing" class="fas fa-check"></i> 
                                        {{'Common.Request' | translate }}
                                    </button>
                                </ng-template>
                            </span>
                            <span *ngIf="isAdmin && hasRequest">
                                <button id="approveBtn" *ngIf="!movie.approved " (click)="approve()" mat-raised-button class="btn-spacing" color="accent">
                                <i class="fas fa-plus"></i> {{ 'Common.Approve' | translate }}
                                </button>
                                <button id="markAvailableBtn" *ngIf="!movie.available" (click)="markAvailable()" mat-raised-button class="btn-spacing"
                                color="accent">
                                <i class="fas fa-plus"></i> {{ 'Requests.MarkAvailable' | translate }}
                                </button>

                                <button id="markUnavailableBtn" *ngIf="movie.available" (click)="markUnavailable()" mat-raised-button class="btn-spacing"
                                color="accent">
                                <i class="fas fa-minus"></i> {{ 'Requests.MarkUnavailable' | translate }}
                                </button>

                                <button id="denyBtn" *ngIf="movieRequest && !movieRequest.denied" mat-raised-button class="btn-spacing" color="warn" (click)="deny()">
                                    <i class="fas fa-times"></i> {{'Requests.Deny' | translate }}
                                </button>
                                <button id="deniedButton" *ngIf="movieRequest && movieRequest.denied" [matTooltip]="movieRequest.deniedReason" mat-raised-button class="btn-spacing" color="warn">
                                    <i class="fas fa-times"></i> {{'MediaDetails.Denied' | translate }}
                                </button>
                            </span>

                            <button id="reportIssueBtn" mat-raised-button class="btn-spacing" color="danger" (click)="issue()" *ngIf="issuesEnabled">
                                <i class="fas fa-exclamation"></i> {{'Requests.ReportIssue' | translate }}
                            </button>
                            <button id="viewCollectionBtn" *ngIf="movie.belongsToCollection" [routerLink]="'/discover/collection/' + movie.belongsToCollection.id" mat-raised-button class="btn-spacing">
                                <i class="fas fa-list"></i> {{'MediaDetails.ViewCollection' | translate}}
                            </button>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-12 col-md-2">
                    <mat-card class="mat-elevation-z8">
                        <mat-card-content>
                            <movie-information-panel [movie]="movie" [request]="movieRequest" [advancedOptions]="showAdvanced"></movie-information-panel>
                        </mat-card-content>
                    </mat-card>


                </div>

                <div class="col-12 col-md-10">
                    <div class="row">
                        <div class="col-12">
                            <mat-card class=" mat-elevation-z8 spacing-below">
                                <mat-card-content>
                                    {{movie.overview}}
                                </mat-card-content>
                            </mat-card>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-12">
                            <cast-carousel [cast]="movie.credits.cast"></cast-carousel>
                        </div>
                    </div>

                    <!-- <div class="row card-spacer" *ngIf="movie.videos?.results?.length > 0">

                        <div class="col-md-6" *ngFor="let video of movie.videos?.results">
                            <iframe width="100%" height="315px" [src]="'https://www.youtube.com/embed/' + video.key | safe" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                        </div>
                    </div> -->

                    <div class="row" *ngIf="movie.videos?.results?.length > 0">
                        <div class="col-12">
                            <mat-card class="mat-elevation-z8">
                                <mat-card-header>Trailers</mat-card-header>
                                <mat-card-content>
                                    <p-carousel class="no-indicator" [numVisible]="2" [numScroll]="10" [page]="0" [value]="movie.videos?.results">
                                        <ng-template let-result pTemplate="item">
                                            <iframe width="98%" height="315px" [src]="'https://www.youtube.com/embed/' + result.key | safe" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                                        </ng-template>
                                    </p-carousel>
                                </mat-card-content>
                            </mat-card>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-12">
                            <div class="issuesPanel">
                                <issues-panel [providerId]="movie.imdbId" [isAdmin]="isAdmin"></issues-panel>
                            </div>

                            <mat-accordion class=" mat-elevation-z8 spacing-below ">
                                <mat-expansion-panel>
                                    <mat-expansion-panel-header>
                                        <mat-panel-title>
                                            {{'MediaDetails.RecommendationsTitle' | translate}}
                                        </mat-panel-title>
                                    </mat-expansion-panel-header>

                                    <div class="row card-spacer " *ngIf="movie.recommendations?.results?.length> 0">

                                        <div class="col-md-2" *ngFor="let r of movie.recommendations?.results">
                                            <div class="sidebar affixable affix-top preview-poster">
                                                <div class="poster">
                                                    <a [routerLink]="'/details/movie/'+r.id">
                                                        <img class="real grow" matTooltip="{{r.title}}" src="https://image.tmdb.org/t/p/w300/{{r.poster_path}}" alt="Poster" style="display: block;">
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </mat-expansion-panel>
                                <mat-expansion-panel>
                                    <mat-expansion-panel-header>
                                        <mat-panel-title>
                                            {{'MediaDetails.SimilarTitle' | translate}}
                                        </mat-panel-title>
                                    </mat-expansion-panel-header>

                                    <div class="row card-spacer" *ngIf="movie.similar?.results?.length > 0">

                                        <div class="col-md-2" *ngFor="let r of movie.similar.results">
                                            <div class="sidebar affixable affix-top preview-poster">
                                                <div class="poster ">
                                                    <a [routerLink]="'/details/movie/'+r.id">
                                                        <img class="real grow" matTooltip="{{r.title}}" src="https://image.tmdb.org/t/p/w300/{{r.poster_path}}" alt="Poster" style="display: block;">
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </mat-expansion-panel>
                            </mat-accordion>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="bottom-page-gap">
        </div>
    </section>
</div>