<div id="detailed-{{request.mediaId}}" class="detailed-container" [style.background-image]="background">
    <div class="row">
        <div class="col-xl-5 col-lg-5 col-md-5 col-sm-12 posterColumn">
            <ombi-image (click)="click()" [src]="request.posterPath" [type]="request.type" class="poster" alt="{{request.title}}">
            </ombi-image>
        </div>
        <div class="col-xl-7 col-lg-7 col-md-7 col-sm-12">
            <div class="row">
                <div class="col-12 title">
                    <div class="text-right year"><sup>{{request.releaseDate | date:'yyyy'}}</sup></div>
                    <h3 id="detailed-request-title-{{request.mediaId}}">{{request.title}}</h3>
                </div>
                <div class="col-12" *ngIf="request.username">
                    <p id="detailed-request-requestedby-{{request.mediaId}}">{{'MediaDetails.RequestedBy' | translate}} {{request.username}}</p>
                </div>
                <div class="col-12">
                    <p id="detailed-request-date-{{request.mediaId}}">{{'MediaDetails.OnDate' | translate}} {{request.requestDate | ombiDate: 'Ppp'}}</p>
                </div>
                <div class="col-12">
                    <p id="detailed-request-status-{{request.mediaId}}">{{'MediaDetails.Status' | translate}} <span class="badge badge-{{getClass(request)}}">{{getStatus(request) | translate}}</span></p>
                </div>
            </div>
            <div class="row action-items">
                <div class="col-12" *ngIf="isAdmin">
                    <div *ngIf="!request.approved && !request.denied">
                        <button
                            id="detailed-request-approve-{{request.mediaId}}"
                            color="accent"
                            mat-raised-button
                            (click)="approve()"
                            matTooltip="{{'Common.Approve' | translate}}">
                            <mat-icon>check-circle</mat-icon>
                        </button>
                        <button
                            id="detailed-request-deny-{{request.mediaId}}"
                            color="accent"
                            mat-raised-button
                            (click)="deny()"
                            matTooltip="{{'Requests.Deny' | translate}}">
                          <mat-icon>cancel</mat-icon></button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
