<form #form="ngForm">
    <div class="ui-g ui-fluid">
        <div class="ui-g-12 nopad">
            <p-toolbar>
                <div class="ui-toolbar-group-left">
                    {{editMode ? "Edit" : "Add"}} Message Template
                </div>
            </p-toolbar>
        </div>
    </div>
    <div class="ui-g form-group">
        <div class="ui-g-12 ui-md-3">
            <img data-elementID="image_sidePanel" title="sidePanel"
                 src="assets/images/SelectPanel_MessageFlow.png"/>
        </div>
        <div class="ui-g-12 ui-md-9">
            <div class="ui-g form-group">
                <div class="ui-g-12 ui-md-4 s-a-center">
                    <label>Message Template</label>
                </div>
                <div class="ui-g-12 ui-md-4 ui-fluid">
                    <input [(ngModel)]="messageTemplate.TemplateName" name="MessageTemplate{{messageTemplate.ObjectID}}"
                           fieldLabel="Message Template" type="text" [disabled]="showLoader" pInputText
                           class="form-control ui-inputtext" id="MessageTemplate{{messageTemplate.ObjectID}}">
                </div>
            </div>
            <div class="ui-g form-group">
                <div class="ui-g-12 ui-md-4">
                    <label>Message Template Type</label>
                </div>
                <div class="ui-g-12 ui-md-4 ui-fluid">
                    <p-dropdown [(ngModel)]="messageTemplate.TemplateType"
                                name="MessageTemplateType{{messageTemplate.ObjectID}}"
                                fieldLabel="Message Template Type"
                                [options]="messageTemplateTypes" optionLabel="Description" [disabled]="showLoader"
                                (onChange)="storeMessageContent()">
                    </p-dropdown>
                </div>
            </div>
            <div class="ui-g form-group" *ngIf="emailTemplateType()">
                <div class="ui-g-12 ui-md-4 s-a-center">
                    <label>Subject</label>
                </div>
                <div class="ui-g-12 ui-md-4 ui-fluid">
                    <input id="subjectInputId" [(ngModel)]="messageTemplate.Subject"
                           name="Subject{{messageTemplate.ObjectID}}"
                           fieldLabel="Subject" placeholder="Subject" type="text" pInputText
                           class="form-control ui-inputtext"
                           [disabled]="showLoader">
                </div>
                <div class="ui-g-12 ui-md-4">
                    <p-dropdown [(ngModel)]="subjectPlaceholder" name="SubjectOption{{messageTemplate.ObjectID}}"
                                [options]="subjectPlaceholderOptions" optionLabel="Description"
                                (onHide)="addPlaceholderInSubject()" [disabled]="showLoader">
                    </p-dropdown>
                </div>
            </div>
            <div class="ui-g form-group">
                <div class="ui-g-12 ui-md-4">
                    <label> Message Content </label>
                </div>
                <div class="ui-g-12 ui-md-4" *ngIf="emailTemplateType()">
                </div>
                <div class="ui-g-12 ui-md-4">
                    <p-dropdown [(ngModel)]="contentPlaceholder"
                                name="ContentOption{{messageTemplate.ObjectID}}"
                                [options]="contentPlaceholderOptions" optionLabel="Description"
                                (onChange)="addPlaceholderInMessageContent($event)" [disabled]="showLoader">
                    </p-dropdown>
                    <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;" [(ngModel)]="this.linkText"
                               id="overlay">
                        <p-button class="ui-button-success"
                                  (click)="addAnchorText(true); contentLinkModal.hide()">Add
                        </p-button>
                        <p-button class="ui-button-danger"
                                  (click)="addAnchorText(false); contentLinkModal.hide()">Cancel
                        </p-button>
                    </p-overlayPanel>
                </div>
            </div>
            <div class="ui-g form-group">
                <div class="ui-g-12 ui-md-12">
                    <p-editor *ngIf="emailTemplateType()" [(ngModel)]="messageTemplate.MessageContent"
                              name="MessageContent{{messageTemplate.ObjectID}}"
                              #messageContent
                              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()" pInputTextarea
                              [(ngModel)]="messageTemplate.MessageContent"
                              name="MessageContent{{messageTemplate.ObjectID}}"
                              fieldLabel="Message Content" style="width: 100%" placeholder="Message Content"></textarea>
                </div>
            </div>
            <div class="ui-g form-group">
                <div class="ui-g-12 ui-md-12">
                    <div class="ui-g form-group">
                        <div class="ui-g-12 ui-md-3 ui-fluid">
                            <p-button label="Cancel" [disabled]="showLoader"
                                      routerLink="/edit-message-template"></p-button>
                        </div>
                        <div class="ui-g-12 ui-md-3 ui-fluid">
                            <p-button *ngIf="showSaveBtn()" label="Save" [disabled]="showLoader"
                                      (onClick)="saveMessageTemplate()">
                            </p-button>
                        </div>
                        <div class="ui-g-12 ui-md-3 ui-fluid">
                            <p-button *ngIf="showSaveCopyBtn()" label="Save As a Copy" [disabled]="showLoader"
                                      (onClick)="saveMessageTemplate(true)">
                            </p-button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="showPlainText"></div>
    <p-progressSpinner *ngIf="showLoader"></p-progressSpinner>
</form>
