<div id="workflow-modal-dialog" style="display: none;">
    <div class="WorkflowMaker-deleteOverlay" ng-show="deleteOverlayVisible">
            <div class="Modal-content modal-content">
                <div class="Modal-header">
                    <div class="Modal-title">REMOVE</div>
                    <div class="Modal-exitHolder">
                        <button class="close Modal-exit" ng-click="cancelDeleteNode()">
                            <i class="fa fa-times-circle"></i>
                        </button>
                    </div>
                </div>
                <div class="Modal-body ng-binding">
                    <div class="Prompt-bodyQuery">Are you sure you want to remove the template below?</div>
                    <div class="Prompt-bodyTarget">{{nodeToBeDeleted.unifiedJobTemplate.name}}</div>
                </div>
                <div class="Modal-footer">
                    <button ng-click="cancelDeleteNode()" class="btn Modal-defaultButton Modal-footerButton">CANCEL</a>
                    <button ng-click="confirmDeleteNode()" class="btn Modal-footerButton ng-binding Modal-errorButton">DELETE</a>
                </div>
            </div>
    </div>
    <div class="WorkflowMaker-header">
        <div class="WorkflowMaker-title">
            <div class="WorkflowMaker-titleText">EDIT WORKFLOW</div>
        </div>
        <div class="WorkflowMaker-exitHolder">
            <button class="WorkflowMaker-exit" ng-click="closeWorkflowMaker()">
                <i class="fa fa-times-circle"></i>
            </button>
        </div>
    </div>
    <div class="WorkflowMaker-contentHolder">
        <div class="WorkflowMaker-contentLeft">
            <div class="WorkflowLegend-maker">
                <div class="WorkflowLegend-maker--left">
                    <div class="WorkflowLegend-legendItem">KEY:</div>
                    <div class="WorkflowLegend-legendItem">
                        <div class="WorkflowLegend-onSuccessLegend"></div>
                        <div>On Success</div>
                    </div>
                    <div class="WorkflowLegend-legendItem">
                        <div class="WorkflowLegend-onFailLegend"></div>
                        <div>On Fail</div>
                    </div>
                    <div class="WorkflowLegend-legendItem">
                        <div class="WorkflowLegend-alwaysLegend"></div>
                        <div>Always</div>
                    </div>
                    <div class="WorkflowLegend-legendItem">
                        <div class="WorkflowLegend-letterCircle">P</div>
                        <div>Project Sync</div>
                    </div>
                    <div class="WorkflowLegend-legendItem">
                        <div class="WorkflowLegend-letterCircle">I</div>
                        <div>Inventory Sync</div>
                    </div>
                </div>
                <div class="WorkflowLegend-maker--right">
                    <span class="WorkflowMaker-totalJobs">TOTAL TEMPLATES</span>
                    <span class="badge List-titleBadge" ng-bind="treeData.data.totalNodes"></span>
                    <i ng-class="{'WorkflowMaker-manualControlsIcon--active': showManualControls}" class="fa fa-cog WorkflowMaker-manualControlsIcon" aria-hidden="true" alt="Controls" ng-click="toggleManualControls()"></i>
                    <div ng-show="showManualControls" class="WorkflowMaker-manualControls noselect">
                        <workflow-controls class="WorkflowControls" pan-chart="panChart(direction)" zoom-chart="zoomChart(zoom)" reset-chart="resetChart()"></workflow-controls>
                    </div>
                </div>
            </div>
            <workflow-chart tree-data="treeData.data" add-node="startAddNode(parent, betweenTwoNodes)" edit-node="startEditNode(nodeToEdit)" delete-node="startDeleteNode(nodeToDelete)" workflow-zoomed="workflowZoomed(zoom)" can-add-workflow-job-template="canAddWorkflowJobTemplate" mode="edit" class="WorkflowMaker-chart"></workflow-chart>
        </div>
        <div class="WorkflowMaker-contentRight">
            <div class="WorkflowMaker-formTitle">{{(workflowMakerFormConfig.nodeMode === 'edit' && nodeBeingEdited) ? ((nodeBeingEdited.unifiedJobTemplate && nodeBeingEdited.unifiedJobTemplate.name) ? nodeBeingEdited.unifiedJobTemplate.name : "EDIT TEMPLATE") : "ADD A TEMPLATE"}}</div>
            <div class="WorkflowMaker-formHelp" ng-show="workflowMakerFormConfig.nodeMode === 'idle'" ng-bind="treeData.data.totalNodes === 0 ? 'Please click the start button to build your workflow.' : 'Please hover over a template for additional options.'"></div>
            <div class="WorkflowMaker-form" ng-show="workflowMakerFormConfig.nodeMode === 'add' || workflowMakerFormConfig.nodeMode === 'edit'">
                <div class="Form-tabHolder">
                    <div class="Form-tab" ng-class="{'is-selected': workflowMakerFormConfig.activeTab === 'jobs'}" ng-click="toggleFormTab('jobs')">JOBS</div>
                    <div class="Form-tab" ng-class="{'is-selected': workflowMakerFormConfig.activeTab === 'project_sync'}" ng-click="toggleFormTab('project_sync')">PROJECT SYNC</div>
                    <div class="Form-tab" ng-class="{'is-selected': workflowMakerFormConfig.activeTab === 'inventory_sync'}" ng-click="toggleFormTab('inventory_sync')">INVENTORY SYNC</div>
                </div>
                <div class="WorkflowMaker-formLists">
                    <div id="workflow-jobs-list"  ui-view="jobTemplateList" ng-show="workflowMakerFormConfig.activeTab === 'jobs'"></div>
                    <div id="workflow-project-sync-list" ng-show="workflowMakerFormConfig.activeTab === 'project_sync'" ui-view="projectSyncList"></div>
                    <div id="workflow-inventory-sync-list" ng-show="workflowMakerFormConfig.activeTab === 'inventory_sync'" ui-view="inventorySyncList"></div>
                </div>
                <div id="workflow-maker-form" ui-view="workflowForm"></div>
            </div>
        </div>
    </div>
    <div class="WorkflowMaker-buttonHolder">
        <button type="button" class="btn btn-sm WorkflowMaker-cancelButton" ng-click="closeWorkflowMaker()"> Close</button>
        <button type="button" class="btn btn-sm WorkflowMaker-saveButton" ng-click="saveWorkflowMaker()" ng-show="workflow_job_template_obj.summary_fields.user_capabilities.edit || canAddWorkflowJobTemplate" ng-disabled="edgeFlags.conflict"> Save</button>
    </div>
</div>
