<div class="panel-heading" ng-class="panelClass(currentStatus)+'-box'" ng-click="toggle()">
	<h4 class="panel-title">
		<a href>
			<span title="This exclamation icon represents that the alert is in an active (non-normal) state." class="glyphicon" ng-class="{'glyphicon-exclamation-sign': state.last.Status && state.last.Status != 'normal'}"></span>
			<span title="This mute icon represents that the alert has been silenced." class="glyphicon" ng-class="{'glyphicon-volume-off': child.Silenced}"></span>
			<span title="This question mark icon represents that the alert is in an unevaluated state. Alerts are unevaluated when a dependency is active." class="glyphicon" ng-class="{'glyphicon-question-sign': state.Unevaluated}"></span>
			<a ng-href="errorHistory?alert={{encode(state.Alert)}}">
				<span title="This fire icon represents that the alert has an underlying error. Errors come from things like a time series database issue or a malformed query." class="glyphicon" ng-class="{'glyphicon-fire': child.IsError}"></span>
			</a>
			<span ng-show="state.Id">#{{state.Id}}:</span>
			<span ng-bind="child.Subject || child.AlertKey"></span>
			
			<span class="pull-right" ng-show="child.Ago" ts-since="child.Ago"></span>
		</a>
	</h4>
</div>
<div class="panel-body" ng-if="show">
	<div class="row">
		<div class="col-sm-6">
			<div class="row">
				<div class="col-sm-3">
					<p><strong>Alert Key:</strong></p>
				</div>
				<div class="col-sm-9">
					<span ng-bind="zws(name)" />
				</div>
			</div>
			<div class="row">
				<div class="col-sm-3">
					<p><strong>State:</strong></p>
				</div>
				<div class="col-sm-9">
					<span ng-bind="state.last.Status" /> since <span ts-time="state.last.Time"/>
				</div>
			</div>
			<div class="row">
				<div class="col-sm-3">
					<p><strong>Views:</strong></p>
				</div>
				<div class="col-sm-9">
					<a ng-href="/history?key={{encode(name)}}">Full History</a>,
					<a ng-href="{{state.RuleUrl}}">Rule Editor</a>,
					<a ng-href="/expr?expr={{btoa(state.Expr)}}">Expression</a>,
					<a ng-href="/incident?id={{state.Id}}">Incident (#<span ng-bind="state.Id"/>)</a>
				</div>
			</div>
		</div>
		<div class="col-sm-6">
			<div class="row">
				<div class="col-sm-3">
					<p><strong>Silence:</strong></p>
				</div>
				<div class="col-sm-9">
					<a class="btn btn-default btn-xs" ng-href="/silence?duration=1h&alert={{state.Alert}}&tags={{encode(state.Tags)}}">1 hour</a>
					<a class="btn btn-default btn-xs" ng-href="/silence?duration=2h&alert={{state.Alert}}&tags={{encode(state.Tags)}}">2 hours</a>
					<a class="btn btn-default btn-xs" ng-href="/silence?duration=6h&alert={{state.Alert}}&tags={{encode(state.Tags)}}">6 hours</a>
					<a class="btn btn-default btn-xs" ng-href="/silence?duration=12h&alert={{state.Alert}}&tags={{encode(state.Tags)}}">12 hours</a>
					<a class="btn btn-default btn-xs" ng-href="/silence?duration=24h&alert={{state.Alert}}&tags={{encode(state.Tags)}}">24 hours</a>
				</div>
			</div>
			<div class="row">
				<div class="col-sm-3">
					<p><strong>Actions:</strong></p>
				</div>
				<div class="col-sm-9">
					<ts-ack></ts-ack>
					<ts-close></ts-close>
					<ts-force-close></ts-force-close>
					<ts-forget ng-if="group.Status == 'unknown'"></ts-forget>
					<ts-purge></ts-purge>
				</div>
			</div>
			<div class="row" ng-show="state.LastAction">
				<div class="col-sm-3">
					<p><strong>Last Action:</strong></p>
				</div>
				<div class="col-sm-9">
					{{state.LastAction.Type}}
					<span ng-show="state.LastAction.User">by {{state.LastAction.User}}</span>
					at <span ts-time="state.LastAction.Time"></span>
					<span ng-show="state.LastAction.Message">: {{state.LastAction.Message}}</span>
				</div>
			</div>
		</div>
	</div>
	<div class="row" ng-if="state.Body">
		<div class="col-sm-12">
			<hr/>
		</div>
		<div class="col-sm-12" ng-bind-html="state.Body"></div>
	</div>
</div>
