<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">
                    <p-dialog header="Message Template" [(visible)]="displayNewMessageTemplate" #messageTemplateDialog>
                        <app-edit-message-template *ngIf="displayNewMessageTemplate"
                                                   [objectID]="selectedTemplateID"
                                                   (closeModal)="closeDialog($event)"></app-edit-message-template>
                    </p-dialog>
                    <div class="ui-g-12 ui-g-offset-4 ui-md-4">
                        <label for="TemplateNameId" (click)="toggleInput($event, 'TemplateName')"
                               *ngIf="showLabel('TemplateName')">{{workflow.TemplateName}}</label>
                        <input id="TemplateNameId" *ngIf="showInput('TemplateName')" pInputText
                               [(ngModel)]="workflow.TemplateName" [disabled]="showLoader"
                               (blur)="toggleInput($event, 'TemplateName')"
                               name="TemplateName" required/>
                    </div>
                </div>
                <!-- Start Pre stages -->
                <div class="ui-g form-group">
                    <div class="ui-g-12 ui-md-12">
                        <p-panel *ngFor="let stage of filteredStages(true, false)" toggler="header"
                                 [toggleable]="true">
                            <p-header>
                                <span class="ui-panel-title" *ngIf="showStageLabel('StageName'+stage.ObjectID, stage)"
                                      (click)="toggleStageInput($event, 'StageName'+stage.ObjectID, stage)">
                                    {{getStageHeader(stage)}}
                                </span>
                            </p-header>
                            <div class="ui-g form-group">
                                <div class="ui-g-12 ui-md-12">
                                    <h4>Landing Page</h4>
                                    <hr>
                                    <div class="form-group row">
                                        <div class="col-md-8">
                                            <label for="LandingButtonText">Button Text</label>
                                            <input name="LandingButtonText" type="text" class="form-control"
                                                   id="LandingButtonText"
                                                   [(ngModel)]="workflow.LandingButtonText" [disabled]="showLoader"
                                                   fieldLabel="Landing Button Text"
                                                   tabindex="1" required>
                                        </div>
                                    </div>
                                    <h4>Verification Page</h4>
                                    <hr/>
                                    <div class="form-group row">
                                        <div class="col-md-12">
                                            <label for="VerificationHeaderText">Header Text</label>
                                            <input name="VerificationHeaderText" type="text" class="form-control"
                                                   id="VerificationHeaderText" [disabled]="showLoader"
                                                   [(ngModel)]="workflow.VerificationHeaderText"
                                                   fieldLabel="Verification Header Text"
                                                   tabindex="2" required>
                                        </div>
                                    </div>
                                    <h4>Application</h4>
                                    <hr/>
                                    <div class="ui-g form-group">
                                        <div class="ui-g-12 ui-md-6">
                                            <div class="ui-g-12 ui-md-4">
                                                <label> Capture CV </label>
                                            </div>
                                            <div class="ui-g-12 ui-md-2">
                                                <p-inputSwitch [(ngModel)]="workflow.CaptureCV" name="CaptureCV"
                                                               [disabled]="showLoader">
                                                </p-inputSwitch>
                                            </div>
                                        </div>
                                        <div *ngIf="workflow.CaptureCV" class="ui-g-12 ui-md-6">
                                            <div class="ui-g-12 ui-md-4">
                                                <label> Mandatory </label>
                                            </div>
                                            <div class="ui-g-12 ui-md-2">
                                                <p-inputSwitch [(ngModel)]="workflow.IsCVMandatory"
                                                               [disabled]="showLoader"
                                                               name="IsCVMandatory">
                                                </p-inputSwitch>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="ui-g form-group">
                                        <div class="ui-g-12 ui-md-6">
                                            <div class="ui-g-12 ui-md-4">
                                                <label>Capture Cover Letter</label>
                                            </div>
                                            <div class="ui-g-12 ui-md-2">
                                                <p-inputSwitch [(ngModel)]="workflow.CaptureCL" name="CaptureCL"
                                                               [disabled]="showLoader">
                                                </p-inputSwitch>
                                            </div>
                                        </div>
                                        <div *ngIf="workflow.CaptureCL" class="ui-g-12 ui-md-6">
                                            <div class="ui-g-12 ui-md-4">
                                                <label> Mandatory </label>
                                            </div>
                                            <div class="ui-g-12 ui-md-2">
                                                <p-inputSwitch [(ngModel)]="workflow.IsCLMandatory"
                                                               [disabled]="showLoader"
                                                               name="IsCLMandatory">
                                                </p-inputSwitch>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <div class="col-md-12">
                                            <label>Button Text</label>
                                            <input name="ApplicationButtonText" type="text" class="form-control"
                                                   [(ngModel)]="workflow.ApplicationButtonText"
                                                   [disabled]="showLoader"
                                                   fieldLabel="Application Button Text"
                                                   tabindex="7" required>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <div class="col-md-2">
                                            <label>Action</label>
                                        </div>
                                        <div class="col-md-10">
                                            <p-selectButton [options]="responseActions"
                                                            [(ngModel)]="workflow.ApplicationResponseAction"
                                                            optionLabel="Description"
                                                            name="ApplicationResponseAction">
                                            </p-selectButton>
                                        </div>
                                    </div>
                                    <div class="form-group row" *ngIf="emailResponseSelected()">
                                        <div class="col-md-6">
                                            <label for="ThankYouHeaderText">Header Text for Thank You page</label>
                                            <input name="ThankYouHeaderText" [(ngModel)]="workflow.ThankYouHeaderText"
                                                   id="ThankYouHeaderText" [disabled]="showLoader"
                                                   type="text" class="form-control"
                                                   fieldLabel="Header Text for Thank You page"
                                                   tabindex="8" required>
                                        </div>
                                        <div class="col-md-6">
                                            <label for="ThankYouSecondaryText">Secondary Text</label>
                                            <input name="ThankYouSecondaryText" id="ThankYouSecondaryText"
                                                   [(ngModel)]="workflow.ThankYouSecondaryText" [disabled]="showLoader"
                                                   fieldLabel="Secondary Text" type="text" class="form-control"
                                                   tabindex="9">
                                        </div>
                                    </div>
                                    <h4>Job Outline Page</h4>
                                    <hr/>
                                    <div class="form-group row">
                                        <div class="col-md-12">
                                            <label for="JobOutlineButtonText">Button Text</label>
                                            <input name="JobOutlineButtonText" id="JobOutlineButtonText"
                                                   [(ngModel)]="workflow.JobOutlineButtonText"
                                                   type="text" class="form-control" [disabled]="showLoader"
                                                   fieldLabel="Job Outline Button Text"
                                                   tabindex="10" required>
                                        </div>
                                    </div>
                                </div>
                                <!-- Start steps section -->
                                <div class="ui-g-12 ui-md-12">
                                    <div class="form-group row">
                                        <div class="col-md-6">
                                            <h3>Steps</h3>
                                        </div>
                                        <div class="col-md-offset-2 col-md-4" *ngIf="stepTypes && stepTypes.length">
                                            <app-select-2 [data]="stepTypes" [value]="0"
                                                          fieldLabel="Description"
                                                          (valChange)="addStep($event, stage)">
                                            </app-select-2>
                                        </div>
                                    </div>
                                    <p-orderList [value]="stage.Steps" header="Steps"
                                                 dragdrop="true" (onReorder)="reAssignStepOrders(stage)">
                                        <ng-template let-step pTemplate="item">
                                            <div class="drag-block">
                                                <div class="col-md-4">
                                                    <h4>{{step.StepType.Description}}</h4>
                                                </div>
                                                <div class="col-md-2">
                                                    <button type="button" pButton label=" " icon="ui-icon-close"
                                                            [disabled]="showLoader"
                                                            (click)="removeStep(step, stage)"></button>
                                                </div>
                                                <div class="col-md-6"></div>
                                            </div>
                                        </ng-template>
                                    </p-orderList>
                                    <hr/>
                                </div>
                                <!-- End steps section -->
                                <!-- Start messaging section -->
                                <div class="ui-g-12 ui-md-12">
                                    <div class="form-group row">
                                        <div class="ui-g-12 ui-md-6">
                                            <label> Automatically progress to next stage </label>
                                        </div>
                                        <div class="ui-g-12 ui-md-4">
                                            <p-inputSwitch [(ngModel)]="stage.AutoProgress" [disabled]="showLoader"
                                                           name="AutoProgress{{stage.ObjectID}}">
                                            </p-inputSwitch>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <div class="ui-g-12 ui-md-6">
                                            <label> Use messaging </label>
                                        </div>
                                        <div class="ui-g-12 ui-md-4">
                                            <p-inputSwitch [(ngModel)]="stage.UseMessaging" [disabled]="showLoader"
                                                           name="UseMessaging{{stage.ObjectID}}">
                                            </p-inputSwitch>
                                        </div>
                                    </div>
                                    <p-panel header="{{stageMessagesCount(stage)}}" [toggleable]="true"
                                             [collapsed]="!stage.UseMessaging">
                                        <div class="form-group row">
                                            <div class="col-md-offset-9 col-md-3">
                                                <button class="btn btn-primary add-more-btn" tabindex="11"
                                                        [disabled]="showLoader"
                                                        (click)="addMessage(stage)">Add Message
                                                </button>
                                            </div>
                                        </div>
                                        <!-- Display Messages here -->
                                        <div class="form-group row" *ngFor="let message of stage.WorkFlowMessages">
                                            <div class="col-lg-12 col-md-12" *ngIf="message.IsWithdrawalMessage">
                                                <h3>Withdrawal Process</h3>
                                            </div>
                                            <div class="col-lg-12 col-md-12">
                                                <div class="col-md-2">
                                                    <label>After</label>
                                                    <p-inputMask name="Delay{{message.ObjectID}}"
                                                                 class="form-control" [disabled]="showLoader"
                                                                 id="Delay{{message.ObjectID}}"
                                                                 [(ngModel)]="message.Delay"
                                                                 characterPattern="[(\d+\:\d+\:\d+)|(\d+\:\d+)|(\d+)]"
                                                                 *ngIf="showDelayInput('Delay'+message.ObjectID, message)"
                                                                 (onBlur)="toggleDelayInput($event, 'Delay'+message.ObjectID,message)"
                                                                 mask="99:99:99">
                                                    </p-inputMask>
                                                    <label
                                                        (click)="toggleDelayInput($event, 'Delay'+message.ObjectID,message)"
                                                        *ngIf="showDelayLabel('Delay'+message.ObjectID, message)">{{message.Delay}}</label>
                                                </div>
                                                <div class="col-md-2">
                                                    <label for="Variance{{message.ObjectID}}">+/-</label>
                                                    <input name="Variance{{message.ObjectID}}"
                                                           id="Variance{{message.ObjectID}}"
                                                           [(ngModel)]="message.Variance" [disabled]="showLoader"
                                                           type="text" class="form-control">
                                                </div>
                                                <div class="col-md-2">
                                                    <label>Business Hours only</label>
                                                    <p-checkbox name="BusinessHoursOnly{{message.ObjectID}}"
                                                                [(ngModel)]="message.BusinessHoursOnly"
                                                                binary="true">
                                                    </p-checkbox>
                                                </div>
                                                <div class="col-md-4">
                                                    <label>Send</label>
                                                    <p-dropdown [options]="messageTemplates" filter="true"
                                                                optionLabel="TemplateName"
                                                                name="messageTemplate{{message.ObjectID}}"
                                                                [(ngModel)]="message.MessageTemplate">
                                                        <ng-template let-message pTemplate="selectedItem">
                                                            <i class="{{getMessageClass(message.value)}}"></i>
                                                            <span class="dropdown-text">{{message.label}}</span>
                                                        </ng-template>
                                                        <ng-template let-selectedMsg pTemplate="item">
                                                            <div class="ui-helper-clearfix"
                                                                 style="position: relative;height: 25px;">
                                                                <i class="{{getMessageClass(selectedMsg.value)}}"></i>
                                                                <div
                                                                    class="dropdown-text">{{selectedMsg.label}}</div>
                                                            </div>
                                                        </ng-template>
                                                    </p-dropdown>
                                                </div>
                                                <div class="col-md-2 text-center">
                                                    <button type="button" pButton label=" " [disabled]="showLoader"
                                                            icon="ui-icon-settings"
                                                            (click)="configureMessageTemplate(message)"></button>
                                                    <button type="button" pButton label=" " [disabled]="showLoader"
                                                            icon="ui-icon-close"
                                                            *ngIf="!message.IsWithdrawalMessage"
                                                            (click)="removeMessage(message, stage)"></button>
                                                </div>
                                            </div>
                                        </div>

                                    </p-panel>
                                    <!-- End displaying messages -->
                                    <hr/>
                                </div>
                                <!-- End messaging section -->
                            </div>
                        </p-panel>
                    </div>
                </div>
                <!-- End Pre stages -->
                <div class="row">
                    <div class="col-md-6 text-right">
                        <h3>Stages</h3>
                    </div>
                    <div class="col-md-3 col-md-offset-3">
                        <button class="btn btn-primary add-more-btn" tabindex="11" [disabled]="showLoader"
                                (click)="addStage()">Add Stage
                        </button>
                    </div>
                </div>
                <div class="ui-g form-group">
                    <div class="ui-g-12 ui-md-12">
                        <p-panel *ngFor="let stage of filteredStages(false, false)" toggler="header"
                                 [toggleable]="true">
                            <p-header>
                                <span class="ui-panel-title" *ngIf="showStageLabel('StageName'+stage.SortOrder, stage)"
                                      (click)="toggleStageInput($event, 'StageName'+stage.SortOrder, stage)">
                                    {{getStageHeader(stage)}}
                                </span>
                                <input id="StageName{{stage.SortOrder}}Id"
                                       *ngIf="showStageInput('StageName'+stage.SortOrder, stage)"
                                       pInputText [disabled]="showLoader"
                                       [(ngModel)]="stage.Name"
                                       (blur)="toggleStageInput($event, 'StageName'+stage.SortOrder, stage)"
                                       name="StageName{{stage.SortOrder}}" required/>
                            </p-header>
                            <div class="ui-g form-group">
                                <!-- Start steps section -->
                                <div class="ui-g-12 ui-md-12" *ngIf="!stage.StageType.IsPostStage">
                                    <div class="form-group row">
                                        <div class="col-md-offset-8 col-md-4" *ngIf="stepTypes && stepTypes.length">
                                            <app-select-2 [data]="stepTypes" [value]="0"
                                                          fieldLabel="Description"
                                                          (valChange)="addStep($event, stage)">
                                            </app-select-2>
                                        </div>
                                    </div>
                                    <p-orderList [value]="stage.Steps" header="Steps"
                                                 dragdrop="true" (onReorder)="reAssignStepOrders(stage)">
                                        <ng-template let-step pTemplate="item">
                                            <div class="drag-block">
                                                <div class="col-md-4">
                                                    <h4>{{step.StepType.Description}}</h4>
                                                </div>
                                                <div class="col-md-2">
                                                    <button type="button" pButton label=" " [disabled]="showLoader"
                                                            icon="ui-icon-close"
                                                            (click)="removeStep(step, stage)"></button>
                                                </div>
                                                <div class="col-md-6"></div>
                                            </div>
                                        </ng-template>
                                    </p-orderList>
                                    <hr/>
                                </div>
                                <!-- End steps section -->
                                <!-- Start messaging section -->
                                <div class="ui-g-12 ui-md-12">
                                    <div class="form-group row">
                                        <div class="ui-g-12 ui-md-6">
                                            <label> Automatically progress to next stage </label>
                                        </div>
                                        <div class="ui-g-12 ui-md-4">
                                            <p-inputSwitch [(ngModel)]="stage.AutoProgress" [disabled]="showLoader"
                                                           name="AutoProgress{{stage.ObjectID}}">
                                            </p-inputSwitch>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <div class="ui-g-12 ui-md-6">
                                            <label> Use messaging </label>
                                        </div>
                                        <div class="ui-g-12 ui-md-4">
                                            <p-inputSwitch [(ngModel)]="stage.UseMessaging" [disabled]="showLoader"
                                                           name="UseMessaging{{stage.ObjectID}}">
                                            </p-inputSwitch>
                                        </div>
                                    </div>
                                    <p-panel header="{{stageMessagesCount(stage)}}" [toggleable]="true"
                                             [collapsed]="!stage.UseMessaging">
                                        <div class="form-group row">
                                            <div class="col-md-offset-9 col-md-3">
                                                <button class="btn btn-primary add-more-btn" tabindex="11"
                                                        [disabled]="showLoader"
                                                        (click)="addMessage(stage)">Add Message
                                                </button>
                                            </div>
                                        </div>
                                        <!-- Display Messages here -->
                                        <div class="form-group row"
                                             *ngFor="let message of stage.WorkFlowMessages">
                                            <div class="col-lg-12 col-md-12"
                                                 *ngIf="message.IsWithdrawalMessage">
                                                <h3>Withdrawal Process</h3>
                                            </div>
                                            <div class="col-lg-12 col-md-12">
                                                <div class="col-md-2">
                                                    <label>After</label>
                                                    <p-inputMask name="Delay{{message.ObjectID}}"
                                                                 class="form-control"
                                                                 id="Delay{{message.ObjectID}}"
                                                                 [(ngModel)]="message.Delay" [disabled]="showLoader"
                                                                 characterPattern="[(\d+\:\d+\:\d+)|(\d+\:\d+)|(\d+)]"
                                                                 *ngIf="showDelayInput('Delay'+message.ObjectID, message)"
                                                                 (onBlur)="toggleDelayInput($event, 'Delay'+message.ObjectID,message)"
                                                                 mask="99:99:99">
                                                    </p-inputMask>
                                                    <label
                                                        (click)="toggleDelayInput($event, 'Delay'+message.ObjectID,message)"
                                                        *ngIf="showDelayLabel('Delay'+message.ObjectID, message)">{{message.Delay}}</label>
                                                </div>
                                                <div class="col-md-2">
                                                    <label for="Variance{{message.ObjectID}}">+/-</label>
                                                    <input name="Variance{{message.ObjectID}}"
                                                           id="Variance{{message.ObjectID}}"
                                                           [(ngModel)]="message.Variance" [disabled]="showLoader"
                                                           type="text" class="form-control">
                                                </div>
                                                <div class="col-md-2">
                                                    <label>Business Hours only</label>
                                                    <p-checkbox name="BusinessHoursOnly{{message.ObjectID}}"
                                                                [(ngModel)]="message.BusinessHoursOnly"
                                                                binary="true">
                                                    </p-checkbox>
                                                </div>
                                                <div class="col-md-4">
                                                    <label>Send</label>
                                                    <p-dropdown [options]="messageTemplates" filter="true"
                                                                optionLabel="TemplateName"
                                                                name="messageTemplate{{message.ObjectID}}"
                                                                [(ngModel)]="message.MessageTemplate"
                                                                (onChange)="showMessageTemplateDialog($event, message)"
                                                                [autoDisplayFirst]="false">
                                                        <ng-template let-message pTemplate="selectedItem">
                                                            <i class="{{getMessageClass(message.value)}}"></i>
                                                            <span
                                                                class="dropdown-text">{{message.label}}</span>
                                                        </ng-template>
                                                        <ng-template let-selectedMsg pTemplate="item">
                                                            <div class="ui-helper-clearfix"
                                                                 style="position: relative;height: 25px;">
                                                                <i class="{{getMessageClass(selectedMsg.value)}}"></i>
                                                                <div
                                                                    class="dropdown-text">{{selectedMsg.label}}</div>
                                                            </div>
                                                        </ng-template>
                                                    </p-dropdown>
                                                </div>
                                                <div class="col-md-2 text-center">
                                                    <button type="button" pButton label=" " [disabled]="showLoader"
                                                            icon="ui-icon-settings"
                                                            (click)="configureMessageTemplate(message)"></button>
                                                    <button type="button" pButton label=" "
                                                            icon="ui-icon-close" [disabled]="showLoader"
                                                            *ngIf="!message.IsWithdrawalMessage"
                                                            (click)="removeMessage(message, stage)"></button>
                                                </div>
                                            </div>
                                        </div>

                                    </p-panel>
                                    <!-- End displaying messages -->
                                    <hr/>
                                    <div class="form-group row">
                                        <div class="ui-g-12 ui-md-6">
                                            <button class="btn btn-primary add-more-btn" [disabled]="showLoader"
                                                    (click)="removeStage(stage)">Remove Stage
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <!-- End messaging section -->
                            </div>
                        </p-panel>

                        <!-- Start Post Stages -->
                        <p-panel *ngFor="let stage of filteredStages(false, true)" toggler="header" [toggleable]="true">
                            <p-header>
                                <span class="ui-panel-title" *ngIf="showStageLabel('StageName'+stage.ObjectID, stage)"
                                      (click)="toggleStageInput($event, 'StageName'+stage.ObjectID, stage)">
                                    {{getStageHeader(stage)}}
                                </span>
                            </p-header>
                            <div class="ui-g form-group">
                                <!-- Start messaging section -->
                                <div class="ui-g-12 ui-md-12">
                                    <div class="form-group row">
                                        <div class="ui-g-12 ui-md-6">
                                            <label> Automatically progress to next stage </label>
                                        </div>
                                        <div class="ui-g-12 ui-md-4">
                                            <p-inputSwitch [(ngModel)]="stage.AutoProgress" [disabled]="showLoader"
                                                           name="AutoProgress{{stage.ObjectID}}">
                                            </p-inputSwitch>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <div class="ui-g-12 ui-md-6">
                                            <label> Use messaging </label>
                                        </div>
                                        <div class="ui-g-12 ui-md-4">
                                            <p-inputSwitch [(ngModel)]="stage.UseMessaging" [disabled]="showLoader"
                                                           name="UseMessaging{{stage.ObjectID}}">
                                            </p-inputSwitch>
                                        </div>
                                    </div>
                                    <p-panel header="{{stageMessagesCount(stage)}}" [toggleable]="true"
                                             [collapsed]="!stage.UseMessaging">
                                        <div class="form-group row">
                                            <div class="col-md-offset-9 col-md-3">
                                                <button class="btn btn-primary add-more-btn" tabindex="11"
                                                        [disabled]="showLoader"
                                                        (click)="addMessage(stage)" *ngIf="stage.UseMessaging">Add
                                                    Message
                                                </button>
                                            </div>
                                        </div>
                                        <!-- Display Messages here -->
                                        <div class="form-group row" *ngFor="let message of stage.WorkFlowMessages">
                                            <div class="col-lg-12 col-md-12" *ngIf="message.IsWithdrawalMessage">
                                                <h3>Withdrawal Process</h3>
                                            </div>
                                            <div class="col-lg-12 col-md-12" *ngIf="stage.UseMessaging">
                                                <div class="col-md-2">
                                                    <label>After</label>
                                                    <p-inputMask name="Delay{{message.ObjectID}}"
                                                                 class="form-control"
                                                                 id="Delay{{message.ObjectID}}" [disabled]="showLoader"
                                                                 [(ngModel)]="message.Delay"
                                                                 characterPattern="[(\d+\:\d+\:\d+)|(\d+\:\d+)|(\d+)]"
                                                                 *ngIf="showDelayInput('Delay'+message.ObjectID, message)"
                                                                 (onBlur)="toggleDelayInput($event, 'Delay'+message.ObjectID,message)"
                                                                 mask="99:99:99">
                                                    </p-inputMask>
                                                    <label
                                                        (click)="toggleDelayInput($event, 'Delay'+message.ObjectID,message)"
                                                        *ngIf="showDelayLabel('Delay'+message.ObjectID, message)">{{message.Delay}}</label>
                                                </div>
                                                <div class="col-md-2">
                                                    <label for="Variance{{message.ObjectID}}">+/-</label>
                                                    <input name="Variance{{message.ObjectID}}"
                                                           id="Variance{{message.ObjectID}}"
                                                           [(ngModel)]="message.Variance" [disabled]="showLoader"
                                                           type="text" class="form-control">
                                                </div>
                                                <div class="col-md-2">
                                                    <label>Business Hours only</label>
                                                    <p-checkbox name="BusinessHoursOnly{{message.ObjectID}}"
                                                                [(ngModel)]="message.BusinessHoursOnly"
                                                                binary="true">
                                                    </p-checkbox>
                                                </div>
                                                <div class="col-md-4">
                                                    <label>Send</label>
                                                    <p-dropdown [options]="messageTemplates" filter="true"
                                                                optionLabel="TemplateName"
                                                                name="messageTemplate{{message.ObjectID}}"
                                                                [(ngModel)]="message.MessageTemplate">
                                                        <ng-template let-message pTemplate="selectedItem">
                                                            <i class="{{getMessageClass(message.value)}}"></i>
                                                            <span class="dropdown-text">{{message.label}}</span>
                                                        </ng-template>
                                                        <ng-template let-selectedMsg pTemplate="item">
                                                            <div class="ui-helper-clearfix"
                                                                 style="position: relative;height: 25px;">
                                                                <i class="{{getMessageClass(selectedMsg.value)}}"></i>
                                                                <div
                                                                    class="dropdown-text">{{selectedMsg.label}}</div>
                                                            </div>
                                                        </ng-template>
                                                    </p-dropdown>
                                                </div>
                                                <div class="col-md-2 text-center">
                                                    <button type="button" pButton label=" " [disabled]="showLoader"
                                                            icon="ui-icon-settings"
                                                            (click)="configureMessageTemplate(message)"></button>
                                                    <button type="button" pButton label=" " [disabled]="showLoader"
                                                            icon="ui-icon-close"
                                                            *ngIf="!message.IsWithdrawalMessage"
                                                            (click)="removeMessage(message, stage)"></button>
                                                </div>
                                            </div>
                                        </div>

                                    </p-panel>
                                    <!-- End displaying messages -->
                                    <hr/>
                                </div>
                                <!-- End messaging section -->
                            </div>
                        </p-panel>
                        <!-- End Post Stages -->
                    </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"
                                    [disabled]="showLoader"
                                    routerLink="/admin/list-message-templates">Cancel
                            </button>
                            <button *ngIf="showSaveBtn()" type="button" value="Save" class="btn btn-primary largeBtn"
                                    (click)="saveWorkflowTemplate()" [disabled]="showLoader">
                                Save
                            </button>
                            <button *ngIf="showSaveCopyBtn()" type="button" value="Save As a Copy"
                                    class="btn btn-primary largeBtn"
                                    (click)="saveWorkflowTemplate(true)" [disabled]="showLoader">
                                Save As a Copy
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <p-progressSpinner *ngIf="showLoader"></p-progressSpinner>
    </form>
</div>
<p-confirmDialog header="Confirmation" key="RemoveRow" autoZIndex="false" baseZIndex="12000"
                 icon="pi pi-exclamation-triangle" appendTo="body">
</p-confirmDialog>
