<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="author" content="<% author %>" />
	<meta name="generator" content="MinigalNano <% version %>" />
	<title><% title %></title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="alternate" type="application/rss+xml" title="<% title %>" href="rss.php" />

	<link rel="stylesheet" href="<% gallery_root %>css/w3.css" type="text/css" media="screen" />
	<link rel="stylesheet" href="<% gallery_root %>css/all.min.css" type="text/css" media="screen" />
	<style type="text/css">
		/*----lazyloading---*/
		.loader {
			background: url('images/loader.gif') center center no-repeat;
		}

		.b-lazy {
			opacity: 0;
		}

		.b-lazy.b-loaded {
			opacity: 1;
		}

		html {
			scroll-behavior: smooth;
			height: 100vh;
		}

		#gallery {
			text-align: center;
			display: flex;
			flex-wrap: wrap;
		}

		#gallery div {
			flex: 1 1 200px;
			margin: 2px;
		}

		#gallery p {
			padding: 0;
			margin: 0 0 15px 0;
		}

		#gallery span {
			display: block;
		}

		.w3-modal {
			background-color: rgba(0, 0, 0, 0.7);
		}

		.kt-color {
			color: #FF0084;
			font-weight: bold;
		}

		#container {
			margin: 0 auto;
			width: 90%;
		}

		.w3-text-theme {
			color: #ff0084 !important
		}

		.w3-theme {
			color: #fff !important;
			background-color: #ff0084 !important
		}

		.w3-hover-theme:hover {
			color: #fff !important;
			background-color: #ff0084 !important
		}

		.w3-theme-d3 {
			color: #fff !important;
			background-color: #b3005c !important
		}

		.top {
			text-decoration: none;
			font-size: xx-large;
			text-align: center;
			padding: 4px 16px;
			position: fixed;
			right: 0;
			bottom: 1%;
		}

		footer {
			font-weight: bold;
			padding-top: 0.3em;
			margin: 0.3em 0px;
			text-align: center;
			font-size: .8rem;
		}


		.w3-display-middle {
			position: absolute;
			top: 10%;
			left: 50%;
			transform: translate(-50%, -10%);
			-ms-transform: translate(-50%, -50%);
		}

		#modal01 {
			margin: 0 auto;
			text-align: center;
			height: 100vh;
			width: 100vw;
			padding: .3em;
		}

		#modal01 span {
			text-align: left;
		}

		.modal-content {
			position: relative;
		}

		#modal-content-img,
		#video01 {
			position: relative;
		}

		#modal-content-img img,
		#video01 video {
			max-width: 98%;
			max-height: 72vh;
			padding: 4px;
		}

		#comment01 {
			position: relative;
			margin: 0 auto 12px;
			padding: 4px;
			box-shadow: 0px 5px rgba(89, 0, 46, 0.5);
			text-align: left;
			width: 85vw;
			font-size: .9rem;
		}

		#comment01 span {
			font-size: 1rem;
			font-weight: bold;
		}

		.fas {
			font-size: 2.5em;
		}

		.closeModal {
			font-size: 2.5em;
			font-weight: bolder;
			text-align: right;
			margin: 0;
			padding: 0;
		}

		.closeModal a {
			text-decoration: none;
		}
	</style>
</head>

<body class="w3-black">
	<header role="banner" class="w3-container w3-theme-d2">
		<div id="innerheader" class="w3-text-theme">
			<h1><a href="<% gallery_root %>" id="top"><% title %></a></h1>
			<nav role="navigation"><% breadcrumb_navigation %></nav>
			<aside><% folder_comment %></aside>
		</div>
		<div id="Message" class="Message">
			<% messages %>
		</div>
	</header>
	<div class="w3-bar w3-center">
		<% page_navigation %>
	</div>

	<main id="container" class="w3-container w3-black">
		<div id="gallery" class="w3-row-padding w3-section w3-margin-top">
			<% thumbnails %>
		</div>
	</main>

	<div class="w3-bar w3-center">
		<% page_navigation %>
	</div>

	<div id="modal01" class="w3-modal w3-animate-zoom">
		<p class="closeModal"><a href="#" onclick="closeModal(); return false;">X</a></p>
		<div class="modal-content">
			<div id="modal-content-img"><img id="img01"></div>
			<div id="video01"></div>
			<div class="w3-theme-d3 w3-shadow">
				<p id="comment01"></p>
				<p>
					<ul style="text-align: left;">
				<li id="thumburl"></li>
				<li id="fullurl"></li>
				<li id="markdown"></li>
				</ul>
				</p>
			</div>
		</div>
	</div>

	<a href="#top" class="top w3-button w3-theme w3-right">&#8613;</a>
	<footer role="contentinfo" class="w3-black w3-center w3-text-theme">
		Gallery by <% author %> /
		<a href="https://github.com/sebsauvage/MinigalNano" title="Powered by MiniGal Nano" target="_blank">Powered by
			MiniGal Nano <% version %></a> /
		Inspired theme from Board by Tom Canac /
		<a title="<% title %> RSS" href="rss.php">RSS</a> /
		<a title="Contact" href="/contact.php">Contact</a>
	</footer>
	<script src="<% gallery_root %>js/lazy.js"></script>
	<script src="<% gallery_root %>js/script.js"></script>
	<script>
		function closeModal() {
			document.getElementById("modal01").style.display = "none"
			document.getElementById("video01").innerHTML = null;
		}

		function onClick(element) {
			document.getElementById("img01").src = null;
			document.getElementById("comment01").innerHTML = null;
			document.getElementById("video01").innerHTML = null;
			document.getElementById("comment01").innerHTML = element.dataset.desc;
			document.getElementById("thumburl").innerHTML = "Thumbnail : " + element.firstElementChild.currentSrc;
			document.getElementById("fullurl").innerHTML = "Full : " + element.href;
			document.getElementById("markdown").innerHTML = "Markdown : [![](" + element.firstElementChild.currentSrc + ")](" + element.href + ")";

			if (typeof element.dataset.video !== 'undefined') {
				document.getElementById("img01").style.display = "none";
				document.getElementById("video01").style.display = "";
				document.getElementById("video01").innerHTML = "<video height='90%' controls id='the_Video' poster='" + element.href + "'><source src='" + element.dataset.video + "' type='video/webm'></video>";
			} else {
				document.getElementById("video01").style.display = "none";
				document.getElementById("img01").style.display = "";
				document.getElementById("img01").src = element.href;
			}
			document.getElementById("modal01").style.display = "block";
		}
	</script>
</body>

</html>