@Init{
	$this->RegisterCSSFile("gallery.css");
	$this->RegisterJSFile("controllers/galleryUpload.js");
	$this->RegisterJSFile("directives/dragDrop.js");
	$this->RegisterJSFile("directives/contextMenu.js");
}@
@Title{Gallery}@
@ButtonsRight{
	<?php if (Session::GetLoggedInUser()->HasAccess("gallery/manage")){?>
		<button onclick="Navigate('/gallery/manage/')" title="Manage">
			<img src="/images/gallery.svg" alt="Manage" />
		</button>
	<?php } ?>
}@
@Body{
<div ng-controller="galleryUpload" id="galleryUpload">
	<div drag-drop="fileDrop" class="dragDrop" ng-class="{dragOver:images.length===0}">
		<context-menu actions="contextMenuActions"></context-menu>
		<div ng-repeat="image in images" class="newImage">
			<table class="information">
				<tr>
					<td>File name:</td>
					<td>{{image.file.name}}</td>
				</tr>
				<tr>
					<td><label for="imageTitle">Image title:</label></td>
					<td><input type="text" name="imageTitle" ng-model="image.title" /></td>
				</tr>
				<tr>
					<td><label for="imageDesc">Image description</label></td>
					<td><textarea name="imageDesc" ng-model="image.description"></textarea></td>
				</tr>
			</table>
			<div class="preview">
				<div class="imageContainer">
					<img ng-src="{{image.preview}}" />
				</div>
			</div>
		</div>
	</div>
	<div class="percentageBar"><div style="width:{{(getTotalImageSize() / safeUploadSize()) * 100}}%"></div></div>
	<button class="upload" ng-if="images.length>0" ng-click="upload()">Upload</button>
	<scope-init value="maxUploadSize"><?=$maxUploadSize?></scope-init>
</div>
}@