Ombi/src/Ombi/ClientApp/src/app/media-details/components/movie/movie-details.component.html

<div *ngIf="movie" class="dark-theme">

    <top-banner [background]="movie.background" [available]="movie.available" 
        [title]="movie.title" [releaseDate]="movie.releaseDate" [tagline]="movie.tagline"></top-banner>

    

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

            <div class="row">
                <div class="col-md-2 col-sm-3 hidden-xs">
                    <div class="sidebar sidebar-poster affixable affix-top">
                        <div class="poster">
                            <img class="real" src="https://image.tmdb.org/t/p/w300/{{movie.posterPath}}" alt="Poster"
                                style="display: block;">
                        </div>
                        <!--Underneith poster-->
                        <br />
                    </div>
                </div>

                <!--Next to poster-->
                <div class="col-10 col-lg-3 col-xl-3 media-row">

                    <social-icons [homepage]="movie.homepage" [theMoviedbId]="movie.id" [hasTrailer]="movie.videos.results.length > 0"
                        (openTrailer)="openDialog()" [imdbId]="movie.imdbId" [twitter]="movie.externalIds.twitterId"
                        [facebook]="movie.externalIds.facebookId" [instagram]="movie.externalIds.instagramId" [available]="movie.available"
                        [plexUrl]="movie.plexUrl" [embyUrl]="movie.embyUrl"></social-icons>
                        
                </div>

                <div class="col-12 col-lg-7 col-xl-7 media-row">

                    <button mat-raised-button class="btn-green btn-spacing" *ngIf="movie.available"> {{
                            'Common.Available' | translate }}</button>
                    <span *ngIf="!movie.available">
                        <span *ngIf="movie.requested || movie.approved; then requestedBtn else notRequestedBtn"></span>
                        <ng-template #requestedBtn>
                            <button mat-raised-button class="btn-spacing btn-orange" [disabled]><i
                                    class="fa fa-check"></i>
                                {{ 'Common.Requested' | translate }}</button>
                        </ng-template>
                        <ng-template #notRequestedBtn>
                            <button mat-raised-button class="btn-spacing" (click)="request()">
                                <i *ngIf="movie.requestProcessing" class="fa fa-circle-o-notch fa-spin fa-fw"></i> <i
                                    *ngIf="!movie.requestProcessing && !movie.processed" class="fa fa-plus"></i>
                                <i *ngIf="movie.processed && !movie.requestProcessing" class="fa fa-check"></i> {{
                                'Common.Request' | translate }}</button>
                        </ng-template>
                    </span>
                    <span *ngIf="isAdmin && hasRequest">
                        <button (click)="approve()" mat-raised-button class="btn-spacing" color="accent">
                            <i class="fa fa-plus"></i> {{ 'Common.Approve' | translate }}
                        </button>

                        <button mat-raised-button class="btn-spacing" color="warn"
                            (click)="deny()">  <i class="fa fa-times"></i> {{ 'Requests.Deny' | translate }}</button></span>

                </div>
            </div>

            <div class="row">

                <div class="col-12 col-md-2">
                    <button *ngIf="movie.belongsToCollection" mat-raised-button
                        class="spacing-below full-width mat-elevation-z8">{{movie.belongsToCollection.name}}</button>

                    <mat-card class="mat-elevation-z8">
                        <mat-card-content class="medium-font">
                            <movie-information-panel [movie]="movie"></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">
                            <mat-card class="mat-elevation-z8  spacing-below">
                                <mat-card-header>Cast</mat-card-header>
                                <mat-card-content>
                                    <p-carousel [value]="movie.credits.cast" [numVisible]="5" easing="easeOutStrong">
                                        <ng-template let-item pTemplate="item">
                                            <div class="row justify-content-md-center">
                                                <div class="col-12">
                                                    <img class="cast-profile-img" *ngIf="item.profile_path"
                                                        src="https://image.tmdb.org/t/p/w300/{{item.profile_path}}">
                                                    <!-- TODO get profile image default -->
                                                </div>
                                                <div class="col-12">
                                                    <span><strong>Character:</strong> {{item.character}}</span>
                                                </div>
                                                <div class="col-12">
                                                    <span><strong>Actor:</strong> {{item.name}}</span>
                                                </div>
                                            </div>
                                        </ng-template>
                                    </p-carousel>
                                </mat-card-content>
                            </mat-card>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-12">
                            <mat-accordion class="mat-elevation-z8  spacing-below">
                                <mat-expansion-panel>
                                    <mat-expansion-panel-header>
                                        <mat-panel-title>
                                            Recommendations
                                        </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>
                                            Similar
                                        </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-expansion-panel>
                                    <mat-expansion-panel-header>
                                        <mat-panel-title>
                                            Videos
                                        </mat-panel-title>
                                    </mat-expansion-panel-header>

                                    <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>
                                </mat-expansion-panel>
                            </mat-accordion>
                        </div>
                    </div>



                </div>
            </div>




        </div>




        <div class="bottom-page-gap">
        </div>
    </section>








</div>