<div class="container" id="detail-container" ng-cloak ng-show="process">
	<div class="row" ng-if="process">
		<div class="col-md-9">
			<div class="component component-pack" >
				<div class="title">
					<div class="pull-right">
						<a ng-click="returnToList()" class="action">&larr; {{'GENERAL.ACTION.RETURN-TO-LIST' | translate}}</a>
					</div>
					<h2>{{process.name &amp;&amp; process.name + "-" || ""}}{{process.id}}</h2>
				</div>
				<div class="property-wrapper">
					<table>
						<tr class="property">
							<td class="property-name" translate="PROCESS-INSTANCE.ID"></td>
							<td>{{process.id}}</td>
							<td class="property-name" translate="PROCESS-INSTANCE.BUSINESS-KEY"></td>
							<td>{{process.businessKey | empty}}</td>
						</tr>
						<tr class="property">
							<td class="property-name" translate="PROCESS-INSTANCE.NAME"></td>
							<td>{{process.name | empty}}</td>
							<td class="property-name" translate="PROCESS-INSTANCE.DESCRIPTION"></td>
							<td>{{process.description | empty}}</td>
						</tr>
						<tr class="property">
							<td class="property-name" translate="PROCESS-INSTANCE.STATUS"></td>
							<td>{{process.endTime &amp;&amp; ('PROCESS-INSTANCE.STATUS-COMPLETED' | translate) || ('PROCESS-INSTANCE.STATUS-ACTIVE' | translate)}}</td>
							<td class="property-name">Process definition:</td>
							<td><a ng-click="openProcessDefinition(process.processDefinitionId)"><i class="glyphicon glyphicon-zoom-in"></i>
							 	{{definition.name &amp;&amp; definition.name || process.processDefinitionId}}</a></td>
						</tr>
						<tr class="property">
							<td class="property-name" translate="PROCESS-INSTANCE.ACTIVITY-ID-STARTED"></td>
							<td>{{process.startActivityId | empty}}</td>
							<td class="property-name"><span class="glyphicon glyphicon-user"></span> {{'PROCESS-INSTANCE.STARTED-BY' | translate}}</td>
							<td>{{process.startUserId | empty}}</td>
						</tr>
						<tr class="property">
						    <td class="property-name" translate="PROCESS-INSTANCE.TENANT-ID"></td>
                            <td>{{process.tenantId | empty}}</td>
							<td class="property-name" translate="PROCESS-INSTANCE.SUPER-PROCESS-INSTANCE-ID"></td>
							<td ng-if="process.superProcessInstanceId"><a ng-click="openProcessInstance(process.superProcessInstanceId)"><i class="glyphicon glyphicon-zoom-in"></i> {{process.superProcessInstanceId | empty}}</a></td>
						</tr>
					</table>
				</div>
				<div class="seperator" ng-if="process.endTime"></div>
				<div class="property-wrapper" ng-if="process.endTime">
					<table>
						<tr class="property" >
							<td class="property-name"><span class="glyphicon glyphicon-time"></span> {{'PROCESS-INSTANCE.END-TIME' | translate}}</td>
							<td>{{process.endTime | dateformat | empty}}</td>
							<td class="property-name"><span class="glyphicon glyphicon-time"></span> {{'PROCESS-INSTANCE.DURATION' | translate}}</td>
							<td>{{process.durationInMillis | humanTime}}</td>
						</tr>
						<tr class="property" ng-if="process.endTime">
							<td class="property-name" translate="PROCESS-INSTANCE.DELETE-REASON"></td>
							<td>{{process.deleteReason | empty}}</td>
							<td class="property-name" translate="PROCESS-INSTANCE.ACTIVITY-ID-ENDED"></td>
							<td>{{process.endActivityId | empty}}</td>
						</tr>
					</table>
				</div>
			</div>
		</div>
		<div class="col-md-3">
			<div class="component tip-left">
				<div class="title">
					<h2 translate="GENERAL.TITLE.ACTIONS"></h2>
				</div>
				<ul class="list-group">
                    <li ng-if="definition.graphicalNotationDefined">
                        <button type="button" class="btn btn-sm btn-default" ng-click="showProcessDiagram()">
                            <i class="glyphicon glyphicon-zoom-in"></i>{{'PROCESS-INSTANCE.ACTION.SHOW-DIAGRAM' | translate}}
                        </button>
                    </li>
                    <li>
                        <button type="button" class="btn btn-sm btn-default" ng-click="showMigrateProcessDialog()">
                            <i class="glyphicon glyphicon-zoom-in"></i>{{'PROCESS-INSTANCE.ACTION.MIGRATE-PROCESSINSTANCE' | translate}}
                        </button>
                    </li>
                    <li ng-if="processCompleted">
					    <button type="button" class="btn btn-sm btn-default btn-danger" ng-click="deleteProcessInstance()">
							<i class="glyphicon glyphicon-remove"></i>{{'PROCESS-INSTANCE.ACTION.DELETE' | translate}}
					    </button>
					  </li>
					  <li ng-if="!processCompleted">
					    <button type="button" class="btn btn-sm btn-default btn-danger" ng-click="terminateProcessInstance()">
							<i class="glyphicon glyphicon-remove"></i>{{'PROCESS-INSTANCE.ACTION.TERMINATE' | translate}}
					    </button>
					  </li>
				</ul>
			</div>
		</div>
	</div>
	<div class="row">
		<div class="col-md-9">
			<div class="component">
				<div class="tabs-wrapper">
		       		<div class="tabs clearfix">
		       			<div class="tab" ng-repeat="tab in tabData.tabs" ng-class="{'active': tabData.activeTab == tab.id}">
		       				<a ng-click="tabData.activeTab = tab.id">
		       					{{tab.name | translate:node}}&nbsp;
		    					<span class="badge" ng-if="tab.info != undefined">{{tab.info}}</span>
		    				</a>
		       			</div>
		       		</div>
		        	<div class="title"></div>

		        	<div class="grid-wrapper grid-wrapper-compact" ng-if="tasks && tabData.activeTab == tabData.tabs[0].id">
						<div class="grid-message" ng-if="tasks.size > 0">
	                        <span>{{'PROCESS-INSTANCE.TASKS-SIZE' | translate:tasks}}</span> 
	                        <span>
	                        	<a ng-click="showAllTasks()" class="action"><i class="glyphicon glyphicon-zoom-in"></i> {{'PROCESS-INSTANCE.ACTION.SHOW-ALL-TASKS' | translate}}</a>
							</span>
						</div>
	                     <div class="grid-message" ng-if="tasks.size == 0">
	                        <span>{{'PROCESS-INSTANCE.TASKS-EMPTY' | translate}}</span>
	                    </div>
						<div ng-grid="gridTasks" class="gridStyle" ng-if="tasks" ng-show="tasks.size > 0"></div>
					</div>

					<div class="grid-wrapper grid-wrapper-compact" ng-if="variables && tabData.activeTab == tabData.tabs[1].id">
						<div class="grid-message" ng-if="variables.size > 0">
	                        <span>{{'PROCESS-INSTANCE.VARIABLES-SIZE' | translate:variables}}</span>
	                    </div>
	                     <div class="grid-message" ng-if="variables.size == 0">
	                         <span>{{'PROCESS-INSTANCE.VARIABLES-EMPTY' | translate}}</span>
	                    </div>
						<div ng-grid="gridVariables" class="gridStyle" ng-if="variables" ng-show="variables.size > 0"></div>
					</div>

					<div class="grid-wrapper grid-wrapper-compact" ng-if="subprocesses && tabData.activeTab == tabData.tabs[2].id">
						<div class="grid-message" ng-if="subprocesses.size > 0">
	                        <span>{{'PROCESS-INSTANCE.SUBPROCESSES-SIZE' | translate:subprocesses}}</span>
	                        <span>
	                        	<a ng-click="showAllSubprocesses()" class="action"><i class="glyphicon glyphicon-zoom-in"></i> {{'PROCESS-INSTANCE.ACTION.SHOW-ALL-SUBPROCESSES' | translate}}</a>
	                        </span>
	                    </div>
	                     <div class="grid-message" ng-if="subprocesses.size == 0">
	                        <span>{{'PROCESS-INSTANCE.SUBPROCESSES-EMPTY' | translate}}</span>
	                    </div>
						<div ng-grid="gridSubprocesses" class="gridStyle" ng-if="subprocesses" ng-show="subprocesses.size > 0"></div>
					</div>

					<div class="grid-wrapper grid-wrapper-compact" ng-if="jobs && tabData.activeTab == tabData.tabs[3].id">
						<div class="grid-message" ng-if="jobs.size > 0">
	                        <span>{{'PROCESS-INSTANCE.JOBS-SIZE' | translate:jobs}}</span>
	                        <span>
	                        	<a ng-click="showAllJobs()" class="action"><i class="glyphicon glyphicon-zoom-in"></i> {{'PROCESS-INSTANCE.ACTION.SHOW-ALL-JOBS' | translate}}</a>
	                        </span>
	                    </div>
	                     <div class="grid-message" ng-if="jobs.size == 0">
	                        <span>{{'PROCESS-INSTANCE.JOBS-EMPTY' | translate}}</span>
	                    </div>
						<div ng-grid="gridJobs" class="gridStyle" ng-if="jobs" ng-show="jobs.size > 0"></div>
					</div>
					
					<div class="grid-wrapper grid-wrapper-compact" ng-if="decisionTables && tabData.activeTab == tabData.tabs[4].id">
						<div class="grid-message" ng-if="decisionTables.size > 0">
	                        <span>{{'PROCESS-INSTANCE.DECISION-TABLES-SIZE' | translate:decisionTables}}</span>
	                    </div>
	                     <div class="grid-message" ng-if="decisionTables.size == 0">
	                        <span>{{'PROCESS-INSTANCE.DECISION-TABLES-EMPTY' | translate}}</span>
	                    </div>
						<div ng-grid="gridDecisionTables" class="gridStyle" ng-if="decisionTables" ng-show="decisionTables.size > 0"></div>
					</div>
					
					<div class="grid-wrapper grid-wrapper-compact" ng-if="formInstances && tabData.activeTab == tabData.tabs[5].id">
						<div class="grid-message" ng-if="formInstances.size > 0">
	                        <span>{{'PROCESS-INSTANCE.FORM-INSTANCES-SIZE' | translate:formInstances}}</span>
	                    </div>
	                     <div class="grid-message" ng-if="formInstances.size == 0">
	                        <span>{{'PROCESS-INSTANCE.FORM-INSTANCES-EMPTY' | translate}}</span>
	                    </div>
						<div ng-grid="gridFormInstances" class="gridStyle" ng-if="formInstances" ng-show="formInstances.size > 0"></div>
					</div>

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

        <div class="col-md-3" ng-if="tabData.activeTab == tabData.tabs[1].id && process.endTime == null && process.endTime == undefined">
            <div class="component tip-left">
                <div class="title">
                    <h2 translate="PROCESS-INSTANCE.ACTION.TITLE-VARIABLES"></h2>
                </div>
                <ul class="list-group">
                    <li ng-if="selectedVariables && selectedVariables.length > 0">
                        <button type="button" class="btn btn-sm btn-default" ng-click="updateSelectedVariable()">
                            <i class="glyphicon glyphicon-pencil"></i>{{'PROCESS-INSTANCE.ACTION.UPDATE-VALUE' | translate}}
                        </button>
                    </li>
                    <li>
                        <button type="button" class="btn btn-sm btn-default" ng-click="addVariable()">
                            <i class="glyphicon glyphicon-plus"></i>{{'PROCESS-INSTANCE.ACTION.ADD-VARIABLE' | translate}}
                        </button>
                    </li>
                    <li ng-if="selectedVariables && selectedVariables.length > 0">
                        <button type="button" class="btn btn-sm btn-danger" ng-click="deleteVariable()">
                            <i class="glyphicon glyphicon-remove"></i>{{'PROCESS-INSTANCE.ACTION.DELETE-VARIABLE' | translate}}
                        </button>
                    </li>
                </ul>
            </div>
        </div>
	</div>
</div>
