<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 | ombiDate: 'Ppp' }}</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>
