<!DOCTYPE html>
<html>
<head>
	<title>Terracotta Preview</title>

	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">

	<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
	<link rel="stylesheet" href="{{ url_for('static', filename='leaflet.css') }}"/>
	<link rel="stylesheet" href="{{ url_for('static', filename='nouislider.min.css') }}"/>
	<link rel="stylesheet" href="{{ url_for('static', filename='main.css') }}"/>
	<script src="{{ url_for('static', filename='leaflet.js') }}"></script>
	<script src="{{ url_for('static', filename='nouislider.min.js') }}"></script>
	<script src="{{ url_for('static', filename='main.js') }}"></script>
</head>
<body>

<div id="controls">
	<img src="{{ url_for('static', filename='images/header.svg') }}" class="header">

	<div class="el-wrapper">
		<div id="details__container" class="clickable" onclick="toggleDetails();">
			<h2 class="info-title">Details</h2>
			<span class="info-toggle no-select">i</span>
		</div>
		<div id="details__content">
			<p class="clear" id="info-text">
				This applet lets you explore the data on any running Terracotta server.
				Just search for a dataset to get started!
			</p>
		</div>
		<p id="details__host--title"><b>host: </b> <span id="details__host--url">{{ hostname }}</span></p>
	</div>

	<div class="el-wrapper">
		<h2>Available keys</h2>
		<ul id="key-list">
		</ul>
	</div>

	<div class="el-wrapper">
		<h2 class="info-title">Search for datasets</h2>
		<div id="search-fields"></div>
		<div id="thumbnail-holder"></div>
			<table class="scrolling-list" id="search-results">
			</table>
			<div id="search-result-controls">
				<button id="prev-page" onclick="incrementResultsPage(-1);" disabled>&lt;</button>
				Page <span id="page-counter">1</span>
				<button id="next-page" onclick="incrementResultsPage(1);">&gt;</button>
		</div>
	</div>

		<div id="colormap-wrapper">
			<h3>Choose a colormap</h3>
			<select id="colormap-selector" onchange="updateColormap();">
			</select>
		</div>	

		<div id="contrast-wrapper">
			<h3>Adjust contrast</h3>
			<div class="singleband-slider" id="singlebandSlider"></div>
			<input type="text" id="singleband-value-lower" disabled="true">
			<input type="text" class="input__text--upper" id="singleband-value-upper" disabled="true">
		</div>

	<div id="rgb" class="el-wrapper">
		<h2 class="clickable" onclick="rgbSelectorChanged()"> Show RGB image</h2>
		<div id="rgb-search-fields">
		</div>
		<div id="rgb-selectors">
			<div class="horizontal-list">
				<span class="rgb-label">R</span>
				<select class="rgb-selector" id="R" onchange="rgbSelectorChanged()" disabled></select>
				<input type="text" class="rgb-value-lower" id="R"  disabled="true">
				<div class="rgb-slider" id="R"></div>
				<input type="text" class="rgb-value-upper input__text--upper" id="R" disabled="true">
			</div>
			<div class="horizontal-list">
				<span class="rgb-label">G</span>
				<select class="rgb-selector" id="G" onchange="rgbSelectorChanged()" disabled></select>
				<input type="text" class="rgb-value-lower" id="G" disabled="true">
				<div class="rgb-slider" id="G"></div>
				<input type="text" class="rgb-value-upper input__text--upper" id="G" disabled="true">
			</div>
			<div class="horizontal-list">
				<span class="rgb-label">B</span>
				<select class="rgb-selector" id="B" onchange="rgbSelectorChanged()" disabled></select>
				<input type="text" class="rgb-value-lower" id="B" disabled="true">
				<div class="rgb-slider" id="B"></div>
				<input type="text" class="rgb-value-upper input__text--upper" id="B" disabled="true">
			</div>
		</div>
	</div>

	<div id="loader__container">
		<div id="loader__spinner--control" class="loader__spinner"></div>
	</div>

</div>

<div id="resizable__buffer"></div>

<div id="map">
</div>

<div id="layerInfo__container">
	<div id="layerInfo__container--title" onclick="toggleLayerInfo()">
		<h3 id="layerInfo__toggle--title" class="no-select">Layer info</h3>
		<p id="layerInfo__toggle--icon"  class="no-select">×</p>
	</div>
	<div id="layerInfo__container--content">
		<p id="layerInfo__URL">current layer: </p>
		<p id="layerInfo__metadata">
	</div>

</div>
<aside class="error-container">
	<ul id="errors"></ul>
</aside>



<script type="text/javascript">
	window.onload = initializeApp.bind(null, '{{ hostname }}');
</script>

</body>
</html>
