<?php global $zon, $site_url; ?>
<div id="menu-drawer" class="menu-container">
  <button aria-label="close" onclick="document.getElementById('menu-drawer').classList.remove('active')"
    class="close-drawer">
    <i>&times;</i>
  </button>
  <div class="menu-drawer">
    <a href="<?php $site_url ?>new-games" class="list">
      <svg width="20px" height="20px" stroke-width="1.1" viewBox="0 0 24 24" fill="none"
        xmlns="http://www.w3.org/2000/svg" color="#8c8c8c">
        <path
          d="M14 20.4V14.6C14 14.2686 14.2686 14 14.6 14H20.4C20.7314 14 21 14.2686 21 14.6V20.4C21 20.7314 20.7314 21 20.4 21H14.6C14.2686 21 14 20.7314 14 20.4Z"
          stroke="#8c8c8c" stroke-width="1.1"></path>
        <path
          d="M3 20.4V14.6C3 14.2686 3.26863 14 3.6 14H9.4C9.73137 14 10 14.2686 10 14.6V20.4C10 20.7314 9.73137 21 9.4 21H3.6C3.26863 21 3 20.7314 3 20.4Z"
          stroke="#8c8c8c" stroke-width="1.1"></path>
        <path
          d="M14 9.4V3.6C14 3.26863 14.2686 3 14.6 3H20.4C20.7314 3 21 3.26863 21 3.6V9.4C21 9.73137 20.7314 10 20.4 10H14.6C14.2686 10 14 9.73137 14 9.4Z"
          stroke="#8c8c8c" stroke-width="1.1"></path>
        <path
          d="M3 9.4V3.6C3 3.26863 3.26863 3 3.6 3H9.4C9.73137 3 10 3.26863 10 3.6V9.4C10 9.73137 9.73137 10 9.4 10H3.6C3.26863 10 3 9.73137 3 9.4Z"
          stroke="#8c8c8c" stroke-width="1.1"></path>
      </svg>
      Newest Games
    </a>
    <a href="<?php $site_url ?>popular-games" class="list">
      <svg width="20px" stroke-width="1.1" height="20px" viewBox="0 0 24 24" fill="none"
        xmlns="http://www.w3.org/2000/svg" color="#8c8c8c">
        <path
          d="M8 18C8 20.4148 9.79086 21 12 21C15.7587 21 17 18.5 14.5 13.5C11 18 10.5 11 11 9C9.5 12 8 14.8177 8 18Z"
          stroke="#8c8c8c" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round"></path>
        <path
          d="M12 21C17.0495 21 20 18.0956 20 13.125C20 8.15444 12 3 12 3C12 3 4 8.15444 4 13.125C4 18.0956 6.95054 21 12 21Z"
          stroke="#8c8c8c" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round"></path>
      </svg>
      Popular Games
    </a>
    <?php if (!IsLoggedin) { ?>
      <a href="<?php $site_url ?>login" class="list">
        <svg width="20px" height="20px" stroke-width="1.1" viewBox="0 0 24 24" fill="none"
          xmlns="http://www.w3.org/2000/svg" color="#8c8c8c">
          <path d="M5 20V19C5 15.134 8.13401 12 12 12V12C15.866 12 19 15.134 19 19V20" stroke="#8c8c8c" stroke-width="1.1"
            stroke-linecap="round" stroke-linejoin="round"></path>
          <path
            d="M12 12C14.2091 12 16 10.2091 16 8C16 5.79086 14.2091 4 12 4C9.79086 4 8 5.79086 8 8C8 10.2091 9.79086 12 12 12Z"
            stroke="#8c8c8c" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
        Login
      </a>
    <?php } ?>
    <?php if (IsLoggedin) { ?>
      <a href="<?php echo $site_url ?>admin/" class="list">
        <svg width="20px" height="20px" stroke-width="1.1" viewBox="0 0 24 24" fill="none"
          xmlns="http://www.w3.org/2000/svg" color="#8c8c8c">
          <path
            d="M12 2V2C16.4183 2 20 5.58172 20 10V14C20 18.4183 16.4183 22 12 22V22C7.58172 22 4 18.4183 4 14V10C4 5.58172 7.58172 2 12 2V2ZM12 2V9"
            stroke="#8c8c8c" stroke-width="1.1" stroke-linecap="round"></path>
        </svg>
        Admin
      </a>
      <a href="<?php echo $site_url ?><?php echo urlencode($zon['user']['username']) ?>/likes" class="list">
        <svg width="20px" height="20px" stroke-width="1.1" viewBox="0 0 24 24" fill="none"
          xmlns="http://www.w3.org/2000/svg" color="#8c8c8c">
          <path
            d="M22 8.86222C22 10.4087 21.4062 11.8941 20.3458 12.9929C17.9049 15.523 15.5374 18.1613 13.0053 20.5997C12.4249 21.1505 11.5042 21.1304 10.9488 20.5547L3.65376 12.9929C1.44875 10.7072 1.44875 7.01723 3.65376 4.73157C5.88044 2.42345 9.50794 2.42345 11.7346 4.73157L11.9998 5.00642L12.2648 4.73173C13.3324 3.6245 14.7864 3 16.3053 3C17.8242 3 19.2781 3.62444 20.3458 4.73157C21.4063 5.83045 22 7.31577 22 8.86222Z"
            stroke="#8c8c8c" stroke-width="1.1" stroke-linejoin="round"></path>
        </svg>
        Liked Games
      </a>
      <a href="<?php echo $site_url ?><?php echo urlencode($zon['user']['username']) ?>/settings" class="list">
        <svg width="20px" height="20px" stroke-width="1.1" viewBox="0 0 24 24" fill="none"
          xmlns="http://www.w3.org/2000/svg" color="#8c8c8c">
          <path
            d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z"
            stroke="#8c8c8c" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round"></path>
          <path
            d="M19.6224 10.3954L18.5247 7.7448L20 6L18 4L16.2647 5.48295L13.5578 4.36974L12.9353 2H10.981L10.3491 4.40113L7.70441 5.51596L6 4L4 6L5.45337 7.78885L4.3725 10.4463L2 11V13L4.40111 13.6555L5.51575 16.2997L4 18L6 20L7.79116 18.5403L10.397 19.6123L11 22H13L13.6045 19.6132L16.2551 18.5155C16.6969 18.8313 18 20 18 20L20 18L18.5159 16.2494L19.6139 13.598L21.9999 12.9772L22 11L19.6224 10.3954Z"
            stroke="#8c8c8c" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
        Settings
      </a>

      <a href="<?php echo $site_url ?><?php $site_url ?>logout" class="list">
        <svg width="20px" height="20px" stroke-width="1.1" viewBox="0 0 24 24" fill="none"
          xmlns="http://www.w3.org/2000/svg" color="#8c8c8c">
          <path d="M12 12H19M19 12L16 15M19 12L16 9" stroke="#8c8c8c" stroke-width="1.1" stroke-linecap="round"
            stroke-linejoin="round"></path>
          <path
            d="M19 6V5C19 3.89543 18.1046 3 17 3H7C5.89543 3 5 3.89543 5 5V19C5 20.1046 5.89543 21 7 21H17C18.1046 21 19 20.1046 19 19V18"
            stroke="#8c8c8c" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
        Logout
      </a>
    <?php } ?>

    <?php if (getAdById(4, 'status') == 0) { ?>
      <div class="p-2">
        <div class="ads wow <?php echo $zon['config']['animate_class'] ?> flex justify-center">
          <?php echo getAdById(4, 'code') ?>
        </div>
      </div>
    <?php } ?>

  </div>
