<!--
  Licensed to the Apache Software Foundation (ASF) under one
  or more contributor license agreements.  See the NOTICE file
  distributed with this work for additional information
  regarding copyright ownership.  The ASF licenses this file
  to you under the Apache License, Version 2.0 (the
  "License"); you may not use this file except in compliance
  with the License.  You may obtain a copy of the License at

      http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing,
  software distributed under the License is distributed on an
  "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  KIND, either express or implied.  See the License for the
  specific language governing permissions and limitations
  under the License.
-->
<div class="workflow-step-outer">

    <div class="workflow-step-status-indicators handy"
        ui-sref="main.inspect.activities.detail({applicationId: workflow.applicationId, entityId: workflow.entityId, activityId: stepContext.taskId, workflowId })"
    >
        <span ng-if="isCurrentAndActive" class="running-status">
            <brooklyn-status-icon value="STARTING"></brooklyn-status-icon>
        </span>
        <span ng-if="stepCurrentSuccess" class="color-succeeded" title="{{ stepCurrentSuccess }}">
            <i class="fa fa-check-circle"></i>
        </span>
        <span ng-if="stepCurrentWarning" class="color-cancelled" title="{{ stepCurrentWarning }}">
            <i class="fa fa-exclamation-circle"></i>
        </span>
        <span ng-if="stepCurrentError" class="color-failed" title="{{ stepCurrentError }}">
            <i class="fa fa-times-circle"></i>
        </span>
    </div>

    <div class="workflow-step workflow-{{workflowId}}" id="workflow-step-{{stepIindex}}" ng-class="vm.getWorkflowStepClasses(stepIndex)">
        <div class="rhs-icons">
            <div ng-if="isFocusTask" class="workflow-step-pill focus-step label-info" title="This step instance is for the task currently selected in the activity view.">
                selected
            </div>

            <div ng-if="stepTitle.id && isFocusTask" class="workflow-step-pill step-id">
                <i class="fa fa-id-card-o"></i>
                {{ stepTitle.id }}
            </div>
            <div ng-if="stepTitle.id && !isFocusTask && stepContext.taskId" class="workflow-step-pill step-id handy"
                    title="Select this task"
                    ui-sref="main.inspect.activities.detail({applicationId: workflow.applicationId, entityId: workflow.entityId, activityId: stepContext.taskId, workflowId })">
                <i class="fa fa-id-card-o"></i>
                {{ stepTitle.id }}
            </div>
            <div ng-if="!stepTitle.id && !isFocusTask && stepContext.taskId" class="workflow-step-pill step-id handy hover-only"
                 title="Select this task"
                 ui-sref="main.inspect.activities.detail({applicationId: workflow.applicationId, entityId: workflow.entityId, activityId: stepContext.taskId, workflowId })">
                <i class="fa fa-id-card-o"></i>
            </div>

            <div ng-click="vm.toggleExpandState()" class="expand-toggle">
                <i ng-class="expanded ? 'fa fa-chevron-up' : 'fa fa-chevron-down'"></i>
            </div>
        </div>

        <div class="step-block-title">
            <span class="step-index">{{ stepTitle.index }}</span>
            <span ng-if="stepTitle.name" class="step-name">
                {{ stepTitle.name}}
            </span>
            <span ng-if="stepTitle.code && !stepTitle.name" class="step-title-code">{{ stepTitle.code }}</span>
            <span ng-if="stepTitle.leftCodeAlternative && !stepTitle.name" class="step-left-extra">{{ stepTitle.leftCodeAlternative}}</span>
        </div>

        <div ng-if="expanded" class="step-details">
            <div class="space-above">
                <div>
                    <span ng-if="!osi.countStarted" class="space-above">
                        This step has not been run<span ng-if="isRunning"> yet</span>.
                        {{ stepCurrentError ? 'There was an error prior to running this step. More information can be found in the Details panel on the task for the workflow.' : '' }}
                    </span>
                    <span ng-if="osi.countStarted">
                        <span ng-if="osi.countCompleted == osi.countStarted">
                            <span ng-if="osi.countCompleted > 1">
                                This step has run
                                <span ng-if="osi.countCompleted == 2">
                                    twice,
                                </span>
                                <span ng-if="osi.countCompleted > 2">
                                    {{ osi.countCompleted }} times,
                                </span>
                                most recently
                            </span>
                            <span ng-if="osi.countCompleted == 1">
                                This step ran
                            </span>
                        </span>
                        <span ng-if="osi.countCompleted != osi.countStarted">
                            <span ng-if="isCurrentAndActive">
                                <span ng-if="osi.countCompleted == osi.countStarted - 1">
                                    This step is currently running
                                </span>
                                <span ng-if="osi.countCompleted <= osi.countStarted - 2">
                                    This step has had errors previously and is currently running
                                </span>
                            </span>
                            <span ng-if="!isCurrentAndActive">
                                <span ng-if="osi.countStarted == 1">
                                    This step had errors. It ran
                                </span>
                                <span ng-if="osi.countStarted >= 2 && osi.countCompleted==0">
                                    This step has had errors on all previous runs, including the last run,
                                </span>
                                <span ng-if="osi.countStarted >= 2 && osi.countCompleted>0">
                                    This step has had errors on some previous runs. It most recently ran
                                </span>
                            </span>
                        </span>

                        <span ng-if="isFocusTask">
                            <span ng-if="isWrappingStepTaskOuter || isWrappingStepTaskInner">
                                in task <span class="monospace">{{ outerStepContext.taskId }}</span>
                                selecting <span
                                    ng-if="otherMetadata['Switch match']"><b> {{ otherMetadata['Switch match'] }}</b> in </span>
                                task <span class="monospace">{{ innerStepContext.taskId }}</span>,
                                currently loaded on this page.
                            </span>
                            <span ng-if="!(isWrappingStepTaskOuter || isWrappingStepTaskInner)">
                                in task <span class="monospace">{{ stepContext.taskId }}</span> which is the one currently loaded on this page.
                            </span>
                            The other sections on this page pertain specifically to this step.
                        </span>
                        <span ng-if="!isFocusTask">
                            in <button type="button" class="btn inline-button-small"
                                   ui-sref="main.inspect.activities.detail({applicationId: workflow.applicationId, entityId: workflow.entityId, activityId: stepContext.taskId, workflowId })"
                                >task <span class="monospace">{{ stepContext.taskId }}</span></button>.
                        </span>
                    </span>
                </div>

                <div ng-if="isErrorHandler" class="space-above">
                    The error handler for this step is the task currently loaded on this page.
                    The other sections on this page pertain specifically to the error handler for this step.
                </div>

                <div ng-if="stepContext.errorHandlerTaskId && !isErrorHandler" class="space-above">
                    The error here triggered a handler in
                    <button type="button" class="btn inline-button-small"
                            ui-sref="main.inspect.activities.detail({applicationId: workflow.applicationId, entityId: workflow.entityId, activityId: stepContext.errorHandlerTaskId, workflowId})"
                        ><span class="monospace">task {{stepContext.errorHandlerTaskId}}</span></button
                    ><span ng-if="stepCurrentWarning"> which successfully completed</span
                    ><span ng-if="stepCurrentError"> which threw an error</span
                    ><span ng-if="isCurrentAndActive"> which is running</span
                    >.
                </div>

                <div ng-if="!isWrappingStepTaskOuter && !isWrappingStepTaskInner && isFocusStep && !isFocusTask && !isErrorHandler" class="space-above">
                    <b>The task currently loaded on this page (<span class="monospace">{{ task.id }}</span>) is for a previous run of this step.</b>
                </div>

                <div ng-if="!workflow.runIsOld">
                    <div ng-if="stepContext.subWorkflows && stepContext.subWorkflows.length" class="space-above">
                        <span ng-if="stepContext.subWorkflows.length==1" class="space-above">
                            This step ran

                            <button type="button" class="btn inline-button-small"
                                    ui-sref="main.inspect.activities.detail({applicationId: stepContext.subWorkflows[0].applicationId, entityId: stepContext.subWorkflows[0].entityId, activityId: stepContext.subWorkflows[0].workflowId, workflowLatestRun: true})">
                                <span ng-if="vm.hasInterestingWorkflowNameFromReference(stepContext.subWorkflows[0])">
                                    1 nested workflow: {{ vm.getWorkflowNameFromReference(stepContext.subWorkflows[0]) }}
                                </span>
                                <span ng-if="!vm.hasInterestingWorkflowNameFromReference(stepContext.subWorkflows[0])">
                                    1 nested workflow <span class="monospace">{{ stepContext.subWorkflows[0].workflowId }}</span>
                                </span>
                            </button>.
                        </span>
                        <span ng-if="stepContext.subWorkflows.length>1" class="space-above">
                            This step ran

                            <div class="btn-group" uib-dropdown ng-if="stepContext.subWorkflows.length>1">
                                <button id="nested-workflow-dropdown-button" type="button" class="btn inline-button-small" uib-dropdown-toggle>
                                    {{ stepContext.subWorkflows.length }} nested workflow{{ stepContext.subWorkflows.length>1 ? 's' : '' }} <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="nested-workflow-dropdown-button" style="width: auto; max-width: 40em;">
                                    <li role="menuitem" ng-repeat="sub in stepContext.subWorkflows" id="sub-workflow-{{ sub.workflowId }}">
                                        <a href="" ui-sref="main.inspect.activities.detail({applicationId: sub.applicationId, entityId: sub.entityId, activityId: sub.workflowId, workflowLatestRun: true})" style="padding-left: 9px; padding-right: 9px;">
                                            <span ng-if="vm.hasInterestingWorkflowNameFromReference(stepContext.subWorkflows[0])">{{
                                                vm.getWorkflowNameFromReference(sub, "") }}</span>
                                            <span ng-if="!vm.hasInterestingWorkflowNameFromReference(stepContext.subWorkflows[0])" class="monospace">{{
                                                sub.workflowId }}</span>
                                    </a></li>
                                </ul>
                            </div>.

                        </span>
                    </div>
                </div>

                <div class="more-space-above">
                    <div class="data-row" ng-if="uniqueSubworkflow">
                        <workflow-steps nested="true" workflow="uniqueSubworkflow" style="flex: 1 1 auto; margin-left: -2em; margin-top: -24px; margin-right: -1em; width: 100%;"/>
                    </div>

                    <div class="data-row" ng-if="stepContext.error"><div class="A">Error</div> <div class="B {{ vm.classForCodeMaybeMultiline(stepContext.error) }}">{{ vm.yamlOrPrimitive(stepContext.error) }}</div></div>

                    <div class="data-row" ng-if="showStepDefinitionInBody"><div class="A">Step Definition</div> <div class="B {{ vm.classForCodeMaybeMultiline(step) }}">{{ vm.yamlOrPrimitive(step) }}</div></div>

                    <div ng-if="!isFocusStep || isFocusTask">
                        <div class="data-row" ng-if="otherMetadata" ng-repeat="(key,value) in otherMetadata" id="$key">
                            <div class="A">{{ key }}</div> <div class="B {{ vm.classForCodeMaybeMultiline(value) }}">{{ vm.yamlOrPrimitive(value) }}</div>
                        </div>

                        <div class="data-row" ng-if="stepContext.output"><div class="A">Output</div> <div class="B {{ vm.classForCodeMaybeMultiline(stepContext.output) }}">{{ vm.yaml(stepContext.output) }}</div></div>
                        <div class="data-row" ng-if="osi.workflowScratchUpdates"><div class="A">Variables Updated</div> <div class="B {{ vm.classForCodeMaybeMultiline(osi.workflowScratchUpdates) }}">{{ vm.yaml(osi.workflowScratchUpdates) }}</div></div>
                    </div>
                </div>
            </div>

            <div class="more-space-above" ng-if="vm.nonEmpty(stepContext) || vm.nonEmpty(step) || vm.nonEmpty(osi)"
                 style="margin-bottom: {{ addlTitle ? '9px' : '6px' }};">

                <div class="btn-group right" uib-dropdown>
                    <button id="extra-data-button" type="button" class="btn btn-sm btn-select-dropdown pull-right" uib-dropdown-toggle
                            style="padding: 2px 6px; {{ addlTitle ? 'width: 100%; ' : '' }} text-align: right;">
                        {{ addlTitle ? 'Showing '+addlTitle : 'More Information' }}
                        <span class="caret" style="{{ addlTitle ? 'rotate: 180deg;' : '' }}"></span>
                    </button>
                    <ul class="dropdown-menu pull-right workflow-dropdown-small" uib-dropdown-menu role="menu" aria-labelledby="extra-data-button">
                        <li role="menuitem" ng-if="!showStepDefinitionInBody"> <a href="" ng-click="vm.showAdditional('Step Definition', 'step_defn', vm.yamlOrPrimitive(step))" ng-class="{'selected' : addlMode === 'step_defn'}">
                            <i class="fa fa-check check"></i>
                            Step Definition</a> </li>
                        <li role="menuitem" > <a href="" ng-click="vm.showAdditional('Context Variables', 'vars', null)" ng-class="{'selected' : addlMode === 'vars'}">
                            <i class="fa fa-check check"></i>
                            Context Variables</a> </li>
                        <li role="menuitem" > <a href="" ng-click="vm.showAdditional('Additional Step Info', 'metadata', null)" ng-class="{'selected' : addlMode === 'summary'}">
                            <i class="fa fa-check check"></i>
                            Additional Step Info</a> </li>
                        <li role="menuitem" > <a href="" ng-click="vm.showAdditional('Step Record YAML', 'osi', osi)" ng-class="{'selected' : addlMode === 'osi'}">
                            <i class="fa fa-check check"></i>
                            Step Record YAML</a> </li>
                        <li role="menuitem" > <a href="" ng-click="vm.showAdditional(null, null)" ng-class="{'selected' : addlMode === null}">
                            <i class="fa fa-check check"></i>
                            Hide Additional Info</a> </li>
                    </ul>
                </div>

                <div ng-if="addlMode === 'vars'">
                    <div class="data-row" ng-if="vm.getOutputAndScratchForStep(stepIndex).output">
                        <div class="A">Output of previous</div>
                        <div class="B {{ vm.classForCodeMaybeMultiline(vm.getOutputAndScratchForStep(stepIndex).output) }}">{{
                            vm.yamlOrPrimitive(vm.getOutputAndScratchForStep(stepIndex).output) }}</div>
                    </div>
                    <div class="data-row" ng-if="vm.getOutputAndScratchForStep(stepIndex).workflowScratch">
                        <div class="A">Workflow scratch</div>
                        <div class="B {{ vm.classForCodeMaybeMultiline(vm.getOutputAndScratchForStep(stepIndex).workflowScratch) }}">{{
                            vm.yamlOrPrimitive(vm.getOutputAndScratchForStep(stepIndex).workflowScratch) }}</div>
                    </div>
                    <div class="data-row" ng-if="workflow.data.input">
                        <div class="A">Workflow input</div>
                        <div class="B {{ vm.classForCodeMaybeMultiline(workflow.data.input) }}">{{
                            vm.yamlOrPrimitive(workflow.data.input) }}</div>
                    </div>
                    <div class="data-row" ng-if="!vm.getOutputAndScratchForStep(stepIndex).output && !vm.getOutputAndScratchForStep(stepIndex).workflowScratch && !workflow.data.input">
                        <div class="A">No context variables set</div>
                    </div>
                </div>
                <div ng-if="addlMode === 'metadata'">
                    <div class="data-row" ng-if="step.name"><div class="A">Name</div> <div class="B">{{ step.name }}</div></div>
                    <div class="data-row" ng-if="step.id"><div class="A">ID</div> <div class="B fixed-width">{{ step.id }}</div></div>
                    <div class="data-row"><div class="A">Step Number</div> <div class="B">{{ stepIndex+1 }}</div></div>

                    <div ng-if="!isFocusStep || isFocusTask">
                        <!-- only show these if not looking at an earlier run of a step -->
                        <div class="data-row more-space-above" ng-if="stepContext.input"><div class="A">All Input</div> <div class="B multiline-code">{{ vm.yaml(stepContext.input) }}</div></div>
                    </div>

                    <div class="data-row more-space-above">
                        <div class="A"><span ng-if="isCurrentAndActive">CURRENTLY EXECUTING</span><span ng-if="!isCurrentAndActive"><span ng-if="osi.countStarted > 1">LAST </span>EXECUTED</span> IN</div>
                        <div class="B">
                                        <span ng-if="isFocusTask">
                                            task <span class="monospace">{{ stepContext.taskId }}</span>
                                        </span>
                            <span ng-if="!isFocusTask">
                                             <a ui-sref="main.inspect.activities.detail({applicationId: workflow.applicationId, entityId: workflow.entityId, activityId: stepContext.taskId, workflowId })"
                                             >task <span class="monospace">{{ stepContext.taskId }}</span></a>
                                        </span>
                        </div>
                    </div>
                    <div ng-if="!isFocusStep || isFocusTask">
                        <!-- only show these if not looking at an earlier run of a step -->
                        <div class="data-row"><div class="A">Preceeded by</div> <div class="B">
                            <span ng-if="osi.previousTaskId">
                                Step {{ osi.previous[0]+1 }}
                                (<a ui-sref="main.inspect.activities.detail({applicationId: workflow.applicationId, entityId: workflow.entityId, activityId: osi.previousTaskId, workflowId })"
                            >task <span class="monospace">{{ osi.previousTaskId }}</span></a>)
                            </span>
                            <span ng-if="!osi.previousTaskId">(workflow start)</span>
                        </div></div>

                        <div class="data-row" ng-if="!isCurrentMaybeInactive"><div class="A">Followed by</div> <div class="B">
                            <span ng-if="osi.nextTaskId">
                                Step {{ osi.next[0]+1 }}
                                (<a ui-sref="main.inspect.activities.detail({applicationId: workflow.applicationId, entityId: workflow.entityId, activityId: osi.nextTaskId, workflowId })"
                            >task <span class="monospace">{{ osi.nextTaskId }}</span></a>)
                            </span>
                            <span ng-if="!osi.nextTaskId">(workflow end)</span>
                        </div></div>
                    </div>

                    <div ng-if="osi.countStarted > 1 && osi.countStarted > osi.countCompleted" class="space-above">
                        <div class="data-row more-space-above"><div class="A">Runs</div> <div class="B"><b>{{ osi.countStarted }}</b></div></div>
                        <div class="data-row"><div class="A">Succeeded</div> <div class="B">{{ osi.countCompleted }}</div></div>
                        <div class="data-row"><div class="A">Failed</div> <div class="B">{{ osi.countStarted - osi.countCompleted - (isCurrentAndActive ? 1 : 0) }}</div></div>
                    </div>
                </div>

                <pre ng-if="addlData" class="more-space-above">{{ addlData }}</pre>
            </div>
        </div>

    </div>

</div>