<div id="workflow-modal-dialog" style="display: none;">
    <div class="WorkflowMaker-deleteOverlay" ng-show="deleteOverlayVisible">
        <div class="modal-dialog">
            <div class="Modal-content modal-content">
                <div class="Modal-header">
                    <div class="Modal-title">
                        <span>{{strings.get('DELETE')}}</span>
                        <span class="Modal-titleResourceName" ng-bind="nodeToBeDeleted.unifiedJobTemplate.name"></span>
                    </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">{{strings.get('workflow_maker.DELETE_NODE_PROMPT_TEXT')}}</div>
                </div>
                <div class="Modal-footer">
                    <button ng-click="cancelDeleteNode()" class="btn Modal-defaultButton Modal-footerButton">{{strings.get('CANCEL')}}</a>
                    <button ng-click="confirmDeleteNode()" class="btn Modal-footerButton ng-binding Modal-errorButton">{{strings.get('DELETE')}}</a>
                </div>
            </div>
        </div>
    </div>
    <div class="WorkflowMaker-header">
        <div class="WorkflowMaker-title">
            <div class="WorkflowMaker-titleText">{{strings.get('workflow_maker.TITLE')}} | {{ workflowJobTemplateObj.name }}</div>
        </div>
        <div class="WorkflowMaker-exitHolder">
            <button class="WorkflowMaker-exit" ng-click="closeDialog()">
                <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">
                    <i ng-class="{{ keyClassList }}" class="fa fa-compass Key-menuIcon" ng-click="toggleKey()"></i>
                    <ul ng-show="showKey" class="Key-list noselect">
                        <li class="Key-listItem">
                            <p class="Key-heading">{{strings.get('workflow_maker.KEY')}}</p>
                        </li>
                        <li class="Key-listItem">
                            <div class="Key-icon Key-icon--success"></div>
                            <p class="Key-listItemContent">{{strings.get('workflow_maker.ON_SUCCESS')}}</p>
                        </li>
                        <li class="Key-listItem">
                            <div class="Key-icon Key-icon--fail"></div>
                            <p class="Key-listItemContent">{{strings.get('workflow_maker.ON_FAILURE')}}</p>
                        </li>
                        <li class="Key-listItem">
                            <div class="Key-icon Key-icon--always"></div>
                            <p class="Key-listItemContent">{{strings.get('workflow_maker.ALWAYS')}}</p>
                        </li>
                        <li class="Key-listItem">
                            <div class="Key-icon Key-icon--circle Key-icon--default">P</div>
                            <p class="Key-listItemContent Key-listItemContent--circle">{{strings.get('workflow_maker.PROJECT_SYNC')}}</p>
                        </li>
                        <li class="Key-listItem">
                            <div class="Key-icon Key-icon--circle Key-icon--default">I</div>
                            <p class="Key-listItemContent Key-listItemContent--circle">{{strings.get('workflow_maker.INVENTORY_SYNC')}}</p>
                        </li>
                        <li class="Key-listItem">
                            <div class="Key-icon Key-icon--circle Key-icon--default">W</div>
                            <p class="Key-listItemContent Key-listItemContent--circle">{{strings.get('workflow_maker.WORKFLOW')}}</p>
                        </li>
                        <li class="Key-listItem">
                            <div class="Key-icon Key-icon--circle Key-icon--warning">!</div>
                            <p class="Key-listItemContent Key-listItemContent--circle">{{strings.get('workflow_maker.WARNING')}}</p>
                        </li>
                    </ul>
                </div>
                <div class="WorkflowLegend-maker--right">
                    <span class="WorkflowMaker-totalJobs">{{strings.get('workflow_maker.TOTAL_NODES')}}</span>
                    <span class="badge List-titleBadge" ng-bind="graphState.arrayOfNodesForChart.length === 0 ? graphState.arrayOfNodesForChart.length : graphState.arrayOfNodesForChart.length-1"></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()" zoom-to-fit-chart="zoomToFitChart()"></workflow-controls>
                    </div>
                </div>
            </div>
            <workflow-chart
                ng-if="modalOpen"
                graph-state="graphState"
                add-node-without-child="startAddNodeWithoutChild(parent)"
                add-node-with-child="startAddNodeWithChild(link)"
                edit-node="startEditNode(nodeToEdit)"
                edit-link="startEditLink(linkToEdit)"
                select-node-for-linking="selectNodeForLinking(nodeToStartLink)"
                delete-node="startDeleteNode(nodeToDelete)"
                workflow-zoomed="workflowZoomed(zoom)"
                read-only="readOnly"
                mode="edit"
                class="WorkflowMaker-chart">
            </workflow-chart>
        </div>
        <div class="WorkflowMaker-contentRight">
            <span ng-if="formState.showNodeForm">
                <workflow-node-form node-config="nodeConfig" workflow-job-template-obj="workflowJobTemplateObj" select="confirmNodeForm(selectedTemplate, promptData, edgeType)" cancel="cancelNodeForm()" read-only="!workflowJobTemplateObj.summary_fields.user_capabilities.edit"/>
            </span>
            <span ng-if="formState.showLinkForm">
                <workflow-link-form link-config="linkConfig" read-only="!workflowJobTemplateObj.summary_fields.user_capabilities.edit" select="confirmLinkForm(edgeType)" cancel="cancelLinkForm()" unlink="unlink()"/>
            </span>
        </div>
    </div>
    <div class="WorkflowMaker-buttonHolder">
        <button type="button" class="btn btn-sm WorkflowMaker-cancelButton" ng-click="closeDialog()"> {{:: strings.get('CLOSE') }}</button>
        <button type="button" class="btn btn-sm WorkflowMaker-saveButton" ng-click="saveWorkflowMaker()" ng-show="workflowJobTemplateObj.summary_fields.user_capabilities.edit || canAddWorkflowJobTemplate" ng-disabled="formState.showNodeForm || formState.showLinkForm"> {{:: strings.get('SAVE') }}</button>
    </div>
</div>
