<div class="{{embedded ? 'openedFromWorkflow' : 'dashboard-content-area second-part' }}">
    <form #form="ngForm" *ngIf="jobApplicationID && loggedInId">
        <div class="ui-g ui-fluid">
            <div class="ui-g-12 ui-md-12">
                <div *ngIf="embedded" class="main-tab-template pl-1 h-45">
                    <div class="chief-officer mb-0">
                        {{heading}}
                    </div>
                    <a class="arrow-btn-blue ml-0 ng-star-inserted minimize" (click)="minimize.emit()">
                        <span class="ui-icon-close" title="Close"></span>
                    </a>
                </div>
                <div *ngIf="!embedded" class="main-tab-template pl-1">
                    <div class="chief-officer mb-0">
                        <a (click)="goBack()" class="arrow-btn-blue ml-0 c-pointer">
                            <img src="assets/images/arrow-left-prev_blue.svg" alt="Back">
                        </a>
                        {{heading}}
                    </div>
                </div>
                <div class="ui-g ui-fluid {{embedded ? '' : 'form' }}">
                    <div class="ui-g-12 ui-md-12">
                        <div class="ui-g-12 ui-md-12 messages-wrapper">
                            <div class="ui-g ui-fluid" *ngFor="let message of jobApplication.Messages">
                                <div class="ui-g-10 message-block" *ngIf="message.SentBy.ObjectID !== loggedInId">
                                    <div class="ui-g-12 ui-md-1 name other {{embedded ? 'pad-5' : '' }}">
                                        <label>{{message.SentBy.Name[0]}}</label>
                                    </div>
                                    <div class="ui-g-12 ui-md-11">
                                        <ng-container
                                            *ngTemplateOutlet="messageDisplay; context:{message: message}"></ng-container>
                                    </div>
                                </div>
                                <div class="ui-g-offset-2 ui-g-10 message-block"
                                     *ngIf="message.SentBy.ObjectID === loggedInId">
                                    <div class="ui-g-10 ui-md-11">
                                        <ng-container
                                            *ngTemplateOutlet="messageDisplay; context:{message: message}"></ng-container>
                                    </div>
                                    <div class="ui-g-12 ui-md-1 name owner {{embedded ? 'pad-5' : '' }}">
                                        <label>{{message.SentBy.Name[0]}}</label>
                                    </div>
                                </div>
                            </div>
                            <div class="ui-g ui-fluid"
                                 *ngIf="jobApplication.Messages && jobApplication.Messages.length === 0">
                                <div class="ui-g-10 text-center">
                                    Start a new conversation...
                                </div>
                            </div>
                        </div>
                        <div class="ui-g-12 ui-fluid">
                            <div class="ui-g-9 resizeable">
                                <p-editor #message [(ngModel)]="Message.MessageContent" name="MessageContent">
                                    <p-header>
                                        <span class="ql-formats">
                                            <button class="ql-bold" aria-label="Bold"></button>
                                            <button class="ql-italic" aria-label="Italic"></button>
                                            <button class="ql-underline" aria-label="Underline"></button>
                                        </span>
                                        <button (click)="triggerUpload()" class="attachment-icon">
                                            <span class="ui-icon-attach-file"></span>
                                        </button>
                                    </p-header>
                                </p-editor>
                            </div>
                            <div class="ui-g-3">
                                <p-splitButton [class.non-embed]="!embedded" label="Send" icon="ui-icon-send"
                                               (onClick)="saveEngineApplicantView()"
                                               [disabled]="sendCriteria()"
                                               [model]="sentViaMenuItems">
                                </p-splitButton>
                                <div class="buttons-wrapper">
                                    <button *ngIf="embedded" type="button" pButton label="Mark as read"
                                            icon="ui-icon-check"
                                            (click)="markAsRead()"></button>
                                </div>
                                <p-fileUpload *ngIf="Message.Attachments"
                                              name="File" [withCredentials]="true"
                                              id="File" url="{{apiUrl}}uploadFile" auto="true"
                                              (onUpload)="onUpload($event)" [disabled]="showLoader"
                                              [ngClass]="{'showBox':Message.Attachments.length}"
                                              chooseLabel="Browse" #uploader multiple="multiple">
                                    <ng-template let-file pTemplate="file">
                                        <div>Uploading...</div>
                                    </ng-template>
                                    <ng-template pTemplate="content">
                                        <ul *ngIf="Message.Attachments.length">
                                            <li *ngFor="let file of Message.Attachments" class="attachment-content">
                                                <div [title]="file.File.Name">Attachment {{file.File.Index + 1}} </div>
                                                <a (click)="removeAttachment(file)">
                                                    <span class="ui-icon-close" title="Remove"></span>
                                                </a>
                                            </li>
                                        </ul>
                                    </ng-template>
                                </p-fileUpload>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="showPlainText"></div>
        <p-progressSpinner *ngIf="showLoader"></p-progressSpinner>
    </form>
    <div class="ui-g ui-fluid" *ngIf="!jobApplicationID || !loggedInId">
        <div class="ui-g-12 ui-md-12">
            <div class="main-tab-template pl-1 {{embedded ? 'h-45' : '' }}">
                <div class="chief-officer mb-0">
                    <a (click)="goBack()" class="arrow-btn-blue ml-0 c-pointer" *ngIf="!embedded">
                        <img src="assets/images/arrow-left-prev_blue.svg" alt="Back">
                    </a>
                    {{heading}}
                </div>
                <a class="arrow-btn-blue ml-0 ng-star-inserted minimize" *ngIf="embedded" (click)="minimize.emit()">
                    <span class="ui-icon-close" title="Close"></span>
                </a>
            </div>
        </div>
    </div>
</div>

<ng-template let-message="message" #messageDisplay>
    <div class="break-word" [innerHTML]="message.MessageContent"></div>
    <div class="attachments">
        <a *ngFor="let attachment of message.Attachments"
           href="{{apiUrl+attachment.File.URI}}"
           target="_blank">{{attachment.File.Name}}</a>
    </div>
    <div class="message-footer">
        <div>via {{message.SentVia.Description}}</div>
        <div>{{message.ObjectCreated | oneitdate : 'dd/MM/yyyy HH:mm'}}</div>
    </div>
</ng-template>
