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

		<h2 id="id-form-title">Create New Service</h2>
		<div id="id-editor" class="row" style="padding: 18px 18px 0px 18px">
			<div class="col-md-4 col-sm-4 col-xs-12">
				<form id="id-svccreate" class="form-horizontal">

					<div class="form-group">
						<label for="id-svcname" class="col-sm-2 control-label">Name</label>
						<div class="col-sm-10">
							<input type="text" class="form-control" id="id-svcname" placeholder="name for the service">
						</div>
					</div>

					<div class="form-group">
						<label class="col-sm-2 control-label">Type</label>
						<div class="col-sm-10">
							<div class="radio">
								<label>
									<input id="id-svctype-0" type="radio" name="svctype" value="0" autocomplete="off">
									MySQL
								</label>
							</div>
							<div class="radio">
								<label>
									<input id="id-svctype-3" type="radio" name="svctype" value="3" autocomplete="off">
									PostgreSQL
								</label>
							</div>
							<div class="radio">
								<label>
									<input id="id-svctype-5" type="radio" name="svctype" value="5" autocomplete="off">
									MongoDB
								</label>
							</div>
							<div class="radio">
								<label>
									<input id="id-svctype-1" type="radio" name="svctype" value="1" autocomplete="off">
									Memcache
								</label>
							</div>
							<div class="radio">
								<label>
									<input id="id-svctype-4" type="radio" name="svctype" value="4" autocomplete="off">
									Redis
								</label>
							</div>
							<div class="radio">
								<label>
									<input id="id-svctype-2" type="radio" name="svctype" value="2" autocomplete="off">
									HTTP URL
								</label>
							</div>
						</div>
					</div>

					<div class="row" id="id-errormsg-container" style="margin-top: 18px; display: none">
						<div class="col-sm-12">
							<div class="alert alert-danger" role="alert">
								<p>Please fix these errors to continue:</p>
								<p><span id="id-errormsg"></span></p>
							</div>
						</div>
					</div><!-- /row -->

					<div class="form-group">
						<div id="id-btngrp-create" class="col-sm-12" style="text-align: center; padding-top: 18px">
							<button id="id-create" type="submit" class="btn btn-default mat-button">CREATE</button>
						</div>
						<div id="id-btngrp-edit" class="col-sm-12" style="text-align: center; padding-top: 18px; display: none">
							<button id="id-update" type="submit" class="btn btn-default mat-button">UPDATE</button>
							&nbsp;
							<button id="id-cancel" type="submit" class="btn btn-default mat-button">CANCEL</button>
						</div>
					</div>

				</form>
			</div>

			<div class="col-md-6 col-sm-8 col-xs-12" style="border-left: 1px solid #bbb">

				<div id="id-cfg-svctype0" style="display: none">
					<label>Configuration for MySQL</label>
					<div style="padding: 18px; color: #666">
						<p>Collects pre-defined metrics from MySQL servers (v5.5+).</p>
					</div>

					<form class="form-horizontal">
						<div class="form-group">
							<label for="id-svc0-host" class="col-sm-3 control-label">Server Host*</label>
							<div class="col-sm-7">
								<input type="text" class="form-control" id="id-svc0-host" placeholder="hostname">
							</div>
						</div>
						<div class="form-group">
							<label for="id-svc0-port" class="col-sm-3 control-label">Server Port</label>
							<div class="col-sm-3">
								<input type="text" class="form-control" id="id-svc0-port" placeholder="3306">
							</div>
						</div>
						<div class="form-group">
							<label for="id-svc0-user" class="col-sm-3 control-label">Username</label>
							<div class="col-sm-7">
								<input type="text" class="form-control" id="id-svc0-user" placeholder="unprivileged user">
							</div>
						</div>
						<div class="form-group">
							<label for="id-svc0-pass" class="col-sm-3 control-label">Password</label>
							<div class="col-sm-7">
								<input type="password" class="form-control" id="id-svc0-pass">
								<div id="id-passagain" class="alert alert-warning passagain" role="alert" style="color: #666; margin: 8px; display: none">
									If you set a password, please re-enter it now.
								</div>
							</div>
						</div>
					</form>
				</div><!-- svctype0 -->

				<div id="id-cfg-svctype1" style="display: none">
					<label>Configuration for Memcache</label>
					<div style="padding: 18px; color: #666">
						<p>Collects pre-defined metrics from Memcache servers.</p>
					</div>

					<form class="form-horizontal">
						<div class="form-group">
							<label for="id-svc1-host" class="col-sm-3 control-label">Server Host*</label>
							<div class="col-sm-7">
								<input type="text" class="form-control" id="id-svc1-host" placeholder="hostname">
							</div>
						</div>
						<div class="form-group">
							<label for="id-svc1-port" class="col-sm-3 control-label">Server Port</label>
							<div class="col-sm-3">
								<input type="text" class="form-control" id="id-svc1-port" placeholder="11211">
							</div>
						</div>
					</form>
				</div><!-- svctype1 -->

				<div id="id-cfg-svctype2" style="display: none">
					<label>Configuration for HTTP URL</label>
					<div style="padding: 18px; color: #666">
						<p>Polls an HTTP URL every minute and checks the response.</p>
					</div>

					<form class="form-horizontal">
						<div class="form-group">
							<label for="id-svc2-url" class="col-sm-3 control-label">URL*</label>
							<div class="col-sm-7">
								<input type="text" class="form-control" id="id-svc2-url" placeholder="http or https url">
							</div>
						</div>
						<div class="form-group">
							<label for="id-svc2-method" class="col-sm-3 control-label">Method</label>
							<div class="col-sm-7">
								<select id="id-svc2-method" class="form-control" data-width="auto">
									<option selected value="GET">GET</option>
									<option value="HEAD">HEAD</option>
									<option value="POST">POST</option>
									<option value="PUT">PUT</option>
								</select>
							</div>
						</div>
						<div class="form-group">
							<label for="id-svc2-header" class="col-sm-3 control-label">Additonal<br>Headers<br><span class="cf-svchint">(one per line)</span></label>
							<div class="col-sm-7">
								<textarea id="id-svc2-header" class="form-control cf-tt" rows="3"></textarea>
							</div>
						</div>
						<div class="form-group">
							<label for="id-svc2-body" class="col-sm-3 control-label">Body</label>
							<div class="col-sm-7">
								<textarea id="id-svc2-body" class="form-control cf-tt" rows="5"></textarea>
							</div>
						</div>
					</form>
				</div><!-- svctype2 -->

				<div id="id-cfg-svctype3" style="display: none">
					<label>Configuration for PostgreSQL</label>
					<div style="padding: 18px; color: #666">
						<p>Collects pre-defined metrics from PostgreSQL servers (v9.3+).</p>
					</div>

					<form class="form-horizontal">
						<div class="form-group">
							<label for="id-svc3-host" class="col-sm-3 control-label">Server Host*</label>
							<div class="col-sm-7">
								<input type="text" class="form-control" id="id-svc3-host" placeholder="hostname">
							</div>
						</div>
						<div class="form-group">
							<label for="id-svc3-port" class="col-sm-3 control-label">Server Port</label>
							<div class="col-sm-3">
								<input type="text" class="form-control" id="id-svc3-port" placeholder="5432">
							</div>
							<div class="col-sm-3">
								<div class="checkbox">
									<label>
										<input type="checkbox" id="id-svc3-ssl" autocomplete="off"> Enable SSL
									</label>
								</div>
							</div>
						</div>
						<div class="form-group">
							<label for="id-svc3-user" class="col-sm-3 control-label">Username</label>
							<div class="col-sm-7">
								<input type="text" class="form-control" id="id-svc3-user">
							</div>
						</div>
						<div class="form-group">
							<label for="id-svc3-pass" class="col-sm-3 control-label">Password</label>
							<div class="col-sm-7">
								<input type="password" class="form-control" id="id-svc3-pass">
								<div id="id-svc3-passagain" class="alert alert-warning passagain" role="alert" style="color: #666; margin: 8px; display: none">
									If you set a password, please re-enter it now.
								</div>
							</div>
						</div>
						<div style="padding: 18px; color: #666">
							<p>Note: Some metrics will be accurate only if the user has superuser privileges.</p>
						</div>
					</form>
				</div><!-- svctype3 -->

				<div id="id-cfg-svctype4" style="display: none">
					<label>Configuration for Redis</label>
					<div style="padding: 18px; color: #666">
						<p>Collects pre-defined metrics from Redis servers.</p>
					</div>

					<form class="form-horizontal">
						<div class="form-group">
							<label for="id-svc4-host" class="col-sm-3 control-label">Server Host*</label>
							<div class="col-sm-7">
								<input type="text" class="form-control" id="id-svc4-host" placeholder="hostname">
							</div>
						</div>
						<div class="form-group">
							<label for="id-svc4-port" class="col-sm-3 control-label">Server Port</label>
							<div class="col-sm-3">
								<input type="text" class="form-control" id="id-svc4-port" placeholder="6379">
							</div>
						</div>
						<div class="form-group">
							<label for="id-svc4-pass" class="col-sm-3 control-label">Password</label>
							<div class="col-sm-7">
								<input type="password" class="form-control" id="id-svc4-pass">
								<div id="id-svc4-passagain" class="alert alert-warning passagain" role="alert" style="color: #666; margin: 8px; display: none">
									If you set a password, please re-enter it now.
								</div>
							</div>
						</div>
					</form>
				</div><!-- svctype4 -->

				<div id="id-cfg-svctype5" style="display: none">
					<label>Configuration for MongoDB</label>
					<div style="padding: 18px; color: #666">
						<p>Collects metrics from MongoDB servers (v2.4+).</p>
					</div>

					<form class="form-horizontal">
						<div class="form-group">
							<label for="id-svc5-host" class="col-sm-3 control-label">Server Host*</label>
							<div class="col-sm-7">
								<input type="text" class="form-control" id="id-svc5-host" placeholder="hostname">
							</div>
						</div>
						<div class="form-group">
							<label for="id-svc5-port" class="col-sm-3 control-label">Server Port</label>
							<div class="col-sm-3">
								<input type="text" class="form-control" id="id-svc5-port" placeholder="27017">
							</div>
						</div>
						<div class="form-group">
							<label for="id-svc5-user" class="col-sm-3 control-label">Username</label>
							<div class="col-sm-7">
								<input type="text" class="form-control" id="id-svc5-user" placeholder="">
							</div>
						</div>
						<div class="form-group">
							<label for="id-svc5-pass" class="col-sm-3 control-label">Password</label>
							<div class="col-sm-7">
								<input type="password" class="form-control" id="id-svc5-pass">
								<div id="id-svc5-passagain" class="alert alert-warning passagain" role="alert" style="color: #666; margin: 8px; display: none">
									If you set a password, please re-enter it now.
								</div>
							</div>
						</div>
					</form>
				</div><!-- svctype5 -->

			</div>

		</div>

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

	<div class="container-fluid cf-container">
		<h2 style="display: inline-block">Existing Services</h2>
		<span style="padding-left: 15px">(<a id="id-refresh" href="#">refresh</a>)</span>
		<div style="padding: 18px">
			<table id="id-table" class="table table-striped dt-responsive">
				<thead>
					<tr>
						<th>Name</th>
						<th width="15%">Type</th>
						<th width="20%">Configuration</th>
						<th width="35%">Last Fetch Status</th>
						<th width="10%">Actions</th>
					</tr>
				</thead>
				<tbody id="id-tbody">
				</tbody>
			</table>
		</div>
	</div>

{{template "footer-pre.tpl" .}}
		<script type="text/javascript">var services={{.services}};</script>
		<script src="/js/manage-services-min.js" type="text/javascript"></script>
{{template "footer-post.tpl" .}}