<link rel='stylesheet' href='static/css/presenter.css'>

<div ng-controller='PresentationCtrl'>
	<!-- Fullscreen: {{fullscreen}}<br> -->
	<!-- <div id='presentation-preview' ng-class="{'fullscreen-presentation': fullscreen}"> -->
	<!-- 	<iframe src='/projector'></iframe> -->
	<!-- 	<div id='iframe-overlay'></div> -->
	<!-- </div> -->

	<div ng-if="mode === 'pdf'">
		Press 'down', 'right', 'n', 'enter', 'page down' or 'spacebar' for next slide<br>
		Press 'left', 'top', 'p' or 'page up' for previous slide<br>
		Press 'f5' to enter fullscreen, then press 'escape' to exit again.<br>
		Open the 'projector' preview on the side to see the current projector view.<br>

		<h2>Live projector</h2>
		<div class="preview-selector" ng-show="projectors.length > 1" uib-dropdown>
			<button class="btn btn-default btn-sm dropdown-toggle" id="menuProjector" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
				{{ controlledProjector.name | translate }}
				<span class="caret"></span>
			</button>
			<ul class="dropdown-menu dropdown-entries" aria-labelledby="menuProjector">
				<li ng-repeat="projector in projectors | orderBy:'id'">
					<a href ng-class="{'projected': projector.id === controlledProjector.id}"
			 ng-click="setControlledProjector(projector)">
						<i ng-show="projector === active_projector" class="fa fa-check"></i>
						{{ projector.name | translate }}
						<i ng-show="projector.id == broadcast" class="fa fa-star-o spacer-left"></i>
					</a>
				</li>
			</ul>
		</div>

		<iframe ng-if="controlledProjector" id="presenter-iframe" width="{{iframeWidth + 'px'}}" height="{{iframeHeight + 'px'}}" src="{{ '/real-projector/' + controlledProjector.id + '/'}}" frameborder="0"></iframe>
	</div>

	<div ng-if="mode === 'none'">
		No controllable mediafile currently presented.
	</div>
</div>