</div>
<div id="drawer" class="search-container">
  <button aria-label="close" onclick="document.getElementById('drawer').classList.remove('active')"
    class="close-drawer">
    <i>&times;</i>
  </button>
  <div class="search-drawer scroll-none">
    <form class="search-bar" action="<?php echo $site_url ?>search/">
      <input placeholder="Search for game" name="g" type="text">
      <button><svg width="20px" height="20px" viewBox="0 0 24 24" stroke-width="1.1" fill="none"
          xmlns="http://www.w3.org/2000/svg" color="#8c8c8c">
          <path d="M17 17L21 21" stroke="#8c8c8c" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round">
          </path>
          <path
            d="M3 11C3 15.4183 6.58172 19 11 19C13.213 19 15.2161 18.1015 16.6644 16.6493C18.1077 15.2022 19 13.2053 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11Z"
            stroke="#8c8c8c" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg></button>
    </form>
    <div class="suggested-category">
      <h2 class="mt-4 capitalize text-sm font-medium">Categories you might like</h2>
      <div class="game__categories mt-4">
        <?php foreach (getCategory(8) as $category) {
          $game = GameByCategoryWise($category['name'], 1)[0];
          ?>
          <div class="category shadow-md">
            <a class="block h-16 w-20 mr-6" href="<?= $site_url . 'category/?n=' . urlencode($category['name']) ?>">
              <img class="block h-16 w-20" src="<?= $game['game_image_url'] ?>" alt="<?= $category['name'] ?>">
            </a>
            <div class="text">
              <a class="category__name capitalize"
                href="<?= $site_url . 'category/?n=' . urlencode($category['name']) ?>">
                <?= $category['name'] ?>
              </a>
              <p class="text-gray-500">
                <?php echo count(GameByCategoryWise($category['name'])) ?> games available
              </p>
            </div>
          </div>
        <?php } ?>
      </div>
    </div>

    <?php if (getAdById(5, 'status') == 0) { ?>
      <div class="p-2">
        <div class="ads wow <?php echo $zon['config']['animate_class'] ?> flex justify-center">
          <?php echo getAdById(5, 'code') ?>
        </div>
      </div>
    <?php } ?>

    <div class="suggested-games">
      <h2 class="mt-6 capitalize text-sm font-medium">Games you might like</h2>
      <div class="game__grid mt-4">
        <?php foreach (getGame(18) as $game) { ?>
          <div class="game new__badges">
            <a href="<?= $site_url . 'game/' . makeSlug($game['game_name']) . '/' . $game['id'] ?>" class="game__thumb">
              <img src="<?= $game['game_image_url'] ?>" alt="<?= $game['game_name'] ?>" />
            </a>
            <a href="<?= $site_url . 'game/' . makeSlug($game['game_name']) . '/' . $game['id'] ?>" class="game_name">
              <?= $game['game_name'] ?>
            </a>
          </div>
        <?php } ?>
      </div>
    </div>
  </div>
