<div [ngClass]="{'global-content-area': isGlobalHT}"
     class="{{objectID ? 'openedFromWorkflow' : 'dashboard-content-area second-part' }}">
    <app-error-message></app-error-message>
    <form #form="ngForm">
        <div class="ui-g ui-fluid">
            <div class="ui-g-12 ui-md-12">
                <div class="ui-g ui-fluid" *ngIf="!objectID">
                    <div class="ui-g-12">
                        <div class="page-title page-title-with-arrow mb-1">
                            <a [routerLink]="[isGlobalHT ? '/list-message-templates/global' : '/admin/list-message-templates']"
                               class="arrow-btn-blue ml-0"
                               *ngIf="!objectID">
                                <img src="assets/images/arrow-left-prev_blue.svg" alt="">
                            </a>
                            {{editMode ? "Edit" : "Add"}} Message Template
                        </div>
                    </div>
                </div>
                <div class="form-group main-tab-template">
                    <span class="job-details culture">Message Template</span>
                </div>
                <div class="ui-g ui-fluid form message-template-form">
                    <div class="ui-g-12 ui-md-12">
                        <div class="form-group row">
                            <div class="col-md-6">
                                <label for="MessageTemplate{{messageTemplate.ObjectID}}">Message Template</label>
                                <input [(ngModel)]="messageTemplate.TemplateName"
                                       name="MessageTemplate{{messageTemplate.ObjectID}}" tabindex="1"
                                       autofocus required
                                       fieldLabel="Message Template" type="text" [disabled]="showLoader"
                                       class="form-control message-template" id="MessageTemplate{{messageTemplate.ObjectID}}">
                            </div>
                            <div class="col-md-6"
                                 *ngIf="this.messageTemplateTypes.length && this.messageTemplate && this.messageTemplate.TemplateType">
                                <label for="select">Message Template Type</label>
                                <app-select-2 [data]="messageTemplateTypes" [value]="this.messageTemplate.TemplateType"
                                              fieldLabel="Description" id="select"
                                              class="message-template-type"
                                              (valChange)="storeMessageContent($event)">
                                </app-select-2>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-md-6">
                                <label for="subjectInputId" *ngIf="emailTemplateType()">Subject</label>
                                <input id="subjectInputId" [(ngModel)]="messageTemplate.Subject"
                                       name="Subject{{messageTemplate.ObjectID}}"
                                       fieldLabel="Subject" placeholder="Subject" type="text"
                                       class="form-control subject" tabindex="2" *ngIf="emailTemplateType()"
                                       [disabled]="showLoader" required>
                            </div>
                            <div class="col-md-3" *ngIf="subjectPlaceholderOptions.length">
                                <label *ngIf="emailTemplateType()">Placeholder for Subject</label>
                                <app-select-2 [data]="subjectPlaceholderOptions" [value]="subjectPlaceholderOptions[0]"
                                              fieldLabel="Description" *ngIf="emailTemplateType()"
                                              class="subject-placeholder"
                                              (valChange)="addPlaceholderInSubject($event)">
                                </app-select-2>
                            </div>
                            <div class="col-md-3" *ngIf="contentPlaceholderOptions.length">
                                <label>Placeholder for Content</label>
                                <app-select-2 [data]="contentPlaceholderOptions" [value]="contentPlaceholderOptions[0]"
                                              fieldLabel="Description"
                                              class="content-placeholder"
                                              (valChange)="addPlaceholderInMessageContent($event)">
                                </app-select-2>
                            </div>
                        </div>
                        <p-overlayPanel #contentLinkModal>
                            <label class="ui-g-12" style="padding-left: 0;">Please enter anchor text</label>
                            <input pInputText name="contentLinkModal" type="text" class="ui-g-12"
                                   style="font-size:15px !important;height:25px !important;margin-bottom: 20px;"
                                   [(ngModel)]="this.linkText"
                                   id="contentLinkModal">
                            <button class="btn btn-primary add-more-btn" (click)="addAnchorText(true)">Add</button>
                            <button class="btn btn-primary add-more-btn" (click)="addAnchorText(false)">Cancel</button>
                        </p-overlayPanel>
                        <div class="row">
                            <div class="col-md-12">
                                <label>Message Content</label>
                                <p-editor *ngIf="emailTemplateType()" [(ngModel)]="messageTemplate.MessageContent"
                                          name="MessageContent{{messageTemplate.ObjectID}}"
                                          #messageContent
                                          class="message-content"
                                          fieldLabel="Message Content">
                                    <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>
                                        <span class="ql-formats">
                                    <button class="ql-list" aria-label="Bullet" value="bullet"></button>
                                    <button class="ql-link" aria-label="Link"></button>
                                </span>
                                    </p-header>
                                </p-editor>
                                <textarea id="messageContentTxtAreaId" *ngIf="smsTemplateType()"
                                          [(ngModel)]="messageTemplate.MessageContent"
                                          name="MessageContent" class="form-control textarea-box"
                                          fieldLabel="Message Content" [class.more-height]="!objectID"
                                          placeholder="Message Content"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="ui-g ui-fluid">
                    <div class="ui-g-12 ui-md-12">
                        <div class="text-center">
                            <button type="button" value="Cancel" class="btn btn-primary largeBtn greyBtn"
                                    (click)="cancelClicked()">Cancel
                            </button>
                            <button *ngIf="showSaveBtn()" type="button" value="Save"
                                    class="btn btn-primary largeBtn"
                                    (click)="saveMessageTemplate()" [disabled]="showLoader">
                                Save
                            </button>
                            <button *ngIf="showSaveIntoAllTemplates()" type="button"
                                    value="Save into all templates"
                                    class="btn btn-primary largeBtn"
                                    (click)="saveMessageTemplate()" [disabled]="showLoader">
                                Save into all templates
                            </button>
                            <button *ngIf="showSaveCopyBtn()" type="button" value="Save As a Copy"
                                    class="btn btn-primary largeBtn"
                                    (click)="saveMessageTemplate(true)" [disabled]="showLoader">
                                Save As a Copy
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="showPlainText"></div>
        <p-progressSpinner *ngIf="showLoader"></p-progressSpinner>
    </form>
</div>
