<?php require PATH . '/config/array.config.php'; ?>
<nav class="navbar navbar-expand-lg layout-header <?php if(isset($_COOKIE['mode'])) { echo 'navbar-light'; } else { echo 'navbar-dark'; }?>">
    <div class="container-fluid">
        <button class="navbar-toggler border-0 shadow-none px-0" type="button" data-bs-toggle="collapse" data-bs-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <a href="<?php echo APP;?>" class="navbar-brand dark-logo me-lg-4">
            <img src="<?php echo LOCAL.'/'.get($Settings,'data.logo','general');?>" height="30" alt="<?php echo get($Settings,'data.company','general');?>">
        </a>
        <a href="<?php echo APP;?>" class="navbar-brand light-logo me-lg-4">
            <img src="<?php echo LOCAL.'/'.get($Settings,'data.dark_logo','general');?>" height="30" alt="<?php echo get($Settings,'data.company','general');?>">
        </a>
        <button class="navbar-toggler border-0 shadow-none px-0" type="button" data-bs-toggle="collapse" data-bs-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
            <svg width="24" height="24" stroke="currentColor" stroke-width="1.75" fill="none">
                <use xlink:href="<?php echo ASSETS.'/sprite/sprite.svg#search';?>"></use>
            </svg>
        </button>
        <div class="collapse navbar-collapse" id="navbar">
            <ul class="navbar-nav mb-2 mb-lg-0 fs-sm align-items-lg-center">
                <li class="nav-item">
                    <a class="nav-link" href="<?php echo games();?>"><?php echo $this->translate('Newest');?></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="<?php echo games($this->translate('most-popular'));?>"><?php echo $this->translate('Most popular');?></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="<?php echo APP.'/'.$this->translate('random');?>">
                        <?php echo $this->translate('Random');?></a>
                </li> 
            </ul>
            <form class="form-search w-xxl-300 w-xl-250 ms-xl-4 mb-3 mb-lg-0" action="<?php echo APP.'/'.$this->translate('search');?>" method="post">
                <input type="hidden" name="_TOKEN" value="<?php echo $Token;?>">
                <input type="hidden" name="_ACTION" value="search">
                <div class="input-group input-group-inline shadow-none">
                    <span class="input-group-text bg-transparent border-0 text-gray-500 shadow-none ps-0 pe-3">
                        <svg width="18" height="18" stroke="currentColor" stroke-width="1.75" fill="none">
                            <use xlink:href="<?php echo ASSETS.'/sprite/sprite.svg#search';?>"></use>
                        </svg>
                    </span>
                    <input type="text" name="q" class="form-control form-control-flush bg-transparent border-0 ps-0" id="search" placeholder="<?php echo $this->translate('Search');?> .." aria-label="Search" required="true" minlength="3">
                </div>
            </form>
            <ul class="navbar-nav mb-2 mb-lg-0 fw-semibold align-items-xl-center ms-xl-auto">
                <li class="nav-item">
                    <a href="<?php echo APP.'/'.$this->translate('leaderboard');?>" class="nav-link" data-bs-tooltip="tooltip" data-bs-placement="bottom" title="<?php echo $this->translate('Leaderboard');?>">
                        <svg width="16" height="16" fill="currentColor">
                            <use xlink:href="<?php echo ASSETS.'/sprite/sprite.svg#leader';?>"></use>
                        </svg>
                    </a>
                </li>
                <li class="nav-item">
                    <div class="nav-link color-toggle">
                        <div class="light">
                            <svg width="20" height="20" stroke="currentColor" stroke-width="1.75" fill="none">
                                <use xlink:href="<?php echo ASSETS.'/sprite/sprite.svg#sun';?>"></use>
                            </svg>
                        </div>
                        <div class="dark">
                            <svg width="20" height="20" stroke="currentColor" stroke-width="1.75" fill="none">
                                <use xlink:href="<?php echo ASSETS.'/sprite/sprite.svg#moon';?>"></use>
                            </svg>
                        </div>
                    </div>
                </li>
                <?php if(isset($AuthUser['id'])) { ?>
                <?php 
                $ProfileRank    = ranked((int)$AuthUser['xp'],$Rank); 
                $ArrayId        = array_search($ProfileRank['level'], array_column($Rank, 'level'))+1;
                $ArrayId        = ($ArrayId >= count($Rank) ? array_key_last($Rank) : $ArrayId);
                if(isset($ArrayId) AND $ArrayId < count($Rank)){
                    $NextRank           = $Rank[$ArrayId];
                    if($AuthUser['xp'] > $NextRank['xp']) {
                        $HeaderProgressBar  = 100;
                    } else {
                        $HeaderProgressBar  = 100 * ((int)$AuthUser['xp'] - $ProfileRank['xp']) / ($NextRank['xp'] - $ProfileRank['xp']);  
                    }
                }
                ?>
                <li class="nav-item">
                    <div class="nav-link w-lg-150px mb-2 mb-lg-0">
                        <div class="fs-xxs d-flex align-items-center">
                            <span class="fw-semibold text-uppercase">
                                <?php echo $this->translate('Next');?></span>
                            <span class="ms-auto fw-bold">
                                <?php echo $NextRank['xp'];?> XP</span>
                        </div>
                        <div class="progress mt-1 bg-gray-200" style="height: 6px;">
                            <div class="progress-bar progress-xp rounded-pill" role="progressbar" style="width: <?php echo $HeaderProgressBar ?>%" aria-valuenow="<?php echo $HeaderProgressBar ?>" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                    </div>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle d-flex align-items-center py-0 px-3" role="button" id="Profile" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <div class="position-relative">
                            <?php echo gravatar($AuthUser['id'],$AuthUser['username'],$AuthUser['avatar'],'avatar rounded-circle text-white fs-xs',$AuthUser['color']);?>
                        </div>
                        <div class="ps-3 lh-sm">
                            <div class="text-muted fs-xs">
                                <?php echo $this->translate('Hello');?>,</div>
                            <div class="fs-xs">
                                <?php echo $AuthUser['name'];?>
                            </div>
                        </div>
                    </a>
                    <div class="dropdown-menu dropdown-menu-end dropdown-menu-md border-0 mt-3 py-4 px-3 rounded-3" aria-labelledby="Profile">
                        <div class="px-3">
                            <div class="row align-items-center mb-3">
                                <div class="col-8">
                                    <div class="fs-xs text-heading fw-semibold">
                                        <?php echo $ProfileRank['name'];?>
                                    </div>
                                    <div class="fs-xxs text-muted fw-bold">
                                        <?php echo (int)$AuthUser['xp'].' XP';?>
                                    </div>
                                    <div class="progress mt-2 bg-gray-300" style="height: 6px;">
                                        <div class="progress-bar progress-xp rounded-pill" role="progressbar" style="width: <?php echo $HeaderProgressBar ?>%" aria-valuenow="<?php echo $HeaderProgressBar ?>" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                </div>
                                <div class="col-4">
                                    <img src="<?php echo LOCAL.'/rank/'.$ProfileRank['level'].'.svg';?>" class="img-fluid">
                                </div>
                            </div>
                        </div>
                        <?php if($AuthUser['account_type'] == 'admin') { ?>
                        <div class="px-1 my-3 d-grid">
                            <a class="btn btn-theme fs-xs rounded-pill" href="<?php echo APP.'/admin';?>" target="_blank">
                                Admin panel
                            </a>
                        </div>
                        <?php } ?>
                        <a class="dropdown-item fs-sm" href="<?php echo user($AuthUser['id'],$AuthUser['username']);?>">
                            <?php echo $this->translate('Profile');?>
                        </a>
                        <a class="dropdown-item fs-sm" href="<?php echo user($AuthUser['id'],$AuthUser['username']).'/like';?>">
                            <?php echo $this->translate('Liked games');?>
                        </a>
                        <?php if(get($Settings,'data.history','general') == 1) { ?>
                        <a class="dropdown-item fs-sm" href="<?php echo user($AuthUser['id'],$AuthUser['username']).'/playing';?>">
                            <?php echo $this->translate('Keep playing');?>
                        </a>
                        <?php } ?>
                        <a class="dropdown-item fs-sm" href="<?php echo user($AuthUser['id'],$AuthUser['username']).'/comments';?>">
                            <?php echo $this->translate('Comments');?>
                        </a>
                        <div class="mt-3"></div>
                        <a class="dropdown-item fs-sm" href="<?php echo APP.'/dashboard/settings';?>">
                            <?php echo $this->translate('Settings');?>
                        </a>
                        <a class="dropdown-item fs-sm" href="<?php echo APP.'/logout';?>">
                            <?php echo $this->translate('Logout');?>
                        </a>
                    </div>
                </li>
                <?php } else { ?>
                <li class="nav-item">
                    <a href="<?php echo APP.'/'.$this->translate('login');?>" class="nav-link fs-sm fw-normal">
                        <?php echo $this->translate('Login');?></a>
                </li>
                <li class="nav-item">
                    <a href="<?php echo APP.'/'.$this->translate('register');?>" class="nav-link fs-sm fw-normal">
                        <?php echo $this->translate('Sign up');?></a>
                </li>
                <?php } ?>
            </ul>
        </div>
    </div>
</nav>