<div class="{{embedded ? 'openedFromWorkflow' : 'dashboard-content-area second-part' }}">
    <app-error-message></app-error-message>
    <form #form="ngForm" *ngIf="jobId && loggedInId">
        <div class="ui-g ui-fluid">
            <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 [routerLink]="[previousUrl]" class="arrow-btn-blue ml-0" *ngIf="!embedded">
                            <img src="assets/images/arrow-left-prev_blue.svg">
                        </a>
                        {{jobApplication?.Job?.JobTitle}} - {{jobApplication?.Job?.HiringTeam?.HiringTeamName}}
                    </div>
                    <a class="arrow-btn-blue ml-0 ng-star-inserted minimize" *ngIf="embedded" (click)="minimize.emit()">
                        <img src="assets/images/arrow-left-prev_blue.svg">
                    </a>
                </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">
                                        <div [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.ObjectCreatedStr | oneitdate : 'dd/MM/yyyy HH:mm' : 'MM-dd-yyyy HH:mm'}}</div>
                                        </div>
                                    </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">
                                        <div [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.ObjectCreatedStr | oneitdate : 'dd/MM/yyyy HH:mm' : 'MM-dd-yyyy HH:mm'}}</div>
                                        </div>
                                    </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">
                                <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>
                                    </p-header>
                                </p-editor>
                            </div>
                            <div class="ui-g-3">
                                <app-select-2 *ngIf="sentViaEnum && embedded" (valChange)="updateSentVia($event)"
                                              [data]="sentViaEnum"
                                              [value]="Message.SentVia"
                                              fieldLabel="Description">
                                </app-select-2>
                                <div class="buttons-wrapper">
                                    <button class="sendBtn" (click)="saveEngineApplicantView()"
                                            [disabled]="showLoader">
                                        <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
                                             xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                                             viewBox="0 0 512 512" enable-background="new 0 0 512 512"
                                             xml:space="preserve">
                                        <path id="paper-plane-icon" d="M462,54.955L355.371,437.187l-135.92-128.842L353.388,167l-179.53,124.074L50,260.973L462,54.955z
M202.992,332.528v124.517l58.738-67.927L202.992,332.528z"></path>
                                    </svg>
                                    </button>
                                    <button *ngIf="embedded" type="button" pButton label="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"
                                              chooseLabel="Browse"
                                              multiple="multiple" accept="image/*" maxFileSize="1000000">
                                    <ng-template pTemplate="content">
                                        <ul *ngIf="Message.Attachments.length">
                                            <li *ngFor="let file of Message.Attachments">{{file.File.Name}}</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="!jobId || !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 [routerLink]="[previousUrl]" class="arrow-btn-blue ml-0" *ngIf="!embedded">
                        <img src="assets/images/arrow-left-prev_blue.svg">
                    </a>
                    Please select an application and a user...
                </div>
                <a class="arrow-btn-blue ml-0 ng-star-inserted minimize" *ngIf="embedded" (click)="minimize.emit()">
                    <img src="assets/images/arrow-left-prev_blue.svg">
                </a>
            </div>
        </div>
    </div>
</div>
