<?php global $zon, $site_url; ?>
<header style="background-color: var(--zon-body-bg-color);" class="z-container pt-1 pb-2 sticky z-50 top-0 w-full">
<div class="flex items-center gap-6 justify-between w-full">
<div class="flex gap-5 items-center ">
<?php if ($zon['page'][0] !== 'blog') { ?>
<div class="burger-menu-sm bm-sm">
<svg xmlns="http://www.w3.org/2000/svg" width="19px" height="19px" fill="none" stroke-width="1.1"
viewBox="0 0 24 24" color="#d9d9d9">
<path style="stroke: var(--zon-common-text-color);" stroke="#d9d9d9" stroke-width="1.1" stroke-linecap="round"
stroke-linejoin="round" d="M3 5h18M3 12h18M3 19h18"></path>
</svg>
</div>
<?php } ?>
<?php if ($zon['page'][0] == 'blog') { ?>
<a class="logo" href="<?php echo $site_url ?>">
<img style="display: var(--zon-dark-logo);"
src="<?php echo $site_url . 'static/img/logo/' . $zon['config']['site_logo_dark'] ?>" width="140"
class="logo" />
<img style="display: var(--zon-light-logo);"
src="<?php echo $site_url . 'static/img/logo/' . $zon['config']['site_logo_light'] ?>" width="140"
class="logo" />
</a>
<?php } ?>
<div class="flex relative z-100 search-bar hover:bg-[var(--zon-search-hover-color)] py-2 px-2 rounded-md w-96"
style="background-color: var(--zon-search-bg-color)">
<input type="text" class="w-full live-search-input px-2 bg-transparent text-sm outline-none"
placeholder="Search" />
<button class="px-4">
<svg xmlns="http://www.w3.org/2000/svg" width="19px" height="19px" fill="none" stroke-width="1.1"
viewBox="0 0 24 24" color="#000000">
<path stroke="#000000" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"
d="m17 17 4 4M3 11a8 8 0 1 0 16 0 8 8 0 0 0-16 0Z"></path>
</svg>
</button>
<div
class="search-result hidden live-search min-h-[fit] transition duration-300 z-40 p-6 absolute top-10 left-0 rounded-xl w-full bg-[var(--zon-body-bg-color)] shadow-xl">
<div id="live-games">
</div>
<div class="flex live-search-loader justify-center items-center">
<div
class="loader border-[6px] animate-spin border-transparent border-l-[var(--zon-theme-color)] rounded-full block h-14 w-14 ">
</div>
</div>
</div>
<div class="clicker"></div>
</div>
</div>
<div class="flex items-center gap-4">
<div class="wrapper theme-changer">
<svg id="LightIcon" xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" fill="none" stroke-width="1.5"
viewBox="0 0 24 24" color="#000000">
<path stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
d="M12 18a6 6 0 1 0 0-12 6 6 0 0 0 0 12ZM22 12h1M12 2V1M12 23v-1M20 20l-1-1M20 4l-1 1M4 20l1-1M4 4l1 1M1 12h1">
</path>
</svg>
<input type="checkbox" class="theme-toggler" />
<svg id="DarkIcon" xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" fill="none" stroke-width="1.5"
viewBox="0 0 24 24" color="#000000">
<path stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
d="M3 11.507a9.493 9.493 0 0 0 18 4.219c-8.507 0-12.726-4.22-12.726-12.726A9.494 9.494 0 0 0 3 11.507Z">
</path>
</svg>
</div>
<!-- -->
<?php if (IsLoggedin) { ?>
<div class="profile relative">
<div class="flex gap-4">
<img src="<?php echo $site_url . 'static/img/' . $zon['user']['user_pic'] ?>"
style="width: 40px; height: 40px;" class="object-cover rounded-full" />
<div class="text">
<span class="font-semibold text-[var(--zon-common-text-color)] "><?php echo $zon['user']['username'] ?></span>
<p class="text-xs text-[var(--zon-muted-color)]"><?php echo $zon['config']['profile_tagline'] ?></p>
</div>
</div>
<div class="dropdown-menu rounded-md p-2">
<ul>
<?php if (IsAdmin) { ?>
<li><a href="<?php echo $site_url ?>admin/" class="block py-2">Admin Panel</a></li>
<hr class="mb-2 border-[var(--zon-comment-input-b-color)] mt-2" />
<?php } ?>
<li><a href="<?php echo $site_url . strtolower($zon['user']['username']) ?>/likes" class="block py-2">Liked Games</a></li>
<li><a href="<?php echo $site_url . strtolower($zon['user']['username']) ?>/comments" class="block py-2">Comments</a></li>
<li><a href="<?php echo $site_url . strtolower($zon['user']['username']) ?>/settings" class="block py-2">Settings</a></li>
<hr class="mb-2 border-[var(--zon-comment-input-b-color)] mt-2" />
<li><a href="<?php echo $site_url ?>logout" class="block py-2">Logout</a></li>
</ul>
</div>
</div>
<?php } else { ?>
<div class="flex gap-3">
<a href="<?php echo $site_url ?>login" class="block text-white py-1.5 font-medium px-4 rounded-md"
style="background: var(--zon-theme-color)">Login</a>
<a href="<?php echo $site_url ?>register" class="block register-button text-[var(--zon-common-text-color)] hover:text-white transition duration-300 hover:bg-[var(--zon-theme-color)] text-white py-1.5 font-medium px-4 rounded-md">Sign up</a>
</div>
<?php } ?>
</div>
</div>
</header>