<div class="dashboard-content-area second-part">
    <app-error-message></app-error-message>
    <form #form="ngForm">
        <div class="ui-g ui-fluid">
            <div class="ui-g-10 listing-title pt-0 pb-0">{{editMode ? "Edit" : "Add"}} Workflow Template</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-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"
                         *ngIf="this.messageTemplateTypes.length && this.messageTemplate && this.messageTemplate.TemplateType">
                        <app-select-2 [data]="messageTemplateTypes" [value]="templateTypeId"
                                      fieldLabel="Description"
                                      (valChange)="storeMessageContent($event)">
                        </app-select-2>
                    </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" *ngIf="subjectPlaceholderOptions.length">
                        <app-select-2 [data]="subjectPlaceholderOptions" [value]="0"
                                      fieldLabel="Description"
                                      (valChange)="addPlaceholderInSubject($event)">
                        </app-select-2>
                    </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" *ngIf="contentPlaceholderOptions.length">
                        <app-select-2 [data]="contentPlaceholderOptions" [value]="0"
                                      fieldLabel="Description"
                                      (valChange)="addPlaceholderInMessageContent($event)">
                        </app-select-2>
                        <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">
                            <p-button class="ui-button-success"
                                      (click)="addAnchorText(true)">Add
                            </p-button>
                            <p-button class="ui-button-danger"
                                      (click)="addAnchorText(false)">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="text-center form-group">
                            <button type="button" value="Cancel" class="btn btn-primary largeBtn greyBtn"
                                    routerLink="/admin/list-message-templates">Cancel
                            </button>
                            <button *ngIf="showSaveBtn()" type="button" value="Save" class="btn btn-primary largeBtn"
                                    (click)="saveMessageTemplate()" [disabled]="showLoader">
                                Save
                            </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>
