doctype 5
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=Titillium+Web: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
		#comparison(ng-controller="comparisonController", class="cols-{{columns}}")
			.pure-g-r(ng-repeat="verse in verses")
				.version(ng-repeat="version in verse")
					.version-outer
						.version-inner
							.section {{ version.section }}
							.text(ng-bind-html-unsafe="version.text")

		//// debugging cascade
		//hr
		//- var columnlist = []
		//- for (var i = 1; i <= 6; i++)
		//	- columnlist.push(i)
		//for columns in columnlist
		//	.pure-g-r(class="cols-#{columns}")
		//		- var cols = new Array(columns)
		//		for c in cols
		//			.version
		//				.version-outer
		//					.version-inner
		//						.section= columns
		//						.text= columns