<link href="templates/delivery/style.css" rel="stylesheet">
<div class="content" ng-init="rowsCount = 10">
	<div class="content image" ng-if="!fullscreenImage" ng-style="{'background-image': 'url(' + backgroundImage + ')'}">
		<div class="orders">
			<div class="order" ng-repeat="order in orders | limitToRange: rowsCount + 1 track by $index" ng-class="{completed: order.completed, hidden: !order}">
				<div class="order-prop order-guestphone" ng-if="order">{{order.guestPhone}}</div>
				<div class="order-prop order-guestname" ng-if="order">{{order.guestName}}</div>
				<div class="order-prop order-status" ng-if="order">
					<div ng-if="order.completed && completeStatusImage" class="image" ng-style="{'background-image': 'url(' + completeStatusImage + ')'}"></div>
					<span ng-if="!order.completed || !completeStatusImage">{{order.status}}</span>
				</div>
				<div class="order-prop hidden" ng-if="!order">.</div>
			</div>
		</div>
		<div class="orders orders-right" ng-if="orders.length > rowsCount">
			<div class="order" ng-repeat="order in orders | limitToRange: rowsCount + 1 : rowsCount track by $index" ng-class="{completed: order.completed, hidden: !order}">
				<div class="order-prop order-guestphone" ng-if="order">{{order.guestPhone}}</div>
				<div class="order-prop order-guestname" ng-if="order">{{order.guestName}}</div>
				<div class="order-prop order-status" ng-if="order">
					<div ng-if="order.completed && completeStatusImage" class="image" ng-style="{'background-image': 'url(' + completeStatusImage + ')'}"></div>
					<span ng-if="!order.completed || !completeStatusImage">{{order.status}}</span>
				</div>
				<div class="order-prop hidden" ng-if="!order">.</div>
			</div>
		</div>
		<div class="orders inline" ng-if="orders.length <= rowsCount">
			<div class="image" ng-if="!isVideo(image)" ng-style="{'background-image': 'url(' + image + ')'}"></div>
			<video class="video" ng-if="isVideo(image)">
				<source src="{{image}}" type="video/mp4" ng-if="isVideo(image)">
				Your browser does not support the video tag.
			</video>
		</div>
	</div>
	<div class="popup-container" ng-show="visibleSplashOrder">
		<div class="popup-wrapper">
			<div class="popup">
				<div class="guest-phone">{{splashOrder.guestPhone}}</div>
				<div class="guest-name">{{splashOrder.guestName}}</div>
			</div>
		</div>
	</div>
	<div class="image" ng-if="fullscreenImage && !isVideo(fullscreenImage)" ng-style="{'background-image': 'url(' + fullscreenImage + ')'}"></div>
	<video class="video" ng-if="fullscreenImage && isVideo(fullscreenImage)">
		<source src="{{fullscreenImage}}" type="video/mp4" ng-if="fullscreenImage && isVideo(fullscreenImage)">
		Your browser does not support the video tag.
	</video>
	<div class="title-bar" ng-click="showOrder()" ng-style="{'height': (100 / (rowsCount + 1)) +'%'}">
		<div class="logo" ng-style="{'background-image': 'url(' + logoImage + ')'}"></div>
		<div class="time">{{time | date: 'HH:mm'}}</div>
	</div>
</div>
