{{ define "title" }}{{ .Collection.Name }} — Facette{{ end }}

{{ define "head" }}
		<link rel="search" href="{{ .URLPrefix }}/browse/opensearch.xml" title="Add {{ .Request.Host }} search" type="application/opensearchdescription+xml">
		<script src="{{ .URLPrefix }}{{ asset "/static/jquery.js" }}"></script>
		<script src="{{ .URLPrefix }}{{ asset "/static/jquery.datepicker.js" }}"></script>
		<script src="{{ .URLPrefix }}{{ asset "/static/i18next.js" }}"></script>
		<script src="{{ .URLPrefix }}{{ asset "/static/highcharts.js" }}"></script>
		<script src="{{ .URLPrefix }}{{ asset "/static/highcharts.exporting.js" }}"></script>
		<script src="{{ .URLPrefix }}{{ asset "/static/rgbcolor.js" }}"></script>
		<script src="{{ .URLPrefix }}{{ asset "/static/canvg.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" }}{{ $prefix := .URLPrefix }}{{ $q := .Request.FormValue "q" }}
		<nav>
			<dl class="graphlist">
				<dt>Graphs</dt>{{ if .Collection.Entries }}{{ if ne $q "" }}
				<dd><a href="{{ .URLPrefix }}{{ .Request.URL.Path }}"><span class="icon icon-remove"></span> Remove Filter</a></dd>{{ else }}
				<dd><a href="{{ .URLPrefix }}/browse/"><span class="icon icon-arrow-left"></span> Back to Collections</a></dd>{{ end }}{{ range $index, $entry := .Collection.Entries }}
				<dd><a href="#graph-{{ $index }}" title="{{ $entry.Options.title }}">{{ $entry.Options.title }}</a></dd>{{ end }}{{ else }}
				<dd><a href="{{ .URLPrefix }}/browse/"><span class="icon icon-arrow-left"></span> Back to Collections</a></dd>
				<dd class="placeholder icon icon-info">No graph</dd>{{ end }}
			</dl>
		</nav>

		<article data-pane="collection-show" data-paneopts="id: {{ .Collection.ID }}">
			<header>
				<h1>{{ .Collection.Name }}</h1>

				<nav>
					<ul>{{ if not .ReadOnly }}
						<li><a class="icon icon-edit" href="#edit-collection" title="Edit Collection"></a></li>{{ end }}
						<li>
							<a class="icon icon-time" href="#set-global-range" title="Set Time Range"></a>
							<div class="menu">
								<div class="menucntr">
									<div class="menuitem"><a href="#range-1h">1h</a></div>
									<div class="menuitem"><a href="#range-3h">3h</a></div>
									<div class="menuitem"><a href="#range-1d">1d</a></div>
									<div class="menuitem"><a href="#range-7d">7d</a></div>
									<div class="menuitem"><a href="#range-1mo">1mo</a></div>
									<div class="menuitem"><a href="#range-1y">1y</a></div>
									<div class="menuitem"><a href="#range-custom">Custom…</a></div>
								</div>
							</div>
						</li>
						<li><a class="icon icon-refresh" href="#set-global-refresh" title="Set Refresh Interval"></a></li>
						<li><a class="icon icon-print" href="#print" title="Print Page"></a></li>
					</ul>
				</nav>

				<form action="{{ .URLPrefix }}{{ .Request.URL.Path }}" method="get">
					<div class="filter icon icon-search">
						<input name="q" placeholder="Search for Graph" type="text" value="{{ $q }}">
					</div>
				</form>

				<div class="right">
					<a class="icon icon-toggle-off" href="#toggle-legends"> Toggle Legends</a>
				</div>
			</header>

			<section class="scrollarea full">{{ if .Collection.Entries }}{{ template "template_graph" }}{{ range $index, $value := .Collection.Entries }}
				<div data-graph="{{ $value.ID }}" data-graphopts="{{ dump $value.Options }}" id="graph-{{ $index }}"></div>{{ end }}{{ else if .Collection.Children }}
				<h1>Sub-Collections</h1>
				<ul>{{ range $index, $value := .Collection.Children }}
					<li><a href="{{ $prefix }}/browse/collections/{{ $value.ID }}">{{ $value.Name }}</a></li>{{ end }}
				</ul>{{ else if eq $q "" }}
				<div class="mesgitem info">The collection is empty</div>{{ else }}
				<div class="mesgitem warning">Your search doesn’t match any graph <a href="{{ .Request.URL.Path }}">Reset</a></div>{{ end }}
			</section>
		</article>
{{ end }}
