<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="Ironsmith - A simple, script driven continuous integration tool">

	<title>Ironsmith - A simple, script driven continuous integration tool</title>

	<link rel="stylesheet" href="/css/pure-min.css">

	<style>
		.container {
			padding-right: 15px;
			padding-left: 15px;
			margin-right: auto;
			margin-left: auto;
		}

		@media (min-width: 768px) {
			.container {
				padding-right: 40px;
				padding-left: 40px;
			}
		}

		.center-block {
			display: block;
			margin-left: auto;
			margin-right: auto;
		}

		.text-center {
			text-align: center;
		}

		/*tables*/

		.table-responsive {
			margin-left: auto;
			margin-right: auto;
			overflow-x: auto;
		}

		.table-responsive table {
			width: 100%;
			max-width: 100%;
		}

		/* error */
		.error {
			display: inline-block;
			background-color: red;
			color: white;
			border-radius: 4px;
			padding: .5em 1em;
			margin: 10px;
		}

		/* breadcrumbs */

		#breadcrumbs {
			margin-bottom: 10px;
		}

		.breadcrumb-separator {
			color: #ccc;
			font-weight: bold;
			font-size: 2em;
		}


		.pull-left {
			float: left;
		}
		.pull-right {
			float: right;
		}
	
		.timestamp {
			font-size: .75em;
			color: #777;
			margin-left: 10px;
		}

		.log {
			margin-left: 15px;
			margin-right: 15px;
		}

		.log > pre {
			margin-left: 15px;
		}
	</style>
</head>
<body>
<script id="tMain" type="text/ractive">
<div class="container pure-g">
	<div class="pure-u-1">
		<h3 class="text-center">Iron Smith</h3>
		{{#if error}}
			<div class="text-center">
				<span class="error">{{error}}</span>
			</div>
		{{/if}}
		<div id="breadcrumbs" class="pure-menu pure-menu-horizontal text-center">
			<ul class="pure-menu-list">
				<li class="pure-menu-item">
					<a href="/" class="pure-menu-link">Project List</a>
				</li>
				{{#if project}}
					<li class="pure-menu-item">
						<span class="breadcrumb-separator">/</span>
					</li>
					{{#if !version && !currentStage}}
						<li class="pure-menu-item pure-menu-has-children" decorator="menu">
							<a href="#" id="projectMenu" class="pure-menu-link">{{project.name}}</a>
							<ul class="pure-menu-children">
								<li class="pure-menu-item">
									<a href="#" class="pure-menu-link" on-click="triggerBuild">Trigger Build</a>
								</li>
							</ul>
						</li>
					{{else}}
						<li class="pure-menu-item">
							<a href="/project/{{project.id}}" class="pure-menu-link">{{project.name}}</a>
						</li>
					{{/if}}
				{{/if}}
				{{#if project && version}}
					<li class="pure-menu-item">
						<span class="breadcrumb-separator">/</span>
					</li>
					<li class="pure-menu-item">
						<a href="/project/{{project.id}}/{{version}}" class="pure-menu-link">{{version}}</a>
					</li>
				{{/if}}
				{{#if project && version && currentStage}}
					<li class="pure-menu-item">
						<span class="breadcrumb-separator">/</span>
					</li>
					<li class="pure-menu-item">
						<a href="/project/{{project.id}}/{{version}}/{{currentStage}}" class="pure-menu-link">{{currentStage}}</a>
					</li>
				{{/if}}
			</ul>
		</div>
		{{#if !project}}
			{{>projects}}
		{{elseif !version}}
			{{>project}}
		{{else}}
			{{>version}}
		{{/if}}
	</div>
</div>


{{#partial projects}}
<div class="table-responsive">
<table class="pure-table pure-table-striped">
	<thead>
		<tr>
			<th>Project</th>
			<th>Status</th>
			<th>Last Version</th>
			<th>Last Log</th>
			<th>Last Release</th>
			<th>Last Release File</th>
		</tr>
	</thead>
	<tbody>
		{{#projects:i}}	
			<tr title="{{formatDate(.lastLog.when)}}">
				<td><a href="/project/{{.id}}/">{{.name}}</a></td>
				<td>{{.status}}</td>
				<td>
					<a href="/project/{{.id}}/{{.lastLog.version}}">{{.lastLog.version}}</a>
				</td>
				<td title="{{.lastLog.log}}">{{#if .lastLog.log}}{{.lastLog.log.substring(0,100)}}{{/if}}</td>
				<td>
					<a href="/project/{{.id}}/{{.releaseVersion}}">{{.releaseVersion}}</a>
				</td>
				<td>
					{{#if releases[.id]}}
						<a href="/release/{{.id}}?file">{{releases[id].fileName}}</a>	
					{{else}}
						No release file available
					{{/if}}
				</td>
			</tr>
		{{/projects}}
	</tbody>
</table>
</div>
{{/partial}}

{{#partial project}}
<div class="table-responsive">
<table class="pure-table pure-table-striped">
	<thead>
		<tr>
			<th>Version</th>
			<th>Stage</th>
			<th>Last Log</th>
			<th>Release File</th>
		</tr>
	</thead>
	<tbody>
		{{#project.versions:i}}	
			<tr title="{{formatDate(.when)}}">
				<td>
					<a href="/project/{{project.id}}/{{.version}}">{{.version}}</a>
				</td>
				<td>{{.stage}}</td>
				<td title="{{.log}}">{{#if .log}}{{.log.substring(0,100)}}{{/if}}</td>
				<td>
					{{#if releases[project.id + .version]}}
						<a href="/release/{{project.id}}/{{.version}}?file">{{releases[project.id + .version].fileName}}</a>	
					{{/if}}
				</td>
			</tr>
		{{/versions}}
	</tbody>
</table>
</div>

{{/partial}}

{{#partial version}}
<hr>
{{#if releases[project.id + .version]}}
	<a href="/release/{{project.id}}/{{.version}}?file" class="pull-right pure-button pure-button-primary">Download Release</a>
{{/if}}

<div class="pure-menu pure-menu-horizontal">
	<ul class="pure-menu-list">
		<li class="pure-menu-item {{#if !currentStage}}pure-menu-selected{{/if}}">
			<a href="/project/{{project.id}}/{{.version}}/" class="pure-menu-link">All</a>
		</li>
		{{#stages:i}}
		<li class="pure-menu-item {{#if currentStage && currentStage == .stage}}pure-menu-selected{{/if}}">
			<a href="/project/{{project.id}}/{{version}}/{{.stage}}" class="pure-menu-link">{{.stage}}</a>
		</li>
		{{/stages}}
	</ul>
</div>
<hr>
<div class="log">
	{{#if currentStage}}
		<h3>{{currentStage}}<small class="timestamp">{{formatDate(logs.when)}}</small></h3>
		<pre><samp>{{logs.log}}</samp></pre>
	{{else}}
		{{#stages:i}}
			<h3>{{.stage}}<small class="timestamp">{{formatDate(.when)}}</small></h3>
			<pre><samp>{{.log}}</samp></pre>
		{{/stages}}
	{{/if}}
</div>
{{/partial}}

</script>
<script src="/js/ractive.min.js"></script>
<script src="/js/index.js"></script>
</body>
</html>