<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>${headers['title']} ${headers['version']} - ${headers['subtitle']}</title>
		<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
		<link href="${base}css/page.css?${version}" rel="stylesheet" />
	</head>
	<body>
		<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu">
					<span class="sr-only">Toggle navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="${base}index.html">${headers['title']} <small>${headers['subtitle']}</small></a>
			</div>
			<!-- /.navbar-header -->

			<!-- Collect the nav links, forms, and other content for toggling -->
			<div class="collapse navbar-collapse" id="menu">
				<ul class="nav navbar-nav">
					<li><a href="http://www.haproxy.org/">HAProxy home page</a></li>
					<li class="dropdown">
						<a href="#" class="dropdown-toggle" data-toggle="dropdown">Versions <b class="caret"></b></a>
						<ul class="dropdown-menu">
							## TODO : provide a structure to dynamically generate per version links
							<li class="dropdown-header">HAProxy 1.4</li>
							<li><a href="${base}configuration-1.4.html">Configuration Manual <small>(stable)</small></a></li>
							<li><a href="${base}snapshot/configuration-1.4.html">Configuration Manual <small>(snapshot)</small></a></li>
							<li><a href="http://git.1wt.eu/git/haproxy-1.4.git/">GIT Repository</a></li>
							<li><a href="http://www.haproxy.org/git/?p=haproxy-1.4.git">Browse repository</a></li>
							<li><a href="http://www.haproxy.org/download/1.4/">Browse directory</a></li>
							<li class="divider"></li>
							<li class="dropdown-header">HAProxy 1.5</li>
							<li><a href="${base}configuration-1.5.html">Configuration Manual <small>(stable)</small></a></li>
							<li><a href="${base}snapshot/configuration-1.5.html">Configuration Manual <small>(snapshot)</small></a></li>
							<li><a href="http://git.1wt.eu/git/haproxy-1.5.git/">GIT Repository</a></li>
							<li><a href="http://www.haproxy.org/git/?p=haproxy-1.5.git">Browse repository</a></li>
							<li><a href="http://www.haproxy.org/download/1.5/">Browse directory</a></li>
                            <li class="divider"></li>
                            <li class="dropdown-header">HAProxy 1.6</li>
                            <li><a href="${base}configuration-1.6.html">Configuration Manual <small>(stable)</small></a></li>
                            <li><a href="${base}snapshot/configuration-1.6.html">Configuration Manual <small>(snapshot)</small></a></li>
                            <li><a href="${base}intro-1.6.html">Starter Guide <small>(stable)</small></a></li>
                            <li><a href="${base}snapshot/intro-1.6.html">Starter Guide <small>(snapshot)</small></a></li>
                            <li><a href="http://git.1wt.eu/git/haproxy.git/">GIT Repository</a></li>
                            <li><a href="http://www.haproxy.org/git/?p=haproxy.git">Browse repository</a></li>
                            <li><a href="http://www.haproxy.org/download/1.6/">Browse directory</a></li>
						</ul>
					</li>
				</ul>
			</div>
		</nav>
		<!-- /.navbar-static-side -->

		<div id="wrapper">

			<div id="sidebar">
				<form onsubmit="search(this.keyword.value); return false" role="form">
					<div id="searchKeyword" class="form-group">
						<input type="text" class="form-control typeahead" id="keyword" name="keyword" placeholder="Search..." autocomplete="off">
					</div>
				</form>
				<p>
					Keyboard navigation&nbsp;: <span id="keyboardNavStatus"></span>
				</p>
				<p>
					When enabled, you can use <strong>left</strong> and <strong>right</strong> arrow keys to navigate between chapters.<br>
					The feature is automatically disabled when the search field is focused.
				</p>
				<p class="text-right">
					<small>Converted with <a href="https://github.com/cbonte/haproxy-dconv">haproxy-dconv</a> v<b>${version}</b> on <b>${date}</b></small>
				</p>
			</div>
			<!-- /.sidebar -->

			<div id="page-wrapper">
				<div class="row">
					<div class="col-lg-12">
						<div class="text-center">
							<h1>${headers['title']}</h1>
							<h2>${headers['subtitle']}</h2>
							<p><strong>${headers['version']}</strong></p>
							<p>
								<a href="http://www.haproxy.org/" title="HAProxy Home Page"><img src="${base}img/logo-med.png" /></a><br>
								${headers['author']}<br>
								${headers['date']}
							</p>
						</div>

						${document}
						<br>
						<hr>
						<div class="text-right">
							${headers['title']} ${headers['version'].replace("version ", "")} &ndash; ${headers['subtitle']}<br>
							<small>${headers['date']}, ${headers['author']}</small>
						</div>
					</div>
					<!-- /.col-lg-12 -->
				</div>
				<!-- /.row -->
				<div style="position: fixed; z-index: 1000; bottom: 0; left: 0; right: 0; padding: 10px">
					<ul class="pager" style="margin: 0">
						<li class="previous"><a id="previous" href="#"></a></li>
						<li class="next"><a id="next" href="#"></a></li>
					</ul>
				</div>
			</div>
			<!-- /#page-wrapper -->

		</div>
		<!-- /#wrapper -->

		<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
		<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js"></script>
		<script src="//cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js"></script>
		<script>
			/* Keyword search */
			var searchFocus = false
			var keywords = [
				"${'",\n\t\t\t\t"'.join(keywords)}"
			]

			function updateKeyboardNavStatus() {
				var status = searchFocus ? '<span class="label label-disabled">Disabled</span>' : '<span class="label label-success">Enabled</span>'
				$('#keyboardNavStatus').html(status)
			}

			function search(keyword) {
				if (keyword && !!~$.inArray(keyword, keywords)) {
					window.location.hash = keyword
				}
			}
			// constructs the suggestion engine
			var kwbh = new Bloodhound({
				datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
				queryTokenizer: Bloodhound.tokenizers.whitespace,
				local: $.map(keywords, function(keyword) { return { value: keyword }; })
			});
			kwbh.initialize()

			$('#searchKeyword .typeahead').typeahead({
				hint: true,
				highlight: true,
				minLength: 1,
				autoselect: true
			},
			{
				name: 'keywords',
				displayKey: 'value',
				limit: keywords.length,
				source: kwbh.ttAdapter()
			}).focus(function() {
				searchFocus = true
				updateKeyboardNavStatus()
			}).blur(function() {
				searchFocus = false
				updateKeyboardNavStatus()
			}).bind('typeahead:selected', function ($e, datum) {
				search(datum.value)
			})

			/* EXPERIMENTAL - Previous/Next navigation */
			var headings = $(":header")
			var previousTarget = false
			var nextTarget = false
			var $previous = $('#previous')
			var $next = $('#next')
			function refreshNavigation() {
				var previous = false
				var next = false
				$.each(headings, function(item, value) {
					var el = $(value)

					// TODO : avoid target recalculation on each refresh
					var target = el.attr('data-target')
					if (! target) return true

					var target_el = $('#' + target.replace(/\./, "\\."))
					if (! target_el.attr('id')) return true

					if (target_el.offset().top < $(window).scrollTop()) {
						previous = el
					}
					if (target_el.offset().top - 1 > $(window).scrollTop()) {
						next = el
					}
					if (next) return false
				})

				previousTarget = previous ? previous.attr('data-target') : 'top'
				$previous.html(
					previous && previousTarget ?
						'<span class="glyphicon glyphicon-arrow-left"></span> ' + previous.text() :
						'<span class="glyphicon glyphicon-arrow-up"></span> Top'
				).attr('href', '#' + previousTarget)

				nextTarget = next ? next.attr('data-target') : 'bottom'
				$next.html(
					next && nextTarget ?
						next.text() + ' <span class="glyphicon glyphicon-arrow-right"></span>' :
						'Bottom <span class="glyphicon glyphicon-arrow-down"></span>'
				).attr('href', '#' + nextTarget)
			}

			$(window).scroll(function () {
				refreshNavigation()
			});
			$(document).ready(function() {
				refreshNavigation()
				updateKeyboardNavStatus()
			});

			/* EXPERIMENTAL - Enable keyboard navigation */
			$(document).keydown(function(e){
				if (searchFocus) return

				switch(e.which) {
					case 37: // left
					window.location.hash = previousTarget ? previousTarget : 'top'
					break

					case 39: // right
					window.location.hash = nextTarget ? nextTarget : 'bottom'
					break

					default: return // exit this handler for other keys
				}
				e.preventDefault()
			})
		</script>
		${footer}
		<a class="anchor" name="bottom"></a>
	</body>
</html>
