{{ define "title" }}Administration Panel: Graphs — Facette{{ end }}

{{ define "head" }}
		<script src="{{ .URLPrefix }}{{ asset "/static/jquery.js" }}"></script>
		<script src="{{ .URLPrefix }}{{ asset "/static/i18next.js" }}"></script>
		<script src="{{ .URLPrefix }}{{ asset "/static/highcharts.js" }}"></script>
		<script src="{{ .URLPrefix }}{{ asset "/static/moment.js" }}"></script>
		<script src="{{ .URLPrefix }}{{ asset "/static/sprintf.js" }}"></script>
		<script src="{{ .URLPrefix }}{{ asset "/static/facette.js" }}"></script>
{{ end }}

{{ define "content" }}
		<article data-pane="graph-edit" data-paneopts="section: {{ .Section }}{{ if ne .Path "add" }}; id: {{ .Path }}{{ end }}">
			<header>
				<h1>Administration Panel — {{ if eq .Path "add" }}New{{ else }}Edit{{ end }} Graph</h1>
			</header>

			<footer>
				<button class="icon icon-auto" name="auto-name">Auto-Name Series</button>
				<button class="danger" name="step-cancel">Cancel</button>
				<button class="icon icon-prev" name="step-prev">Previous</button>
				<button class="icon icon-next" name="step-next">Next</button>
				<button name="step-ok">OK</button>
				<button name="step-save">
					<span class="default">Save Graph</span>
					<span class="template">Save Template</span>
				</button>
			</footer>

			<section data-step="1">
				<div class="list" data-list="step-1-metrics" data-listopts="messages: metric">
					<h1>Metrics List <span class="count"></span></h1>

					<fieldset>
						<label for="origin">Origin</label>
						<input data-input="origin" data-inputopts="sources: catalog/origins/; ignorepattern: {{ "{{" }}" id="origin" name="origin" type="text">

						<label for="source">Source</label>
						<input data-input="source" data-inputopts="sources: library/sourcegroups/, catalog/sources/; ignorepattern: {{ "{{" }}" id="source" name="source" type="text">

						<label for="metric">Metric</label>
						<input data-input="metric" data-inputopts="sources: library/metricgroups/, catalog/metrics/; ignorepattern: {{ "{{" }}" id="metric" name="metric" type="text">

						<button name="metric-add">Add</button>
						<button name="metric-update">Update</button>
						<button name="metric-cancel">Cancel</button>
					</fieldset>

					<div class="scrollarea">
						<div class="listmesg" data-listmesg="step-1-metrics"></div>

						<div class="listitem" data-listtmpl="step-1-metrics">
							<div class="actions">
								<a class="icon icon-remove" href="#remove-metric" title="Remove Metric"></a>
							</div>
							<dl>
								<dt class="name"></dt>
								<dd class="desc">
									origin: <span class="origin"></span>,
									source: <span class="source"></span>,
									metric: <span class="metric"></span>
								</dd>
							</dl>
						</div>
					</div>
				</div>
			</section>

			<section class="dragarea" data-step="2">
				<div class="list column" data-list="step-2-series">
					<h1>Series</h1>

					<div class="buttons">
						<a class="icon icon-plus" href="#add-average">Add Average</a>
						<a class="icon icon-plus" href="#add-sum">Add Sum</a>
						<a class="icon icon-plus" href="#add-normalize">Add Normalize</a>
					</div>

					<div class="scrollarea">
						<div class="listmesg" data-listmesg="step-2-series"></div>

						<div class="listitem" data-listtmpl="step-2-series" draggable="true">
							<div class="actions">
								<a class="icon icon-up" href="#move-up" title="Move Up"></a>
								<a class="icon icon-down" href="#move-down" title="Move Down"></a>
								<a class="icon icon-collapse" href="#collapse-series" title="Collapse Series"></a>
								<a class="icon icon-expand" href="#expand-series" title="Expand Series"></a>
							</div>
							<dl>
								<dt>
									<a class="color auto" href="#set-color" title="Set Color"></a>
									<span class="name"></span>
									<span class="actions visible">
										<a class="icon icon-edit" href="#rename-series" title="Rename Series"></a>
										<a class="icon icon-unit" href="#set-unit" title="Set Unit"></a>
										<a class="icon icon-scale" href="#set-scale" title="Set Scale"></a>
										<a class="icon icon-consolidate" href="#set-consolidate" title="Set Consolidation"></a>
										<a class="icon icon-format" href="#set-formatter" title="Set Formatter"></a>
									</span>
								</dt>
								<dd class="desc">
									origin: <span class="origin"></span>,
									source: <span class="source"></span>,
									metric: <span class="metric"></span>
									<span class="count"></span>
								</dd>
							</dl>
						</div>
					</div>
				</div>

				<div class="list column" data-list="step-2-groups">
					<h1>Operation Groups</h1>

					<div class="listmesg info">Tip: drop series onto the buttons on the left to quickly create new groups.</div>

					<div class="scrollarea">
						<div class="listitem groupitem" data-listtmpl="step-2-groups" data-list="">
							<div class="actions">
								<a class="icon icon-up" href="#move-up" title="Move Up"></a>
								<a class="icon icon-down" href="#move-down" title="Move Down"></a>
								<a class="icon icon-remove" href="#remove-group" title="Remove Group"></a>
							</div>
							<dl>
								<dt>
									<a class="color auto" href="#set-color" title="Set Color"></a>
									<span class="name"></span>
									<span class="type"></span>
									<span class="actions visible">
										<a class="icon icon-edit" href="#rename-group" title="Rename Group"></a>
										<a class="icon icon-unit" href="#set-unit" title="Set Unit"></a>
										<a class="icon icon-scale" href="#set-scale" title="Set Scale"></a>
										<a class="icon icon-consolidate" href="#set-consolidate" title="Set Consolidation"></a>
										<a class="icon icon-format" href="#set-formatter" title="Set Formatter"></a>
									</span>
								</dt>
								<dd class="desc groupentry" data-listtmpl="">
									origin: <span class="origin"></span>,
									source: <span class="source"></span>,
									metric: <span class="metric"></span>
									<a class="icon icon-cross" href="#remove-item"></a>
								</dd>
							</dl>
						</div>
					</div>
				</div>
			</section>

			<section data-step="3">
				<div class="column">
					<h1>Graph Definition</h1>

					<div class="scrollarea">
						<div class="block">
							<h2>General Information</h2>

							<label for="graph-name">Name:</label>
							<input class="full input" data-input="graph-name" data-inputopts="check: true" id="graph-name" name="graph-name" type="text">

							<label for="graph-desc">Description:</label>
							<textarea id="graph-desc" name="graph-desc"></textarea>
						</div>

						<div class="block">
							<h2>Graph Parameters</h2>

							<label for="graph-title">Title:</label>
							<input class="full input" data-input="graph-title" id="graph-title" name="graph-title" type="text">
							<label for="graph-type">Graph Type:</label>
							<select data-select="graph-type" id="graph-type" name="graph-type">
								<option value="{{ .GraphTypeArea }}">Area</option>
								<option value="{{ .GraphTypeLine }}">Line</option>
							</select>

							<label for="stack-mode">Stack Mode:</label>
							<select data-select="stack-mode" id="stack-mode" name="stack-mode">
								<option value="{{ .StackModeNone }}">None</option>
								<option value="{{ .StackModeNormal }}">Normal</option>
								<option value="{{ .StackModePercent }}">Percent</option>
							</select>
							<button class="icon icon-configure" name="stack-config">Configure Stacks</button>
						</div>

						<div class="block">
							<h2>Unit Parameters</h2>

							<label for="unit-legend">Legend: <span class="note">e.g. bytes/s, req/sec, %, µs</span></label>
							<input class="input" data-input="unit-legend" id="unit-legend" name="unit-legend" type="text">

							<label for="unit-type">Type: <span class="note">“fixed” indicates an absolute value, “metric” a value based on the metric system</span></label>
							<fieldset>
								<input id="unit-type-fixed" name="unit-type" type="radio" value="{{ .GraphUnitTypeFixed }}" checked="checked">
								<label for="unit-type-fixed">Fixed</label>
								<input id="unit-type-metric" name="unit-type" type="radio" value="{{ .GraphUnitTypeMetric }}">
								<label for="unit-type-metric">Metric System</label>
							</fieldset>
						</div>
					</div>
				</div>

				<div class="column">
					<h1>Graph Preview</h1>

					<div class="scrollarea">
						<div class="graphitem preview" data-graph="" data-graphopts="range: -1h">
							<div class="placeholder">Loading...</div>

							<div class="graphcntr">
							</div>
						</div>

						<div class="tmplattrs">
							<h2>Template Attributes</h2>

							<table class="list graphattrs" data-list="step-3-attrs">
								<tbody>
									<tr><td class="listmesg" data-listmesg="step-3-attrs" colspan="2"></td></tr>
									<tr class="listitem" data-listtmpl="step-3-attrs">
										<td class="key"><input type="text" disabled="disabled"></td>
										<td class="value"><input type="text"></td>
									</tr>
								</tbody>
							</table>

							<div class="mesgitem info">Note: set attributes values to test template rendering</div>
						</div>
					</div>
				</div>
			</section>

			<section class="dragarea" data-step="stack">
				<div class="list column" data-list="step-stack-series">
					<h1>Series</h1>

					<div class="buttons">
						<a class="icon icon-plus" href="#add-stack">Add Stack</a>
					</div>

					<div class="scrollarea">
						<div class="listmesg" data-listmesg="step-stack-series"></div>

						<div class="listitem" data-listtmpl="step-stack-series" draggable="true" data-list="">
							<dl>
								<dt><span class="name"></span> <span class="type"></span></dt>
								<dd class="desc" data-listtmpl="">
									origin: <span class="origin"></span>,
									source: <span class="source"></span>,
									metric: <span class="metric"></span>
								</dd>
							</dl>
						</div>
					</div>
				</div>

				<div class="list column" data-list="step-stack-groups">
					<h1>Stack Groups</h1>

					<div class="listmesg info">Tip: drop series onto the button on the left to quickly create a new stack.</div>

					<div class="scrollarea">
						<div class="listitem groupitem" data-listtmpl="step-stack-groups" data-list="">
							<div class="actions">
								<a class="icon icon-remove" href="#remove-group" title="Remove Group"></a>
							</div>
							<dl>
								<dt>
									<span class="name"></span>
									<span class="actions">
										<a class="icon icon-edit" href="#rename-stack" title="Rename Stack"></a>
									</span>
								</dt>
								<dd class="desc groupentry" data-listtmpl="">
									name: <span class="name"></span>
									<a class="icon icon-up" href="#move-up" title="Move Up"></a>
									<a class="icon icon-down" href="#move-down" title="Move Down"></a>
									<a class="icon icon-cross" href="#remove-item" title="Remove Item"></a>
								</dd>
							</dl>
						</div>
					</div>
				</div>
			</section>
		</article>
{{ end }}
