<div class="panel-container" id="chat-container" fxLayout="column" fxLayoutAlign="space-evenly none" >
	<div class="panel-header-container" fxFlex="55px" fxLayoutAlign="start center">
		<h3 class="panel-title">{{ 'PANEL.CHAT.TITLE' | translate }}</h3>
		<button class="panel-close-button" mat-icon-button matTooltip="{{ 'PANEL.CLOSE' | translate }}" (click)="close()">
			<mat-icon>close</mat-icon>
		</button>
	</div>

	<div class="text-container" fxFlex="20px">
		<p class="text-info">{{ 'PANEL.CHAT.SUBTITLE' | translate }}</p>
	</div>

	<div class="messages-container" fxFlex="75%" fxLayoutAlign="space-evenly none" #chatScroll>
		<div *ngFor="let data of messageList" class="message" [ngClass]="data.isLocal ? 'right' : 'left'">
			<div class="msg-detail">
				<div class="nickname-container">
					<p *ngIf="data.isLocal">{{ 'PANEL.CHAT.YOU' | translate }}</p>
					<p *ngIf="!data.isLocal">{{ data.nickname }}</p>
				</div>
				<div class="msg-content">
					<p [innerHTML]="data.message | linkify"></p>
				</div>
			</div>
		</div>
	</div>

	<div class="input-container" fxFlex="55px" fxFlexOrder="3" fxLayoutAlign="space-evenly none">
		<textarea
			#chatInput
			maxlength="500"
			rows="4"
			placeholder="{{ 'PANEL.CHAT.PLACEHOLDER' | translate }}"
			autocomplete="off"
			(keypress)="eventKeyPress($event)"
			[(ngModel)]="message"
			id="chat-input"
		></textarea>
		<button mat-icon-button id="send-btn" (click)="sendMessage()">
			<mat-icon matTooltip="{{ 'PANEL.CHAT.SEND' | translate }}">send</mat-icon>
		</button>
	</div>
</div>
