#*
 * Copyright 2012 LinkedIn Corp.
 * 
 * Licensed 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.
*#

<!DOCTYPE html> 
<html lang="en">
	<head>

#parse ("azkaban/webapp/servlet/velocity/style.vm")
#parse ("azkaban/webapp/servlet/velocity/javascript.vm")

		<script type="text/javascript" src="${context}/js/azkaban.jobedit.view.js"></script>
		<script type="text/javascript">
			var contextURL = "${context}";
			var currentTime = ${currentTime};
			var timezone = "${timezone}";
			var errorMessage = null;
			var successMessage = null;
			
			var projectId = "$project.id";
			var projectName = "$project.name";
		</script>
	</head>
	<body>
		
#set ($current_page="all")
#parse ("azkaban/webapp/servlet/velocity/nav.vm")

		<div class="container">

## Page error or success message.

#if ($errorMsg)
			<div class="panel panel-danger">
				<div class="panel-heading">Error</div>
				<div class="panel-body">
					$errorMsg
				</div>
			</div>
#else
	#if ($error_message != "null")
			<div class="alert alert-danger">$error_message</div>
	#elseif ($success_message != "null")
			<div class="alert alert-success">$success_message</div>
	#end

	## Alert message

			<div class="alert alert-dismissable alert-messaging" id="messaging">
				<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
				<p id="messaging-message"></p>
			</div>
		</div>

	## Page header

		<div class="az-page-header">
			<div class="container">
        <div class="row">
          <div class="col-lg-6">
            <h1><a href="${context}/manager?project=${project.name}&flow=${flowid}&job=${jobid}">Job <small>$jobid</small></a></h1>
          </div>
          <div class="col-lg-6">
            <div class="pull-right az-page-header-form">
              <a href="${context}/manager?project=${project.name}&job=$jobid&history" class="btn btn-default btn-sm">History</a>
            </div>
            <div class="clearfix"></div>
          </div>
        </div>
			</div>
		</div>

		<div class="container">
	
  ## Breadcrumb

      <ol class="breadcrumb">
        <li><a href="${context}/manager?project=${project.name}"><strong>Project</strong> $project.name</a></li>
        <li><a href="${context}/manager?project=${project.name}&flow=${flowid}"><strong>Flow</strong> $flowid</a></li>
        <li class="active"><strong>Job</strong> $jobid</li>
      </ol>

			<div class="row">
				<div class="col-lg-8">
	
	## Job details table

					<div class="panel panel-default">
						<div class="panel-heading">
							<div class="pull-right">
								<button id="edit-job-btn" class="btn btn-xs btn-primary" onclick='jobEditView.show("${project.name}", "${flowid}", "${jobid}")'>Edit</button>
							</div>
							Job Properties
						</div>

						<table class="table table-striped table-bordered properties-table">
							<thead>
								<tr>
									<th class="tb-pname">Parameter Name</th>
									<th class="tb-pvalue">Value</th>
								</tr>
							</thead>
							<tbody>
	#foreach ($parameter in $parameters)
								<tr>
									<td class="first">$parameter.first</td><td>$parameter.second</td>
								</tr>
	#end
							</tbody>
						</table>
					</div>
				</div><!-- /col-lg-8 -->
				<div class="col-lg-4">
					<div class="well" id="job-summary">
						<h3>Job <small>$jobid</small></h3>
						<p><strong>Job Type</strong> $jobtype</p>
					</div>

	## Dependencies

					<div class="panel panel-default">
						<div class="panel-heading">Dependencies</div>
						<ul class="list-group">
	#if ($dependencies) 
		#foreach($dependency in $dependencies)
							<li class="list-group-item">
								<a href="${context}/manager?project=${project.name}&flow=${flowid}&job=$dependency">$dependency</a>
							</li>
		#end
	#else
							<li class="list-group-item">No Dependencies</li>
	#end
						</ul>
					</div><!-- /panel -->

	## Dependents

					<div class="panel panel-default">
						<div class="panel-heading">Dependents</div>
						<ul class="list-group">
	#if ($dependents) 
		#foreach($dependent in $dependents)
							<li class="list-group-item">
								<a href="${context}/manager?project=${project.name}&flow=${flowid}&job=$dependent">$dependent</a>
							</li>
		#end
	#else
							<li class="list-group-item">No Dependencies</li>
	#end

						</ul>
					</div><!-- /panel -->

					<div class="panel panel-default">
						<div class="panel-heading">Properties</div>
						<ul class="list-group">
	#if ($properties) 
		#foreach($property in $properties)
							<li class="list-group-item">
								<a href="${context}/manager?project=${project.name}&flow=${flowid}&job=${jobid}&prop=$property">$property</a>
							</li>
		#end
	#else
							<li class="list-group-item">No Property Files For This Job</li>
	#end
						</ul>
					</div><!-- /panel -->
				</div><!-- /col-lg-4 -->
			</div><!-- /row -->

## Edit job modal.

			<div class="modal modal-wide fade" id="job-edit-pane">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
							<h4 class="modal-title">Edit Job</h4>
						</div>
						<div class="modal-body">
							<h4>Job Essentials</h4>
							<dl class="dl-horizontal">
								<dt>Job Name</dt>
								<dd id="jobName"></dd>
								<dt>Job Type</dt>
								<dd id="jobType"></dd>
							</dl>
							<h4>General Job Settings</h4>
							<p><strong>Be Aware:</strong> A job may be shared by multiple flows. The change will be global!</p>
							<table id="generalProps" class="table table-striped table-bordered">
								<thead>
									<tr>
										<th>Name</th>
										<th>Value</th>
									</tr>
								</thead>
								<tbody>
									<tr id="addRow">
										<td id="addRow-col" colspan="2">
											<button type="button" class="btn btn-xs btn-success">Add Row</button>
										</td>
									</tr>
								</tbody>
							</table>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
							<button type="button" class="btn btn-primary" id="set-btn">Set/Change Job Description</button>
						</div>
					</div>
				</div>
			</div>

#end

#parse ("azkaban/webapp/servlet/velocity/footer.vm")
		</div><!-- /container -->
	</body>
</html>
