<div class="dashboard-content-area second-part">
    <app-error-message></app-error-message>
    <form #form="ngForm">
        <div class="ui-g ui-fluid mt-80">
            <div class="ui-g-10 listing-title pt-0 pb-0">{{editMode ? "Edit" : "Add"}} Message 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">
                        <div class="header-select custom-dropdown w-100">
                            <select2 [data]="messageTemplateTypes" [value]="this.messageTemplate.TemplateType.id"
                                     (valueChanged)="storeMessageContent($event)"
                                     [options]="options">
                            </select2>
                        </div>
                    </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">
                        <div class="header-select custom-dropdown w-100">
                            <select2 [data]="subjectPlaceholderOptions" [value]="subjectPlaceholderOptions[0].id"
                                     (valueChanged)="addPlaceholderInSubject($event)"
                                     [options]="options">
                            </select2>
                        </div>
                    </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">
                        <div class="header-select custom-dropdown w-100">
                            <select2 [data]="contentPlaceholderOptions" [value]="contentPlaceholderOptions[0].id"
                                     (valueChanged)="addPlaceholderInMessageContent($event)"
                                     [options]="options">
                            </select2>
                        </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">
                            <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="ui-g form-group">
                            <div class="ui-g-12 ui-md-3 ui-fluid">
                                <p-button label="Cancel" [disabled]="showLoader"
                                          routerLink="/admin/list-message-templates"></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>
</div>
