doctype html
html(ng-app="sideBySide")
	head
		title Side By Side viewer
		meta(charset="utf-8")
		link(rel="stylesheet", type="text/css", href="//fonts.googleapis.com/css?family=Noticia+Text:400,700,400italic,700italic")
		link(rel="stylesheet", type="text/css", href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/3.0.2/css/font-awesome.min.css")
		link(rel="stylesheet", type="text/css", href="//yui.yahooapis.com/pure/0.2.0/pure-min.css")
		link(rel="stylesheet", type="text/css", href="styles/style.css")
		include _scripts.html.jade

	body(ng-controller="comparisonController", class="cols-{{columns}}")
		noscript Well, terribly sorry but you do need to have Javascript enabled.

		// top menu
		.pure-menu.pure-menu-open.pure-menu-horizontal.menu-main
			ul
				li
					a(href="#") Home
				li
					a(href="#") Pick
				li
					a(href="#") Help
				li
					a(href="#") About

		// bottom menu
		.pure-menu.pure-menu-open.pure-menu-horizontal.menu-verses
			.pure-g-r
				.version(ng-repeat="heading in headings")
					.version-padded
						.version-menu
							.text(ng-bind-html="heading")

		// verses
		#content
			.pure-g-r(ng-repeat="verse in verses")
				.version(ng-repeat="version in verse")
					.version-padded
						.version-container
							.section(ng-hide="version.section == ''" ng-bind-html="version.section")
							.text(ng-bind-html="version.text")