Ombi/src/Ombi/ClientApp/src/app/discover/components/card/discover-card-details.component.html

<div class="spinner-container">
    <mat-spinner *ngIf="loading" [color]="'accent'"></mat-spinner>
</div>
<div *ngIf="!loading" mat-dialog-content class="background">

    <div class="row">
        <div class="col-4">
            <a (click)="openDetails()">
                <img id="cardImage" src="{{data.posterPath}}" class="poster" alt="{{data.title}}">
            </a>
        </div>
        <div class="col-8">
            <div class="row">

                <div class="col-4 offset-8 text-right" id="icons">
                    <span *ngIf="movie">
                        <a *ngIf="movie.plexUrl" class="media-icons" href="{{movie.plexUrl}}" target="_blank">
                            <i matTooltip=" {{'Search.ViewOnPlex' | translate}}"
                                class="fa fa-play-circle fa-2x grow"></i>
                        </a>
                        <a *ngIf="movie.embyUrl" class="media-icons" href="{{movie.embyUrl}}" target="_blank">
                            <i matTooltip=" {{'Search.ViewOnEmby' | translate}}"
                                class="fa fa-play-circle fa-2x grow"></i>
                        </a>
                        <a *ngIf="movie.jellyfinUrl" class="media-icons" href="{{movie.jellyfinUrl}}" target="_blank">
                            <i matTooltip=" {{'Search.ViewOnJellyfin' | translate}}"
                                class="fa fa-play-circle fa-2x grow"></i>
                        </a>
                    </span>

                    <span *ngIf="tv">
                        <a *ngIf="tv.plexUrl" class="media-icons" href="{{tv.plexUrl}}" target="_blank">
                            <i matTooltip=" {{'Search.ViewOnPlex' | translate}}"
                                class="fa fa-play-circle fa-2x grow"></i>
                        </a>
                        <a *ngIf="tv.embyUrl" class="media-icons" href="{{tv.embyUrl}}" target="_blank">
                            <i matTooltip=" {{'Search.ViewOnEmby' | translate}}"
                                class="fa fa-play-circle fa-2x grow"></i>
                        </a>
                        <a *ngIf="tv.jellyfinUrl" class="media-icons" href="{{tv.jellyfinUrl}}" target="_blank">
                            <i matTooltip=" {{'Search.ViewOnJellyfin' | translate}}"
                                class="fa fa-play-circle fa-2x grow"></i>
                        </a>
                    </span>

                    <a class="media-icons" (click)="close()">
                        <i class="fa fa-window-close fa-2x grow"></i>
                    </a>
                </div>

            </div>
            <div class="row">
                <div class="col-12">
                    <h3><strong>{{data.title}}</strong></h3>
                </div>

            </div>
            <div class="row top-spacing details">
                <div class="col-6">
                    <strong>{{'Discovery.CardDetails.Availability' | translate}}: </strong> <small>
                        <ng-template [ngIf]="data.available"><span class="label label-success" id="availableLabel"
                                [translate]="'Common.Available'"></span></ng-template>
                        <ng-template [ngIf]="!data.available"><span class="label label-success" id="availableLabel"
                                [translate]="'Common.NotAvailable'"></span></ng-template>
                    </small>
                </div>
                <div class="col-6">
                    <strong *ngIf="movie">{{'Discovery.CardDetails.Studio' | translate}}: </strong>
                    <small *ngIf="movie">{{movie.productionCompanies[0].name}}</small>
                    <strong *ngIf="tv">{{'Discovery.CardDetails.Network' | translate}}: </strong>
                    <small *ngIf="tv && tv.network">{{tv.network.name}}</small>
                    <small *ngIf="tv && !tv.network">{{'Discovery.CardDetails.UnknownNetwork' | translate}}</small>
                </div>
                <div class="col-6" *ngIf="!data.available">
                    <strong>{{'Discovery.CardDetails.RequestStatus' | translate}}: </strong> <small>
                        <ng-template [ngIf]="data.approved && !data.available"><span class="label label-info"
                                id="processingRequestLabel" [translate]="'Common.ProcessingRequest'"></span>
                        </ng-template>
                        <ng-template [ngIf]="data.requested && !data.approved && !data.available"><span
                                class="label label-warning" id="pendingApprovalLabel"
                                [translate]="'Common.PendingApproval'"></span></ng-template>
                        <ng-template [ngIf]="!data.requested && !data.available && !data.approved"><span
                                class="label label-danger" id="notRequestedLabel"
                                [translate]="'Common.NotRequested'"></span></ng-template>
                    </small>
                </div>
                    <div class="col-6">
                        <strong *ngIf="movie">{{'Discovery.CardDetails.Director' | translate}}: </strong>
                        <small *ngIf="movie">{{movie.credits.crew[0].name}}</small>
                        <strong *ngIf="tvCreator">Director: </strong>
                        <small *ngIf="tvCreator">{{tvCreator}}</small>
                    </div>
                    <div class="col-6">
                        <strong *ngIf="movie">{{'Discovery.CardDetails.InCinemas' | translate}}: </strong>
                        <small *ngIf="movie">{{movie.releaseDate | amLocal | amDateFormat: 'LL'}}</small>
                        <strong *ngIf="tv">{{'Discovery.CardDetails.FirstAired' | translate}}: </strong>
                        <small *ngIf="tv">{{tv.firstAired | amLocal | amDateFormat: 'LL'}}</small>
                    </div>
                    <div class="col-6">
                        <strong *ngIf="movie">{{'Discovery.CardDetails.Writer' | translate}}: </strong>
                        <small *ngIf="movie">{{movie.credits.crew[1].name}}</small>
                        <strong *ngIf="tv">{{'Discovery.CardDetails.ExecProducer' | translate}}: </strong>
                        <small *ngIf="tv">{{tvProducer}}</small>
                    </div>
            </div>

            <div class="row top-spacing overview">
                <div class="col-12">
                    {{data.overview}}
                </div>
            </div>


        </div>

    </div>
</div>
<div mat-dialog-actions>
    <div class="action-buttons-right">
        <div class="col-md-12" *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 class="col-md-12" *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>
            <button mat-raised-button class="btn-green btn-spacing" (click)="openDetails()"> {{
                        'Common.ViewDetails' | translate }}</button>
        </div>
    </div>

</div>