@Init{
	$this->RegisterCSSFile("gallery.css");
	$this->RegisterJSFile("controllers/gallery.js");
}@
@Title{Gallery}@
@Body{
<div id="album-viewer" ng-controller="gallery">
	<div id="album-description">
		<div class="expander" ng-click="showDescription=!showDescription" ng-class="{expanded: showDescription}">Album Description</div>
		<div class="text" ng-show="showDescription">
			<?=PostFormatter::FormatToHTML($album->AlbumDescription)?>
		</div>
	</div>
	<div id="album-thumbnails">
		<?php foreach ($album->Images as $index=>$image){ ?>
			<img ng-click="imageToShow=<?=$index?>" src="/<?=$image->ThumbnailPath?>" ng-class="{selected:imageToShow==<?=$index?>}" />
		<?php } ?>
	</div>
	<div id="album-images">
		<?php foreach ($album->Images as $index=>$image){ ?>
			<div class="image" ng-if="<?=$index?>===imageToShow">
				<p class="title"><?=$image->ImageTitle?></p>
				<img src="/<?=$image->Path?>" />
			</div>
		<?php } ?>
	</div>
	<scope-init value="images"><?=json_encode($album->Images) ?></scope-init>
	<div id="nextButton" ng-click="showNextImage()"></div>
	<div id="prevButton" ng-click="showPreviousImage()"></div>
</div>
}@
@ButtonsLeft{
	<button title="Previous Image" onclick="$('#prevButton').click()">
		<img src="/images/previous.svg" alt="Previous" />
	</button>
}@
@ButtonsRight{
	<button title="Next Image" onclick="$('#nextButton').click()">
		<img src="/images/next.svg" alt="Next" />
	</button>
}@