<?php
/*
{
	"id" : "image-viewer",
	"category": "image",
	"name": "Image Viewer"
}
*/

$SiteShell->append('head', '
	<style type="text/css">
		.article-section { width: 100%; max-width: 768px; margin: 0 auto; }
		.article-section:empty { width: 100%; padding: 2rem; }
		.article-section:not(:empty) { width: 100%; padding: 2rem 2rem 4rem 2rem; }
		.absolute-icon { width: 32px; height: 32px; padding: 4px; z-index: 2; position: absolute; top: 50%; margin-top: -20px; font-size: 24px; opacity: 0.7; background: #fff; }
	</style>' . PHP_EOL);

$current_id		= $result["id"] ?? false;
$next				= $sw->extend("posts")->type("article")->section($result["section"])->orderby(["modified_time" => "DESC","created_time" => "DESC"])->limit(12)->next($current_id);
$prev				= $sw->extend("posts")->type("article")->section($result["section"])->orderby(["modified_time" => "DESC","created_time" => "DESC"])->limit(12)->prev($current_id);

if (!empty($next["data"]))			$first_post		= $next["data"][array_key_first($next["data"])];
if (!empty($prev["data"]))			$last_post		= $prev["data"][array_key_last($prev["data"])];

$related_posts		= array_merge($next["data"], $prev["data"]);
$related_posts		= (new ComponentModule())->data($related_posts, "1:1")->markupHTML('
<div class="image-card" style="padding:0.6rem;">
	<a href="<!--url-->">
		<figure class="sw-ui-figure">
			<div class="sw-ui-media-wrapper">
				<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 <!--width--> <!--height-->"></svg>
				<img class="lazyload" src="<!--image_url-->" data-lazyload-placeholder="<!--thumb-->" data-lazyload-scheme="<!--image_scheme-->" alt="<!--image_alt-->">
			</div>
		</figure>
	</a>
</div>' . PHP_EOL);

ob_start();
?>
<div style="min-height: 60vh; min-height: calc(100vh - var(--header-height));">
	<article style="width: 100%;">
		<div style="min-height: 60vh; height: calc(100vh - var(--header-height)); padding: 0 0 1.5rem 0;">
			<figure class="sw-ui-figure">
				<div class="sw-ui-media-wrapper">
					<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 <!--width--> <!--height-->"></svg>
					<img class="lazyload object-contain" src="<!--image_url-->" data-lazyload-placeholder="<!--thumb-->" data-lazyload-scheme="<!--image_scheme-->" alt="<!--image_alt-->">
<?php
if (!empty($first_post['url']))		e('					<a href="' . $first_post['url'] . '" class="absolute-icon" style="left: 1rem;"><span class="sw-ui-iconmask lineui-prev-5"></span></a>' . PHP_EOL);
if (!empty($last_post['url']))		e('					<a href="' . $last_post['url'] . '" class="absolute-icon" style="right: 1rem;"><span class="sw-ui-iconmask lineui-next-5"></span></a>' . PHP_EOL);
?>
				</div>
				<figcaption class="sw-ui-media-caption"><!--title--></figcaption>
			</figure>
		</div>

		<section class="body padding article-section"><!--content--></section>
	</article>

	<aside class="body padding" style="margin: 1rem auto 4rem auto;">
		<h2 style="font-size: 1.4rem; font-size: clamp(1.125rem, 4vw, 1.6rem); font-weight: 100; text-align: right; margin: 0 0 1rem 0;">Related Posts</h2>
		<section class="sw-ui-gallery-wrapper" style="margin: 0 -0.6rem; width: auto;">
			<div class="flexbox-columns min-3-max-8 align-right">
<?php e($related_posts->cards(1500)); ?>
			</div>
		</section>
	</aside>
</div>
<?php
$markup				= ob_get_clean();

$article				= $result;
$article				= (new ComponentModule())->data($article, "default")->markupHTML( $markup );

$content				= $article->article();

$SiteShell->replace('article', PHP_EOL . $content);

