<link href="templates/columns-flex/style.css" rel="stylesheet">
<div class="content" ng-init="rowsCount = customRowsCount || 6">
	<div class="content image" ng-if="!fullscreenImage" ng-style="{'background-image': 'url(' + backgroundImage + ')'}">
		<div class="orders" ng-class="{fullscreen: orders.length - orders.lengthCompleted > 2*rowsCount || orders.lengthCompleted > 2*rowsCount}">
			<div class="column">
				<div class="header">
					<span>Готовятся</span>
				</div>
				<div class="orders-container" ng-class="{threeColumn: orders.length - orders.lengthCompleted > 2*rowsCount && orders.length - orders.lengthCompleted <= 3*rowsCount}">
					<div class="orders-body">
						<div class="order" ng-repeat="order in orders | filter: {completed: false} | limitToRange: rowsCount track by $index" ng-class="{completed: order.completed}">
							<div class="order-prop order-number" ng-if="order">{{order.number}}</div>
							<div class="order-prop order-empty" ng-if="!order">.</div>
						</div>
					</div>
				</div>
				<div class="orders-container" ng-if="orders.length - orders.lengthCompleted > rowsCount" ng-class="{secondColumn: orders.length - orders.lengthCompleted > 2*rowsCount && orders.length - orders.lengthCompleted <= 3*rowsCount}">
					<div class="orders-body">
						<div class="order" ng-repeat="order in orders | filter: {completed: false} | limitToRange: rowsCount : rowsCount track by $index" ng-class="{completed: order.completed}">
							<div class="order-prop order-number" ng-if="order">{{order.number}}</div>
							<div class="order-prop order-empty" ng-if="!order">.</div>
						</div>
					</div>
				</div>
				<div class="orders-container" ng-if="orders.length - orders.lengthCompleted > 2*rowsCount" ng-class="{threeColumn: orders.length - orders.lengthCompleted > 2*rowsCount && orders.length - orders.lengthCompleted <= 3*rowsCount}">
					<div class="orders-body">
						<div class="order" ng-repeat="order in orders | filter: {completed: false} | limitToRange: rowsCount : 2*rowsCount track by $index" ng-class="{completed: order.completed}">
							<div class="order-prop order-number" ng-if="order">{{order.number}}</div>
							<div class="order-prop order-empty" ng-if="!order">.</div>
						</div>
					</div>
				</div>
				<div class="orders-container" ng-if="orders.length - orders.lengthCompleted > 3*rowsCount">
					<div class="orders-body">
						<div class="order" ng-repeat="order in orders | filter: {completed: false} | limitToRange: rowsCount : 3*rowsCount track by $index" ng-class="{completed: order.completed}">
							<div class="order-prop order-number" ng-if="order">{{order.number}}</div>
							<div class="order-prop order-empty" ng-if="!order">.</div>
						</div>
					</div>
				</div>
			</div>
			<div class="column">
				<div class="header completed">
					<span>Готовы</span>
				</div>
				<div class="orders-container">
					<div class="orders-body" ng-class="{threeColumn: orders.lengthCompleted > 2*rowsCount && orders.lengthCompleted <= 3*rowsCount}">
						<div class="order" ng-repeat="order in orders | filter: {completed: true} | limitToRange: rowsCount track by $index" ng-class="{completed: order.completed}">
							<div class="order-prop order-number" ng-if="order">{{order.number}}</div>
							<div class="order-prop order-empty" ng-if="!order">.</div>
						</div>
					</div>
				</div>
				<div class="orders-container" ng-if="orders.lengthCompleted > rowsCount"  ng-class="{secondColumn: orders.lengthCompleted > 2*rowsCount && orders.lengthCompleted <= 3*rowsCount}">
					<div class="orders-body">
						<div class="order" ng-repeat="order in orders | filter: {completed: true} | limitToRange: rowsCount : rowsCount track by $index" ng-class="{completed: order.completed}">
							<div class="order-prop order-number" ng-if="order">{{order.number}}</div>
							<div class="order-prop order-empty" ng-if="!order">.</div>
						</div>
					</div>
				</div>
				<div class="orders-container" ng-if="orders.lengthCompleted > 2*rowsCount"  ng-class="{threeColumn: orders.lengthCompleted > 2*rowsCount && orders.lengthCompleted <= 3*rowsCount}">
					<div class="orders-body">
						<div class="order" ng-repeat="order in orders | filter: {completed: true} | limitToRange: rowsCount : 2*rowsCount track by $index" ng-class="{completed: order.completed}">
							<div class="order-prop order-number" ng-if="order">{{order.number}}</div>
							<div class="order-prop order-empty" ng-if="!order">.</div>
						</div>
					</div>
				</div>
				<div class="orders-container" ng-if="orders.lengthCompleted > 3*rowsCount">
					<div class="orders-body">
						<div class="order" ng-repeat="order in orders | filter: {completed: true} | limitToRange: rowsCount : 3*rowsCount track by $index" ng-class="{completed: order.completed}">
							<div class="order-prop order-number" ng-if="order">{{order.number}}</div>
							<div class="order-prop order-empty" ng-if="!order">.</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="orders fullheight inline" style="width: 30%;" ng-if="orders.length - orders.lengthCompleted <= 2*rowsCount && orders.lengthCompleted <= 2*rowsCount">
			<div class="image fullheight" ng-if="!isVideo(image)" ng-style="{'background-image': 'url(' + image + ')'}"></div>
			<video class="video fullheight" 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">
				{{splashOrder.number}}
			</div>
		</div>
	</div>
	<div class="image fullheight" ng-if="fullscreenImage && !isVideo(fullscreenImage)" ng-style="{'background-image': 'url(' + fullscreenImage + ')'}"></div>
	<video class="video fullheight" 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()">
		<div class="logo" ng-style="{'background-image': 'url(' + logoImage + ')'}"></div>
		<div class="time">{{time | date: 'HH:mm'}}</div>
	</div>
</div>
