<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"
			[isAdmin]="isAdmin"
			[canShowAdvanced]="showAdvanced && movieRequest"
			[type]="requestType"
			[has4KRequest]="movie.has4KRequest"
			(openTrailer)="openDialog()"
			(onAdvancedOptions)="openAdvancedOptions()"
			(onReProcessRequest)="reProcessRequest(false)"
			(onReProcess4KRequest)="reProcessRequest(true)"
		>
		</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]="movie.posterPath"></media-poster>
				</div>

				<!--Next to poster-->
				<div class="details-button-container">
					<div class="col-12 media-row">
						<span *ngIf="movie.available || movie.available4K">
							<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>
						<!-- Regular Movie Status -->
						<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(false)"
								>
									<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>

						<!-- 4k Status -->
						<span *ngIf="is4KEnabled">
							<span *permission="roleName4k">
								<button mat-raised-button class="btn-green btn-spacing" id="availableBtn4k" *ngIf="movie.available4K">
									{{ 'Common.Available4K' | translate }}
								</button>

								<span *ngIf="!movie.available4K">
									<span *ngIf="movie.has4KRequest || movie.approved4K; then requestedBtn4K; else notRequestedBtn4K"></span>
									<ng-template #requestedBtn4K>
										<button
											id="requestedBtn4K"
											mat-raised-button
											*ngIf="movieRequest && !movieRequest.denied4K"
											class="btn-spacing"
											color="warn"
											[disabled]
										>
											<i class="fas fa-check"></i>
											{{ 'Common.Requested4K' | translate }}
										</button>
									</ng-template>
									<ng-template #notRequestedBtn4K>
										<button
											*ngIf="!movie.has4KRequest"
											id="requestBtn4k"
											mat-raised-button
											class="btn-spacing"
											color="primary"
											(click)="request(true)"
										>
											<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.Request4K' | translate }}
										</button>
									</ng-template>
								</span>
							</span>
						</span>

						<span *ngIf="movieRequest?.showSubscribe">
							<button *ngIf="!movieRequest?.subscribed" (click)="notify()" id="notifyBtn" mat-raised-button class="btn-spacing">
								<i class="fas fa-bell"></i> {{ 'Requests.Notify' | translate }}
							</button>
							<button *ngIf="movieRequest?.subscribed" (click)="unNotify()" id="unnotifyBtn" mat-raised-button class="btn-spacing">
								<i class="fas fa-bell-slash"></i> {{ 'Requests.RemoveNotification' | translate }}
							</button>
						</span>

						<span *ngIf="isAdmin && hasRequest">
							<button
								id="approveBtn"
								*ngIf="!movie.approved && movie.requested"
								(click)="approve(false)"
								mat-raised-button
								class="btn-spacing"
								color="accent"
							>
								<i class="fas fa-plus"></i> {{ 'Common.Approve' | translate }}
							</button>
							<button
								id="markAvailableBtn"
								*ngIf="!movie.available && movie.requested"
								(click)="markAvailable(false)"
								mat-raised-button
								class="btn-spacing"
								color="accent"
							>
								<i class="fas fa-plus"></i> {{ 'Requests.MarkAvailable' | translate }}
							</button>
							<button
								id="markUnavailableBtn"
								*ngIf="movie.available && movie.requested"
								(click)="markUnavailable(false)"
								mat-raised-button
								class="btn-spacing"
								color="accent"
							>
								<i class="fas fa-minus"></i> {{ 'Requests.MarkUnavailable' | translate }}
							</button>

							<!-- 4k -->
							<span *ngIf="is4KEnabled">
								<span *permission="roleName4k">
									<button
										id="approve4kBtn"
										*ngIf="!movie.approved4K && movie.has4KRequest"
										(click)="approve(true)"
										mat-raised-button
										class="btn-spacing"
										color="accent"
									>
										<i class="fas fa-plus"></i> {{ 'Common.Approve4K' | translate }}
									</button>
									<button
										id="markAvailable4kBtn"
										*ngIf="!movie.available4K && movie.has4KRequest"
										(click)="markAvailable(true)"
										mat-raised-button
										class="btn-spacing"
										color="accent"
									>
										<i class="fas fa-plus"></i> {{ 'Requests.MarkAvailable4K' | translate }}
									</button>
									<button
										id="markUnavailable4kBtn"
										*ngIf="movie.available4K"
										(click)="markUnavailable(true)"
										mat-raised-button
										class="btn-spacing"
										color="accent"
									>
										<i class="fas fa-minus"></i> {{ 'Requests.MarkUnavailable4K' | translate }}
									</button>
								</span>
							</span>

							<button
								id="denyBtn"
								*ngIf="!movieRequest.denied && movie.requested"
								mat-raised-button
								class="btn-spacing"
								color="warn"
								(click)="deny(false)"
							>
								<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>
									@defer (on viewport; prefetch on idle) {
									{{ movie.overview }}
									}
									@placeholder {
									<p-skeleton height="2rem" styleClass="mb-2"></p-skeleton>
									}
								</mat-card-content>
							</mat-card>
						</div>
					</div>

					<div class="row">
						<div class="col-12">
							@defer (on viewport; prefetch on idle) {
								<cast-carousel [cast]="movie.credits.cast"></cast-carousel>
							}
							@placeholder {
							<p-skeleton height="2rem" styleClass="mb-2"></p-skeleton>
							}
						</div>
					</div>

					<div class="row">
						<div class="col-12">
							@defer (on viewport; prefetch on idle) {
								<cast-carousel [cast]="movie.credits.crew"></cast-carousel>
							}
							@placeholder {
							<p-skeleton height="2rem" styleClass="mb-2"></p-skeleton>
							}
						</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">
								@defer (on viewport; prefetch on idle) {
								<mat-card-header>{{ 'MediaDetails.Trailers' | translate }}</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>
							}
							@placeholder {
							<p-skeleton height="2rem" styleClass="mb-2"></p-skeleton>
							}
							</mat-card>
						</div>
					</div>

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

							@defer (on viewport; prefetch on idle) {
							<mat-accordion class="mat-elevation-z8 spacing-below">
								<mat-expansion-panel *ngIf="movie.recommendations?.results?.length > 0">
									<mat-expansion-panel-header>
										<mat-panel-title>
											{{ 'MediaDetails.RecommendationsTitle' | translate }}
										</mat-panel-title>
									</mat-expansion-panel-header>

									<div class="row card-spacer">
										<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">
														<ombi-image
															class="real grow"
															matTooltip="{{ r.title }}"
															src="https://image.tmdb.org/t/p/w300/{{ r.poster_path }}"
															alt="Poster"
															style="display: block"
														>
														</ombi-image>
													</a>
												</div>
											</div>
										</div>
									</div>
								</mat-expansion-panel>
								<mat-expansion-panel *ngIf="movie.similar?.results?.length > 0">
									<mat-expansion-panel-header>
										<mat-panel-title>
											{{ 'MediaDetails.SimilarTitle' | translate }}
										</mat-panel-title>
									</mat-expansion-panel-header>

									<div class="row card-spacer">
										<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">
														<ombi-image
															class="real grow"
															matTooltip="{{ r.title }}"
															src="https://image.tmdb.org/t/p/w300/{{ r.poster_path }}"
															alt="Poster"
															style="display: block"
														></ombi-image>
													</a>
												</div>
											</div>
										</div>
									</div>
								</mat-expansion-panel>
							</mat-accordion>
						}
						@placeholder {
							<p-skeleton height="2rem" styleClass="mb-2"></p-skeleton>
						}
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="bottom-page-gap"></div>
	</section>
</div>
