{{template "header.tpl" .}}
	<div class="cf-container container">

		<div class="row">
			<div class="col-sm-10 col-sm-offset-1 cf-acc">

				<div class="cf-acc-item">
					<h3>Services</h3>
					<a class="btn btn-default mat-button" href="/manage/services" role="button">Manage</a>
					<div class="cf-acc-tag">Create, edit and delete services.</div>
				</div>

				<div class="cf-acc-item">
					<h3>Source Groups</h3>
					<a class="btn btn-default mat-button" href="/manage/sourcegroups" role="button">Manage</a>
					<div class="cf-acc-tag">Create, edit and delete source groups.</div>
				</div>

				<div class="cf-acc-item">
					<h3>HipChat Integration <span class="led" id="id-led-hc"></h3>
					<a class="btn btn-default mat-button" href="#" onclick="return accslide(this,'id-panel-hipchat')" role="button">expand</a>
					<div class="cf-acc-tag">Setup so you can send notifications to HipChat rooms.</div>
					<div id="id-panel-hipchat" style="display: none; padding-top: 20px">

						<div id="id-hc-list" class="row">
							<div class="col-sm-12">
								<div class="table-responsive">
									<table class="table table-hover table-condensed" style="background-color: #fff">
										<thead>
											<tr>
												<th>Room Name</th>
												<th>Notification Token</th>
												<th>Server</th>
												<th>&nbsp;</th>
											</tr>
										</thead>
										<tbody>
											<tr id="id-hc-addanother">
												<td colspan="4">
													<a href="#" class="noul" onclick="$('#id-hc-form').slideToggle(); $('#id-hc-addanother').hide(); return false;"><em class="icon icon-plus"></em> add another</a>
												</td>
											</tr>
										</tbody>
									</table>
								</div>
							</div>
						</div>

						<form class="form-horizontal" id="id-hc-form">
							<div class="form-group">
								<label for="id-hc-room" class="col-sm-3 control-label">Room Name</label>
								<div class="col-sm-8">
									<input type="text" class="form-control" id="id-hc-room" placeholder="name of the HipChat room">
								</div>
							</div>
							<div class="form-group">
								<label for="id-hc-token" class="col-sm-3 control-label">Notification Token</label>
								<div class="col-sm-8">
									<input type="text" class="form-control" id="id-hc-token" placeholder="for the room">
								</div>
							</div>
							<div class="form-group">
								<label for="id-hc-server" class="col-sm-3 control-label">HipChat Server</label>
								<div class="col-sm-8">
									<input type="text" class="form-control" id="id-hc-server" placeholder="for self-hosted HipChat only">
								</div>
							</div>
							<div class="form-group">
								<div class="col-sm-offset-3 col-sm-8">
									<button id="id-hc-test" type="submit" class="btn btn-default mat-button">TEST</button>
									&nbsp; &nbsp;
									<button id="id-hc-add" type="submit" class="btn btn-default mat-button">ADD</button>
								</div>
							</div>
							<div id="id-hc-errormsg-ctr" class="form-group" style="display: none">
								<div class="col-sm-offset-3 col-sm-8">
									<div class="alert alert-danger" role="alert">
										<p>Please fix these errors to continue:</p>
										<p><span id="id-hc-errormsg"></span></p>
									</div>
								</div>
							</div>
						</form>
					</div>
				</div>

				<div class="cf-acc-item">
					<h3>Slack Integration <span class="led" id="id-led-slack"></h3>
					<a class="btn btn-default mat-button" href="#" onclick="return accslide(this,'id-panel-slack')" role="button">expand</a>
					<div class="cf-acc-tag">Setup so you can send notifications to Slack channels.</div>
					<div id="id-panel-slack" style="display: none; padding-top: 20px">

						<div id="id-slack-list" class="row">
							<div class="col-sm-12">
								<div class="table-responsive">
									<table class="table table-hover table-condensed" style="background-color: #fff">
										<thead>
											<tr>
												<th>Channel Name</th>
												<th>Webhook URL</th>
												<th>&nbsp;</th>
											</tr>
										</thead>
										<tbody>
											<tr id="id-slack-addanother">
												<td colspan="4">
													<a href="#" class="noul" onclick="$('#id-slack-form').slideToggle(); $('#id-slack-addanother').hide(); return false;"><em class="icon icon-plus"></em> add another</a>
												</td>
											</tr>
										</tbody>
									</table>
								</div>
							</div>
						</div>

						<form class="form-horizontal" id="id-slack-form">
							<div class="form-group">
								<label for="id-slack-channel" class="col-sm-3 control-label">Channel Name</label>
								<div class="col-sm-8">
									<input type="text" class="form-control" id="id-slack-channel" placeholder="name of your Slack channel">
								</div>
							</div>
							<div class="form-group">
								<label for="id-slack-url" class="col-sm-3 control-label">Webhook URL</label>
								<div class="col-sm-8">
									<input type="text" class="form-control" id="id-slack-url" placeholder="incoming webhook URL">
								</div>
							</div>
							<div class="form-group">
								<div class="col-sm-offset-3 col-sm-8">
									<button id="id-slack-test" type="submit" class="btn btn-default mat-button">TEST</button>
									&nbsp; &nbsp;
									<button id="id-slack-add" type="submit" class="btn btn-default mat-button">ADD</button>
								</div>
							</div>
							<div id="id-slack-errormsg-ctr" class="form-group" style="display: none">
								<div class="col-sm-offset-3 col-sm-8">
									<div class="alert alert-danger" role="alert">
										<p>Please fix these errors to continue:</p>
										<p><span id="id-slack-errormsg"></span></p>
									</div>
								</div>
							</div>
						</form>
					</div>
				</div>

				<div class="cf-acc-item">
					<h3>PagerDuty Integration <span class="led" id="id-led-pd"></h3>
					<a class="btn btn-default mat-button" href="#" onclick="return accslide(this,'id-panel-pagerduty')" role="button">expand</a>
					<div class="cf-acc-tag">Setup so you can raise PagerDuty indicidents when alerts happen.</div>
					<div id="id-panel-pagerduty" style="display: none; padding-top: 20px">
						<form class="form-horizontal">
							<div class="form-group">
								<label for="id-pd-servicekey" class="col-sm-3 control-label">Service Key</label>
								<div class="col-sm-8">
									<input type="text" class="form-control" id="id-pd-servicekey" placeholder="pagerduty service key">
								</div>
							</div>
							<div class="form-group">
								<div class="col-sm-offset-3 col-sm-8">
									<button id="id-pd-update" type="submit" class="btn btn-default mat-button">UPDATE</button>
								</div>
							</div>
							<div id="id-pd-errormsg-ctr" class="form-group" style="display: none">
								<div class="col-sm-offset-3 col-sm-8">
									<div class="alert alert-danger" role="alert">
										<p>Please fix these errors to continue:</p>
										<p><span id="id-pd-errormsg"></span></p>
									</div>
								</div>
							</div>
						</form>
					</div>
				</div>

				<div class="cf-acc-item">
					<h3>OpsGenie Integration <span class="led" id="id-led-og"></h3>
					<a class="btn btn-default mat-button" href="#" onclick="return accslide(this,'id-panel-opsgenie')" role="button">expand</a>
					<div class="cf-acc-tag">Setup so you can report alerts to OpsGenie.</div>
					<div id="id-panel-opsgenie" style="display: none; padding-top: 20px">
						<form class="form-horizontal">
							<div class="form-group">
								<label for="id-og-apikey" class="col-sm-3 control-label">API Key</label>
								<div class="col-sm-8">
									<input type="text" class="form-control" id="id-og-apikey" placeholder="opsgenie api key">
								</div>
							</div>
							<div class="form-group">
								<div class="col-sm-offset-3 col-sm-8">
									<button id="id-og-update" type="submit" class="btn btn-default mat-button">UPDATE</button>
								</div>
							</div>
							<div id="id-og-errormsg-ctr" class="form-group" style="display: none">
								<div class="col-sm-offset-3 col-sm-8">
									<div class="alert alert-danger" role="alert">
										<p>Please fix these errors to continue:</p>
										<p><span id="id-og-errormsg"></span></p>
									</div>
								</div>
							</div>
						</form>
					</div>
				</div>

				<div class="cf-acc-item">
					<h3>VictorOps Integration <span class="led" id="id-led-vo"></h3>
					<a class="btn btn-default mat-button" href="#" onclick="return accslide(this,'id-panel-victorops')" role="button">expand</a>
					<div class="cf-acc-tag">Setup so you can report alerts to VictorOps.</div>
					<div id="id-panel-victorops" style="display: none; padding-top: 20px">
						<form class="form-horizontal">
							<div class="form-group">
								<label for="id-vo-url" class="col-sm-3 control-label">REST URL</label>
								<div class="col-sm-8">
									<input type="text" class="form-control" id="id-vo-url"
									placeholder="victorops generic rest url">
								</div>
							</div>
							<div class="form-group">
								<div class="col-sm-offset-3 col-sm-8">
									<button id="id-vo-update" type="submit" class="btn btn-default mat-button">UPDATE</button>
								</div>
							</div>
							<div id="id-vo-errormsg-ctr" class="form-group" style="display: none">
								<div class="col-sm-offset-3 col-sm-8">
									<div class="alert alert-danger" role="alert">
										<p>Please fix these errors to continue:</p>
										<p><span id="id-vo-errormsg"></span></p>
									</div>
								</div>
							</div>
						</form>
					</div>
				</div>

				<div class="cf-acc-item">
					<h3>PushBullet Integration <span class="led" id="id-led-pb"></h3>
					<a class="btn btn-default mat-button" href="#" onclick="return accslide(this,'id-panel-pb')" role="button">expand</a>
					<div class="cf-acc-tag">Setup so you can push notifications to your device via PushBullet.</div>
					<div id="id-panel-pb" style="display: none; padding-top: 20px">
						<form class="form-horizontal">
							<div class="form-group">
								<label for="id-pb-token" class="col-sm-3 control-label">Access Token</label>
								<div class="col-sm-8">
									<input type="text" class="form-control" id="id-pb-token" placeholder="access token">
								</div>
							</div>
							<div class="form-group">
								<div class="col-sm-offset-3 col-sm-8">
									<button id="id-pb-test" type="submit" class="btn btn-default mat-button">TEST</button>
									&nbsp; &nbsp;
									<button id="id-pb-update" type="submit" class="btn btn-default mat-button">UPDATE</button>
								</div>
							</div>
							<div id="id-pb-errormsg-ctr" class="form-group" style="display: none">
								<div class="col-sm-offset-3 col-sm-8">
									<div class="alert alert-danger" role="alert">
										<p>Please fix these errors to continue:</p>
										<p><span id="id-pb-errormsg"></span></p>
									</div>
								</div>
							</div>
						</form>
					</div>
				</div>

				<div class="cf-acc-item" style="border-bottom: none">
					<h3>Webhook Integration <span class="led" id="id-led-webhook"></h3>
					<a class="btn btn-default mat-button" href="#" onclick="return accslide(this,'id-panel-webhook')" role="button">expand</a>
					<div class="cf-acc-tag">Setup so you can send notifications to your own Webhooks.</div>
					<div id="id-panel-webhook" style="display: none; padding-top: 20px">
						<div id="id-webhook-list" class="row" style="display: none">
							<div class="col-sm-12">
								<div class="table-responsive">
									<table class="table table-hover table-condensed" style="background-color: #fff">
										<thead>
											<tr>
												<th width="25%">Name</th>
												<th>Webhook URL</th>
												<th width="10%">Actions</th>
											</tr>
										</thead>
										<tbody>
											<tr id="id-webhook-addanother">
												<td colspan="4">
													<a href="#" class="noul" onclick="$('#id-webhook-form').slideToggle(); $('#id-webhook-addanother').hide(); return false;"><em class="icon icon-plus"></em> add another</a>
												</td>
											</tr>
										</tbody>
									</table>
								</div>
							</div>
						</div>
						<form class="form-horizontal" id="id-webhook-form">
							<div class="form-group">
								<label for="id-webhook-name" class="col-sm-3 control-label">Name</label>
								<div class="col-sm-8">
									<input type="text" class="form-control" id="id-webhook-name" placeholder="a name for your webhook URL">
								</div>
							</div>
							<div class="form-group">
								<label for="id-webhook-url" class="col-sm-3 control-label">Webhook URL</label>
								<div class="col-sm-8">
									<input type="text" class="form-control" id="id-webhook-url" placeholder="the URL for your webhook">
								</div>
							</div>
							<div class="form-group">
								<div class="col-sm-offset-3 col-sm-8">
									<button id="id-webhook-test" type="submit" class="btn btn-default">TEST</button>
									&nbsp; &nbsp;
									<button id="id-webhook-add" type="submit" class="btn btn-default">ADD</button>
								</div>
							</div>
							<div id="id-webhook-errormsg-ctr" class="form-group" style="display: none">
								<div class="col-sm-offset-3 col-sm-8">
									<div class="alert alert-danger" role="alert">
										<p>Please fix these errors to continue:</p>
										<p><ul id="id-webhook-errormsg"></ul></p>
									</div>
								</div>
							</div>
						</form>
					</div>
				</div>

			</div>
		</div>

	</div><!-- container -->

{{template "footer-pre.tpl" .}}
		<script type="text/javascript">
		var hipChatConfig={{if .hipChatConfig}}{{.hipChatConfig}}{{else}}null{{end}};
		var slackConfig={{if .slackConfig}}{{.slackConfig}}{{else}}null{{end}};
		var pagerDutyConfig={{if .pagerDutyConfig}}{{.pagerDutyConfig}}{{else}}null{{end}};
		var opsGenieConfig={{if .opsGenieConfig}}{{.opsGenieConfig}}{{else}}null{{end}};
		var victorOpsConfig={{if .victorOpsConfig}}{{.victorOpsConfig}}{{else}}null{{end}};
		var pbConfig={{if .pbConfig}}{{.pbConfig}}{{else}}null{{end}};
		var webhookConfig={{if .webhookConfig}}{{.webhookConfig}}{{else}}null{{end}};
		</script>
		<script src="/js/system-settings-min.js" type="text/javascript"></script>
{{template "footer-post.tpl" .}}