Ombi/src/Ombi/ClientApp/src/app/issues/issueDetails.component.html

<div *ngIf="issue">
    <div class="row issue-details">
        <div class="myBg backdrop" [style.background-image]="backgroundPath"></div>
        <div class="tint" style="background-image: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.6) 100%);"></div>
        <h1>{{issue.title}} </h1>
        <div class="col-md-6">
            <img class="img-responsive poster" src="{{posterPath}}" alt="poster">

            <div class="issue-status">
                <span *ngIf="issue.status === IssueStatus.Pending" id="pendingLabel" class="label label-warning">{{IssueStatus[issue.status]}}</span>
                <span *ngIf="issue.status === IssueStatus.InProgress" id="inprogressLabel" class="label label-info">{{IssueStatus[issue.status]}}</span>
                <span *ngIf="issue.status === IssueStatus.Resolved" id="resolvedLabel" class="label label-success">{{IssueStatus[issue.status]}}</span>
            </div>
            <span class="label label-success">{{issue.issueCategory.value}}</span>
            <br>
            <span class="reported-by">
                <h3 *ngIf="issue.userReported?.alias">{{'Issues.ReportedBy' | translate}}:</h3>
                <h3 *ngIf="!issue.userReported?.alias">{{'Issues.ReportedBy' | translate}}:</h3>
            </span>
            <span class="reported-user">
                <h3 *ngIf="issue.userReported?.alias">{{issue.userReported.alias}}</h3>
                <h3 *ngIf="!issue.userReported?.alias">{{issue.userReported.userName}}</h3>
            </span>
            <br>
            <span class="subject-category"><h3 *ngIf="issue.subject">{{'Issues.Subject' | translate}}:</h3></span>
            <span class="subject"><h3 *ngIf="issue.subject">{{issue.subject}}</h3></span>
            <br>
            <div class="form-group">
                <label for="description" class="control-label" [translate]="'Issues.Description'"></label>
                <div>
                    <textarea class="form-control-custom form-control" disabled="disabled" [(ngModel)]="issue.description" rows="5" type="text"></textarea>
                </div>
            </div>



        </div>


        <div class="row chat-window col-xs-7 col-md-5" id="chat_window_1" style="margin-left:10px;">
            <div class="col-xs-12 col-md-12">
                <div class="panel panel-default">
                    <div class="panel-heading top-bar">
                        <div class="col-md-8 col-xs-8">
                            <h3 class="panel-title">
                                <span class="glyphicon glyphicon-comment"></span> {{'Issues.Comments' | translate}}
                            </h3>
                        </div>
                    </div>

                    <div *ngIf="comments" class="panel-body msg_container_base">
                        <div *ngIf="comments.length <= 0" class="row msg_container base_receive">
                            <div class="col-md-10 col-xs-10">
                               
                                <div class="messages msg_sent"> 
                                       <p [translate]="'Issues.NoComments'"></p>
                                </div>
                            </div>
                        </div>

                        <div *ngFor="let comment of comments" class="row msg_container" [ngClass]="{'base_sent': comment.adminComment, 'base_receive': !comment.adminComment}">
                            <div class="col-md-10 col-xs-10">
                                
                                <div class="messages msg_sent"> <i *ngIf="isAdmin" style="float:right;" class="fas fa-times" aria-hidden="true" (click)="deleteComment(comment.id)"></i>
                                    <p>{{comment.comment}}</p>
                                    <time>{{comment.username}} • {{comment.date  | amLocal | amDateFormat: 'l LT'}}</time>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="panel-footer">
                        <div class="input-group">
                            <input id="btn-input" type="text" class="form-control input-sm chat_input" [(ngModel)]="newComment.comment" [attr.placeholder]="'Issues.WriteMessagePlaceholder' | translate" />
                            <span class="input-group-btn">
                                <button class="btn btn-primary btn-sm" id="btn-chat" (click)="addComment()" [translate]="'Issues.SendMessageButton'"></button>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-12">
            <div *ngIf="isAdmin && settings">
                <div *ngIf="issue.status === IssueStatus.Pending && settings.enableInProgress">
                    <button class="btn btn-primary btn-sm bottom-btn" (click)="inProgress()">{{'Issues.MarkInProgress' | translate }}</button>
                </div>
                <div *ngIf="issue.status === IssueStatus.Pending && !settings.enableInProgress || issue.status == IssueStatus.InProgress">
                    <button class="btn btn-primary btn-sm bottom-btn" (click)="resolve()" [translate]="'Issues.MarkResolved'"></button>
                </div>
            </div>
        </div>
    </div>
</div>