<style type="text/css">

.resize {
   	margin-bottom: 15px;
	border: 1px solid lightgrey;
	height : 500px;
	width: 100%
}

.ace_editor  {
	width: 100%;
	height: 100%;
}

.selectorDropdown{
	float: left;
	margin-right: 5px;
	margin-bottom: 15px;
}
.actionButtons{
	float:right;margin-left:5px;
}

.section-button {
	max-height: 500px;
	overflow-y: auto;
}


/* http://stackoverflow.com/questions/17206631/why-are-bootstrap-tabs-displaying-tab-pane-divs-with-incorrect-widths-when-using fixes timeline drawing at default width while tab is hidden */
.tab-content > .tab-pane {
    display: block;
    height: 0;
    overflow-y: hidden;
    overflow-x: hidden;
}

.tab-content > .active {
    height: auto;
}

</style>
<label class="selectorDropdown" style="margin-right:15px;">Jump to:</label>
<div class="row">
	<div class="dropdown selectorDropdown" ng-repeat="(type,list) in items">
		<button class="btn btn-primary dropdown-toggle" type="button" id="itemSelector" data-toggle="dropdown" ng-bind="type">
			<span class="caret"></span>
		</button>
		<ul class="dropdown-menu section-button" role="menu">
			<li role="presentation" ng-repeat="item in list | orderBy:'toString()'"><a role="menuitem" tabindex="-1" ng-click="scrollTo(type,item);">{{item}}</a></li>
		</ul>
	</div>
	<div class="btn btn-default" ng-show="quickJumpTarget" ng-bind="quickJumpTarget" ng-click="quickJump()"></div>
	<div class="btn btn-default actionButtons" ng-click="validate()">Validate</div>
	<div class="btn btn-default actionButtons" ng-click="aceToggleHighlight()">Toggle Syntax Highlighting</div>
	<div class="btn btn-default actionButtons" ng-click="downloadConfig()">Download</div>
</div>
<div class="row" ng-show="validationResult">
	<div class="col-lg-12">
		<div class="alert alert-dismissible" ng-class="validationResult == 'Valid' ? 'alert-success' : 'alert-danger'" ng-bind="validationResult">
			<button type="button" class="close" ng-click="validationResult=''"><span>&times;</span></button>
		</div>
	</div>
</div>
<div class="row">
	<div tsresizable on-resize="editor.resize()" class='resize'>
		<div ui-ace="{ onLoad : aceLoaded, mode: aceMode, theme: aceTheme, advanced: { fontSize: '14px', fontFamily: 'Menlo, Monaco, Consolas, monospace' }}" ng-model="config_text" ></div>
	</div>
</div>
<div class="row">
	<div class="col-lg-12">
		<form class="form-inline">
			<div class="form-group">
				<label class="control-label">From</label>
				<input type="text" class="form-control" style="width:9em" ng-model="fromDate" ng-change="setInterval()" placeholder="yyyy-mm-dd" bs-datepicker data-date-format="yyyy-MM-dd" data-date-type="string">
				<input type="text" class="form-control" style="width:9em" ng-model="fromTime" ng-change="setInterval()" placeholder="HH:MM">
			</div>
			<div class="form-group">
				<label class="control-label">To</label>
				<input type="text" class="form-control" style="width:9em" ng-model="toDate" ng-change="setInterval()" placeholder="yyyy-mm-dd" bs-datepicker data-date-format="yyyy-MM-dd" data-date-type="string">
			</div>
			<div class="form-group">
				<input type="text" class="form-control" style="width:9em" ng-model="toTime" ng-change="setInterval()" placeholder="HH:MM">
			</div>
			<div class="form-group">
				<label class="control-label">Intervals</label>
				<input type="number" min="2" step="1" style="width:7em" class="form-control" ng-model="intervals" ng-change="setInterval()" ng-disabled="!fromDate || !toDate" tooltip title="Number of evaluations between timespan.">
			</div>
			<div class="form-group">
				<label class="control-label">Step Duration (m)</label>
				<input type="number" min="1" step="1" style="width:7em" class="form-control" ng-model="duration" ng-change="setDuration()" ng-disabled="!fromDate || !toDate" tooltip title="Step duration in minutes between intervals.">
			</div>
			
		</form>
	</div>
</div>
<div class="row" style="margin-bottom:15px;">
	<div class="col-lg-12">
		</p>
		<form class="form-inline">
			<div class="form-group">
				<label class="control-label">Email</label>
				<input type="email" class="form-control" style="width:20em" ng-model="email">
			</div>
			<div class="form-group">
				<label class="control-label">Template Group</label>
				<input type="text" class="form-control" style="width:20em" ng-model="template_group" tooltip title="Set which result to use for the template by setting an opentsdb group (aka tagset) in the format of k=v,m=o. The first result for which the specified group is a subset of a result is used. If no results are a subset of the specified group, then the first result is chosen.">
			</div>
			<div class="form-group">
				<button class="btn btn-primary" ng-click="test()">Test {{selected_alert}}</button>
			</div>
		</form>
	</div>
</div>
<div class="row" ng-show="running">
	<div class="col-lg-12">
		<div class="alert alert-info">
			Running...
		</div>
	</div>
</div>
<div class="row" ng-show="error">
	<div class="col-lg-12">
		<pre class="alert alert-danger" ng-bind="error" style="white-space: pre-wrap;"></pre>
	</div>
</div>
<div class="row" ng-show="warning.length > 0">
	<div class="col-lg-12" ng-repeat="w in warning track by $index">
		<div class="alert alert-warning" ng-bind="w"></div>
	</div>
