Ombi/src/Ombi/ClientApp/src/app/discover/components/grid/discover-grid.component.html

<!-- <div class="card-spacing" *ngIf="result">
    <mat-card class="mat-elevation-z8 dark-card grow">
        <a [routerLink]="result.type === RequestType.movie ? '/details/movie/' + result.id : '/details/tv/' + result.id">
            <img id="cardImage" mat-card-image src="{{result.posterPath}}" class="card-poster" [ngClass]="getStatusClass()" alt="{{result.title}}">
        </a>
        <mat-card-content>
            <h6 *ngIf="result.title.length <= 20">{{result.title}}</h6>
            <h6 *ngIf="result.title.length > 20" matTooltip="{{result.title}}">{{result.title | truncate:20}}</h6>
            <div class="fade-text">
            <small class="overview-text">{{result.overview | truncate: 75}}</small>
        </div>
        </mat-card-content>
    </mat-card>
</div> -->


<div class="top-spacing">
    <mat-card class="mat-elevation-z8 dark-card backdrop" [style.background-image]="result.background">
        <div class="row main-container">
            <div class="col-md-2 col-12">
                <img src="{{result.posterPath}}" class="card-poster" alt="{{result.title}}">
            </div>
            <div class="col-md-8 col-12">
                <div class="row">
                    <h1>{{result.title}}</h1>
                </div>
                <div class="row">
                    <mat-chip-list>
                        <mat-chip *ngIf="result.available" class="available">
                            {{'Common.Available' | translate}}
                        </mat-chip>

                        <mat-chip *ngIf="result.approved && !result.available" class="approved">
                            {{'Common.ProcessingRequest' | translate}}
                        </mat-chip>

                        <mat-chip *ngIf="result.denied" class="denied">
                            {{'Common.RequestDenied' | translate}}
                        </mat-chip>

                        <mat-chip *ngIf="result.requested && !result.approved && !result.available && !result.denied"
                            class="requested">
                            {{'Common.PendingApproval' | translate}}
                        </mat-chip>
                        <mat-chip *ngIf="movie && movie.plexUrl"> <a href="{{movie.plexUrl}}" target="_blank">
                                <mat-icon style="color:white" matTooltip=" {{'Search.ViewOnPlex' | translate}}">
                                    play_circle_outline</mat-icon>
                            </a></mat-chip>
                        <mat-chip *ngIf="movie && movie.embyUrl"> <a href="{{movie.embyUrl}}" target="_blank">
                                <mat-icon style="color:white" matTooltip=" {{'Search.ViewOnEmby' | translate}}">
                                    play_circle_outline</mat-icon>
                            </a></mat-chip>
                        <mat-chip *ngIf="movie && movie.jellyfinUrl"> <a href="{{movie.jellyfinUrl}}" target="_blank">
                                <mat-icon style="color:white" matTooltip=" {{'Search.ViewOnJellyfin' | translate}}">
                                    play_circle_outline</mat-icon>
                            </a></mat-chip>

                        <mat-chip *ngIf="tv && tv.plexUrl"> <a href="{{tv.plexUrl}}" target="_blank">
                                <mat-icon style="color:white" matTooltip=" {{'Search.ViewOnPlex' | translate}}">
                                    play_circle_outline</mat-icon>
                            </a></mat-chip>
                        <mat-chip *ngIf="tv &&tv.embyUrl"> <a href="{{movie.embyUrl}}" target="_blank">
                                <mat-icon style="color:white" matTooltip=" {{'Search.ViewOnEmby' | translate}}">
                                    play_circle_outline</mat-icon>
                            </a></mat-chip>
                        <mat-chip *ngIf="tv &&tv.jellyfinUrl"> <a href="{{movie.jellyfinUrl}}" target="_blank">
                                <mat-icon style="color:white" matTooltip=" {{'Search.ViewOnJellyfin' | translate}}">
                                    play_circle_outline</mat-icon>
                            </a></mat-chip>
                    </mat-chip-list>
                </div>
                <div class="row">

                    <mat-chip-list class="top-spacing">
                        <mat-chip *ngIf="movie && movie.productionCompanies[0]?.name">
                            {{'Discovery.CardDetails.Studio' | translate}}: {{movie.productionCompanies[0].name}}
                        </mat-chip>

                        <mat-chip *ngIf="tv && tv.network?.name">{{'Discovery.CardDetails.Network' | translate}}:
                            {{tv.network.name}}</mat-chip>

                        <mat-chip *ngIf="movie && movie.credits?.crew[0]?.name">
                            {{'Discovery.CardDetails.Director' | translate}}: {{movie.credits.crew[0].name}}</mat-chip>

                        <mat-chip *ngIf="tvCreator">Director: {{tvCreator}}</mat-chip>

                        <mat-chip *ngIf="movie">{{'Discovery.CardDetails.InCinemas' | translate}}:
                            {{movie.releaseDate | amLocal | amDateFormat: 'LL'}}</mat-chip>

                        <mat-chip *ngIf="tv">{{'Discovery.CardDetails.FirstAired' | translate}}:
                            {{tv.firstAired | amLocal | amDateFormat: 'LL'}}</mat-chip>

                        <mat-chip *ngIf="movie && movie.credits?.crew[1]?.name">
                            {{'Discovery.CardDetails.Writer' | translate}}: {{movie.credits.crew[1].name}}</mat-chip>

                        <mat-chip *ngIf="tv">{{'Discovery.CardDetails.ExecProducer' | translate}}: {{tvProducer}}
                        </mat-chip>

                    </mat-chip-list>



                </div>
                <div class="row">
                    <p class="overview top-spacing">{{result.overview}}</p>
                </div>
            </div>

            <div class="col-md-2 col-12">
                <div style="float:right;">
                    <button mat-raised-button class="btn-green btn-spacing" (click)="openDetails()"> {{
                    'Common.ViewDetails' | translate }}</button>
                    <div *ngIf="movie">
                        <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" color="primary" (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>
                    </div>

                    <div *ngIf="tv">

                        <div *ngIf="!tv.fullyAvailable" class="dropdown">
                            <button mat-raised-button class="btn-orange btn-spacing" type="button" (click)="request()">
                                <i class="fa fa-plus"></i>
                                {{ 'Common.Request' | translate }}
                                <span class="caret"></span>
                            </button>
                        </div>

                        <button *ngIf="tv.fullyAvailable" mat-raised-button class="btn-spacing" color="accent"
                            [disabled]>
                            <i class="fa fa-check"></i> {{'Common.Available' | translate }}</button>
                        <button *ngIf="tv.partlyAvailable && !tv.fullyAvailable" mat-raised-button class="btn-spacing"
                            color="accent" [disabled]>
                            <i class="fa fa-check"></i> {{'Common.PartiallyAvailable' | translate }}</button>

                        <span *ngIf="tv.available">
                            <a *ngIf="tv.plexUrl" mat-raised-button style="text-align: right"
                                class="btn-spacing btn-greem" href="{{tv.plexUrl}}" target="_blank"><i
                                    class="fa fa-eye"></i> {{'Search.ViewOnPlex' |
                                translate}}</a>
                            <a *ngIf="tv.embyUrl" mat-raised-button class="btn-green btn-spacing" href="{{tv.embyUrl}}"
                                target="_blank"><i class="fa fa-eye"></i> {{'Search.ViewOnEmby' |
                                translate}}</a>
                            <a *ngIf="tv.jellyfinUrl" mat-raised-button class="btn-green btn-spacing" href="{{tv.jellyfinUrl}}"
                                target="_blank"><i class="fa fa-eye"></i> {{'Search.ViewOnJellyfin' |
                                translate}}</a>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </mat-card>
</div>