<!-- Wrapper start -->
    <div id="wrapper" class="wrap overflow-hidden-x">
        <div class="breadcrumbs panel z-1 py-2 bg-gray-25 dark:bg-gray-100 dark:bg-opacity-5 dark:text-white">
            <div class="container max-w-xl">
                <ul class="breadcrumb nav-x justify-center gap-1 fs-7 sm:fs-6 m-0">
                    <li><a href="<?= base_url('home') ?>">Home</a></li>
                    <li><i class="unicon-chevron-right opacity-50"></i></li>
                    <li><a href="<?= base_url("blog/category/$posting->slug") ?>"><?= $posting->category_name ?></a></li>
                    <li><i class="unicon-chevron-right opacity-50"></i></li>
                    <li><span class="opacity-50"><?= $posting->title ?></span></li>
                </ul>
            </div>
        </div>

        <article class="post type-post single-post py-4 lg:py-6 xl:py-6">
            <div class="container max-w-xl">
                <div class="post-header">
                    <div class="panel vstack gap-4 md:gap-6 xl:gap-6 text-center">
                        <div class="panel vstack items-center gap-1 md:gap-2">
                            <h1 class="h4 sm:h2 lg:h1 xl:display-6"><?= $posting->title ?></h1>							
                        </div>
                        <figure class="featured-image m-0">
                            <figure
                                class="featured-image m-0 ratio ratio-2x1 rounded uc-transition-toggle overflow-hidden bg-gray-25 dark:bg-gray-800">
                                <img class="media-cover image uc-transition-scale-up uc-transition-opaque"
                                    src="<?= base_url("images/posting/large/$posting->photo") ?>"
                                    data-src="<?= base_url("images/posting/large/$posting->photo") ?>"
                                    alt="<?= $posting->title ?>"
                                    data-uc-img="loading: lazy">
                            </figure>
                        </figure>
                    </div>
                </div>
            </div>
            <div class="panel mt-4 lg:mt-6 xl:mt-9">
                <div class="container max-w-lg">
                    <div class="post-content panel" data-uc-lightbox="animation: scale">
						<?= $posting->content ?>
                    </div>
                    <div
                        class="post-footer panel vstack sm:hstack gap-3 justify-between justifybetween border-top py-2 mt-2 xl:py-4 xl:mt-4">
                        <ul class="nav-x gap-narrow">
                            <li>
								<i class="icon-narrow unicon-tag"></i>
								<span><?= $posting->category_name ?> </span>
                            </li> 
							<li>&nbsp;</li>
							<li>
								<i class="icon-narrow unicon-user"></i>
								<span>Administrator </span>
							</li> 
							<li>&nbsp;</li>
							<li>
								<i class="icon-narrow unicon-calendar"></i>
								<span><?= tglIndo($posting->date) ?></span>
							</li>
                        </ul>
                        <div class="nav-x gap-narrow" style="color:white">
							<span class="text-dark dark:text-white">Share :</span>
                            <!-- AddToAny BEGIN -->
							<div class="a2a_kit a2a_kit_size_32 a2a_default_style">
							<a class="a2a_button_whatsapp"></a>
							<a class="a2a_button_facebook"></a>
							<a class="a2a_button_telegram"></a>
							<a class="a2a_button_x"></a>
							<a class="a2a_button_email"></a>
							<a class="a2a_button_copy_link"></a>
							<a class="a2a_button_print"></a>
							</div>
							<script defer src="https://static.addtoany.com/menu/page.js"></script>
							<!-- AddToAny END -->
                        </div>
                    </div>

                    <div class="post-related panel pt-2 mt-8 xl:mt-9">
                        <h4 class="h5 xl:h4 mb-5 xl:mb-6">Latest Post:</h4>
                        <div class="row child-cols-6 md:child-cols-3 gx-2 gy-4 sm:gx-3 sm:gy-6">
							<?php
							$i = 0;
							foreach($lastNews as $v) :
							if($i < 4){ $i++; }else{ break; } ?>	
                            <div>
                                <article class="post type-post panel vstack gap-2">
                                    <figure
                                        class="featured-image m-0 ratio ratio-4x3 rounded uc-transition-toggle overflow-hidden bg-gray-25 dark:bg-gray-800">
                                        <img class="media-cover image uc-transition-scale-up uc-transition-opaque"
                                            src="<?= base_url("images/posting/$v->photo") ?>"
                                            data-src="<?= base_url("images/posting/$v->photo") ?>"
                                            alt="<?= $v->title ?>"
                                            data-uc-img="loading: lazy">
                                        <a href="<?= base_url("blog/read/$v->seo_title") ?>" class="position-cover"
                                            data-caption="<?= $v->title ?>"></a>
                                    </figure>
                                    <div class="post-header panel vstack gap-1">
                                        <h5 class="h6 md:h5 m-0">
                                            <a class="text-none" href="<?= base_url("blog/read/$v->seo_title") ?>"><?= $v->title ?></a>
                                        </h5>
                                        <div class="post-date hstack gap-narrow fs-7 opacity-60">
                                            <span><?= tglIndo($v->date) ?></span>
                                        </div>
                                    </div>
                                </article>
                            </div>			
								<?php endforeach ?>							
                        </div>
                    </div>
				</div>
            </div>
        </article>

        <!-- Newsletter -->
    </div>

    <!-- Wrapper end -->