</div>
<ul class="nav nav-tabs">
	<li ng-class="{active: tab == 'results'}"><a href ng-click="tab = 'results'">Results</a></li>
	<li ng-class="{active: tab == 'template'}"><a href ng-click="tab = 'template'">Template</a></li>
	<li ng-class="{active: tab == 'timeline'}"><a href ng-click="tab = 'timeline'">Timeline</a></li>
</ul>
<div class="tab-content">
	<div class="tab-pane" ng-class="{active: tab == 'timeline'}">
		<div ng-if="tab == 'timeline' && fromDate && toDate">
			<div class="row">
				<div class="col-lg-12 timeline" ts-time-line></div>
			</div>
			<div class="row">
				<div class="panel-group" ng-repeat="entry in entries" ng-init="name = entry.key; a = entry.value">
					<div class="panel panel-default">
						<div class="panel-heading panel-title" ng-click="collapse('group' + $index)">
							<span ng-bind="name"></span>
							<span class="pull-right" ng-bind="a.History.length + ' events'"></span>
						</div>
						<div class="panel-body" ng-if="shown['group' + $index]">
							<div class="panel-group">
								<div class="panel" ng-class="panelClass(v.Status)" ng-repeat="v in a.History">
									<div class="panel-heading" ng-click="collapse('panel' + $parent.$index + '-' + $index,entry,v)" id="{{'panel' + $parent.$index + '-' + $index}}">
										<h4 class="panel-title">
											<a href>
												<span ng-bind="name + ': ' + v.Status"></span>
												<span class="pull-right" ng-show="v.Time" ts-time="v.Time" ts-end-time="v.EndTime" no-link="true"></span>
											</a>
										</h4>
									</div>
									<div class="panel-body" ng-if="shown['panel' + $parent.$index + '-' + $index]">
										<div ng-show="!v.doneLoading">Loading...</div>
										<div class="row" ng-show="v.error">
											<div class="col-lg-12">
												<pre class="alert alert-danger" ng-bind="v.error" style="white-space: pre-wrap;"></pre>
											</div>
										</div>
										<div class="panel panel-default">
											<div class="panel-heading">
												<h3 class="panel-title">Subject</h3>
											</div>
											<div class="panel-body template" ng-bind="v.subject"></div>
										</div>
										<div class="panel panel-default">
											<div class="panel-heading">
												<h3 class="panel-title">Body</h3>
											</div>
											<div class="panel-body template" ng-bind-html="v.body"></div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="tab-pane" ng-class="{active: tab == 'template'}">
		<div class="panel panel-default">
			<div class="panel-heading">
				<h3 class="panel-title">Subject</h3>
			</div>
			<div class="panel-body template" ng-bind="subject"></div>
		</div>
		<div class="panel panel-default">
			<div class="panel-heading">
				<h3 class="panel-title">Body</h3>
			</div>
			<div class="panel-body template" ng-bind-html="body"></div>
		</div>
		<h4>Available Variables</h4>
		<pre ng-bind="data"></pre>
	</div>
	<div class="tab-pane" ng-class="{active: tab == 'results'}">
		<div class="row">
			<div class="col-sm-6">
				<table class="table">
					<thead>
						<tr>
							<th>Time</th>
							<th>Criticals</th>
							<th>Warnings</th>
							<th>Normals</th>
							<th>Errors</th>
						</tr>
					</thead>
					<tbody>
						<tr ng-repeat="set in sets">
							<td><a href="#" ng-bind="set.Time" ng-click="scrollToInterval($index)"></a></td>
							<td ng-bind="set.Critical || ''" ng-class="set.Critical ? 'danger' : ''"></td>
							<td ng-bind="set.Warning || ''" ng-class="set.Warning ? 'warning' : ''"></td>
							<td ng-bind="set.Normal || ''" ng-class="set.Normal ? 'success' : ''"></td>
							<td ng-bind="set.Error || ''" ng-class="set.Error ? 'danger' : ''"></td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
		<div class="row" ng-repeat="set in sets">
			<div class="col-sm-12">
				<h4 id="time-{{$index}}">
					Time: {{set.Time}}
					<small>criticals: {{set.Critical}}, warnings: {{set.Warning}}, normals: {{set.Normal}}, errors: {{set.Error}}</small>
					<button class="btn btn-default btn-sm" ng-hide="set.Results" ng-click="show(set)" ng-bind="set.Show || 'show'" ng-disabled="set.Show"></button>
				</h4>
				<table class="table" ng-show="set.Results">
					<thead>
						<tr>
							<th>Group</th>
							<th>Status</th>
							<th>Expression</th>
							<th>Result</th>
							<th>Computations</th>
						</tr>
					</thead>
					<tbody ng-repeat="r in set.Results" ng-init="result = r.Result; group = r.Group">
						<tr>
							<td rowspan="2" ng-bind="zws(group)" ng-click="setTemplateGroup(group)"></td>
							<td rowspan="2" ng-bind="result.Status" ng-class="panelClass(result.Status, '')"></td>
							<td ng-if="result.Crit">critical</td>
							<td ng-if="result.Crit">
								<pre ng-bind="json(result.Crit.Value)" ng-show="result.Crit"></pre>
							</td>
							<td ng-if="result.Crit" ts-computations="result.Crit.Computations"></td>
						</tr>
						<tr ng-if="result.Warn">
							<td>warning</td>
							<td>
								<pre ng-bind="json(result.Warn.Value)" ng-show="result.Warn"></pre>
							</td>
							<td ts-computations="result.Warn.Computations"></td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	</div>
</div>