</div>
<header class="bg-white shadow-md sticky top-0 z-20 py-2 px-4">
  <div class="zon-container">
    <div class="flex justify-between items-center">
      <a href="<?php echo $site_url ?>" aria-label="logo of <?php echo $zon['config']['site_name'] ?>" class="logo">
        <img src="<?php echo $site_url . 'static/img/logo/' . $zon['config']['site_logo_light'] ?>" width="140"
          class="logo" alt="<?php echo $zon['config']['site_name'] ?> logo" />
      </a>
      <div class="flex gap-4">
        <button onclick="document.getElementById('drawer').classList.add('active')" aria-label="search"
          class="head__action__button search"><svg width="20px" height="20px" viewBox="0 0 24 24" stroke-width="1.1"
            fill="none" xmlns="http://www.w3.org/2000/svg" color="#8c8c8c">
            <path d="M17 17L21 21" stroke="#8c8c8c" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round">
            </path>
            <path
              d="M3 11C3 15.4183 6.58172 19 11 19C13.213 19 15.2161 18.1015 16.6644 16.6493C18.1077 15.2022 19 13.2053 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11Z"
              stroke="#8c8c8c" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg></button>
        <button onclick="document.getElementById('menu-drawer').classList.add('active')" aria-label="menu"
          class="head__action__button menu"><svg width="20px" height="20px" stroke-width="1.1" viewBox="0 0 24 24"
            fill="none" xmlns="http://www.w3.org/2000/svg" color="#8c8c8c">
            <path d="M3 5H21" stroke="#8c8c8c" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M3 12H21" stroke="#8c8c8c" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round">
            </path>
            <path d="M3 19H21" stroke="#8c8c8c" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round">
            </path>
          </svg></button>
        <a href="<?php echo $site_url ?>autoplay" aria-label="autoplay" class="head__action__button"><svg width="20px"
            height="20px" viewBox="0 0 24 24" stroke-width="1.1" fill="none" xmlns="http://www.w3.org/2000/svg"
            color="#8c8c8c">
            <path
              d="M17.5 17.5C20 21 23.9486 18.4151 23 15C21.5753 9.87113 20.8001 7.01556 20.3969 5.50793C20.1597 4.62136 19.3562 4 18.4384 4L5.56155 4C4.64382 4 3.844 4.62481 3.62085 5.515C2.7815 8.86349 2.0326 11.8016 1.14415 15C0.195501 18.4151 4.14415 21 6.64415 17.5"
              stroke="#8c8c8c" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M16 4V6C16 7.10457 15.1046 8 14 8H10C8.89543 8 8 7.10457 8 6L8 4" stroke="#8c8c8c"
              stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round"></path>
            <path
              d="M8 16C9.10457 16 10 15.1046 10 14C10 12.8954 9.10457 12 8 12C6.89543 12 6 12.8954 6 14C6 15.1046 6.89543 16 8 16Z"
              stroke="#8c8c8c" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round"></path>
            <path
              d="M16 16C17.1046 16 18 15.1046 18 14C18 12.8954 17.1046 12 16 12C14.8954 12 14 12.8954 14 14C14 15.1046 14.8954 16 16 16Z"
              stroke="#8c8c8c" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg></a>
      </div>
    </div>
  </div>
</header>