<?php
namespace JetApplicationModule\Web\Images;

use Jet\UI;
use Jet\MVC_Layout;
use Jet\MVC_View;
use Jet\UI_icon;
use JetApplication\Content_Gallery;
use JetApplication\Content_Gallery_Image;

/**
 * @var MVC_View $this
 * @var Content_Gallery $gallery
 */

$gallery = $this->getRaw( 'gallery' );

MVC_Layout::getCurrentLayout()->requireCssFile( 'https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.9.0/css/lightbox.css' );
MVC_Layout::getCurrentLayout()->requireJavascriptFile( 'https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.9.0/js/lightbox.js' );
?>

<div class="row">
	<?php foreach( $gallery->getChildren() as $gallery ): ?>
		<a href="<?= $gallery->getLocalized()->getURL() ?>" class="img-thumbnail"
		   style="width: 120px;height: 120px;text-align: center;overflow: hidden;margin: 3px;border:none;">
			<?= UI::icon( 'folder' )->setSize( UI_icon::SIZE_ULTRA_LARGE ) ?>
			<br/>
			<?= $gallery->getTitle(); ?>
		</a>
	<?php endforeach; ?>
</div>

<div class="row">
	<?php foreach( $gallery->getImages() as $image ):
		/**
		 * @var Content_Gallery_Image $image
		 */
		?>
		<div style="float:left;margin: 10px;overflow: hidden;">
			<div class="thumbnail" style="height: 155px;width: 200px;padding:10px;overflow: hidden">
				<a href="<?= $image->getURI(); ?>" data-lightbox="example-set">
					<div style="width:180px;height:135px;background-position:center;background-repeat:no-repeat;background-image: url('<?= $image->getThumbnail( 180, 135 ); ?>');"></div>
				</a>
			</div>
		</div>
	<?php endforeach; ?>
</div>