doctype html
html(ng-app="sideBySide" ng-controller="AppController")
	head
		base(href="#{base}")
		title(ng-bind="title()") Side By Side viewer
		meta(charset="utf-8")
		meta(name="description", content="{{ description() }}")
		if html5Mode == true
			script.
				html5Mode=true;
		else
			script.
				html5Mode=false;
		if min == true
			link(rel="stylesheet", type="text/css", href="styles/all_min.css")
			script(src="scripts/all_min.js")
		else
			for style in styles
				link(rel="stylesheet", type="text/css", href="#{style}")
			for script in scripts
				script(src="#{script}")

	body
		noscript Well, terribly sorry, but you do need to have Javascript enabled for this to work.

		// top menu
		.pure-menu.pure-menu-open.pure-menu-horizontal.menu-main
			ul
				li(ng-repeat="link in links")
					a(href="" ng-click="display(link.display)" ng-bind-html="link.text")
				li
					a(href="" ng-click="flipPick()")
						svg.icon
							use(xlink:href="/fonts/icons.svg#icon-menu")
						span Compare translations
				li
					a(href="" ng-click="showPage('about')")
						svg.icon
							use(xlink:href="/fonts/icons.svg#icon-star")
						span About
				li
					a(href="content/tao") Tao
				li
					a(href="content/enchiridion") Enchiridion
				li
					a(href="content/meditations-book-2") Meditations book 2

		div(ng-controller="ComparisonController" class="cols-{{columns}}")
			include includes/comparison.html.jade