.pure-menu.pure-menu-open.pure-menu-horizontal.menu-verses(ng-click="flipPick()")
	.pure-g-r
		.version(ng-repeat="heading in headings")
			.version-padded
				.version-menu
					svg.icon.arrow(ng-show="!pick")
						use(xlink:href="/fonts/icons.svg#icon-expand-less")
					svg.icon.arrow(ng-show="pick")
						use(xlink:href="/fonts/icons.svg#icon-expand-more")
					.text(ng-bind-html="heading")

.pick(ng-show="pick")
	.pick-in
		div#too-few(ng-hide="! tooFew") There is no escape.
		div#too-many(ng-hide="! tooMany") You can only compare five translations at the moment. Choose wisely.
		table
			tr
				th(ng-repeat="attribute in metaKeys" ng-bind-html="attribute")
			tr(ng-repeat="poem in all" class="switch" ng-class="{disabled: !poem.meta.Active}" ng-click="switchActive(poem)")
				td(ng-repeat="attribute in metaKeys" ng-bind-html="poem.meta[attribute]")

// verses
#content
	.pure-g-r(du-scrollspy ng-href="#section-meta" id="section-meta")
		.version(ng-repeat="poemmeta in meta")
			.version-padded
				.version-container.version-container-top
					p
						table
							tr(ng-repeat="key in metaKeys")
								td(ng-bind-html="key" class="key")
								td(ng-bind-html="poemmeta[key]")

	.pure-g-r(du-scrollspy ng-href="#section-{{$index + 1}}" offset="100px" ng-repeat="verse in verses" id="section-{{$index + 1}}")
		.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")