<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">
                        <app-edit-message-template></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"
                               (blur)="toggleInput($event, 'TemplateName')"
                               name="TemplateName" required/>
                    </div>
                </div>
                <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" [collapsed]="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"
                                                   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"
                                                   [(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">
                                                </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"
                                                               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">
                                                </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"
                                                               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"
                                                   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"
                                                   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"
                                                   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"
                                                   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.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"
                                                            (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"
                                                           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"
                                                           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"
                                                        (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"
                                                                 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"
                                                           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=" "
                                                            icon="ui-icon-settings"></button>
                                                    <button type="button" pButton label=" "
                                                            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>
                <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"
                                (click)="addStage()">Add Stage
                        </button>
                    </div>
                </div>
                <div class="ui-g form-group">
                    <div class="ui-g-12 ui-md-12">
                        <p-orderList [value]="filteredStages(false, false)" header="Stages"
                                     dragdrop="true">
                            <ng-template let-stage pTemplate="item">
                                <div>
                                    <p-panel toggler="header" [toggleable]="true" [collapsed]="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
                                                   [(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.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"
                                                                        (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"
                                                                       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"
                                                                       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"
                                                                    (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"
                                                                             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"
                                                                       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)"
                                                                            [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=" "
                                                                        icon="ui-icon-settings"></button>
                                                                <button type="button" pButton label=" "
                                                                        icon="ui-icon-close"
                                                                        *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"
                                                                (click)="removeStage(stage)">Remove Stage
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- End messaging section -->
                                        </div>
                                    </p-panel>
                                </div>
                            </ng-template>
                        </p-orderList>
                        <p-panel *ngFor="let stage of filteredStages(false, true)" toggler="header"
                                 [toggleable]="true" [collapsed]="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"
                                                           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"
                                                           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"
                                                        (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}}"
                                                                 [(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"
                                                           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=" "
                                                            icon="ui-icon-settings"></button>
                                                    <button type="button" pButton label=" "
                                                            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>
                <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)="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>
