<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"
                      (onChange)="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>
