<?php require PATH . '/theme/view/common/head.php'; ?>
<?php require PATH . '/theme/view/common/header.php'; ?>
<?php $Resolution = explode('x', $Listing['resolution']);?>
<div class="layout-section">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-auto d-none d-xxl-block">
                <div class="w-lg-300">
                    <?php echo ads($Ads,1,'mb-3');?>
                    <div class="card-masonry">
                        <?php
                        $i = 1;
                        foreach ($Newests as $Newest) {
                        ?>
                        <a href="<?php echo play($Newest['id'],$Newest['self']);?>" class="card">
                            <?php echo picture(GAME_FOLDER,'thumb-'.$Newest['image'],'img-fluid',$Newest['title'],GAME_X.','.GAME_Y);?>
                            <div class="card-body">
                                <h3>
                                    <?php echo $Newest['title'];?>
                                </h3>
                            </div>
                        </a>
                        <?php $i++; } ?>
                    </div>
                </div>
            </div>
            <div class="col-lg">
                <?php if(empty($AuthUser['id']) AND isset($Listing['member']) AND $Listing['member'] == 1) { ?>
                <div class="ratio ratio-16x9 overflow-hidden rounded-3 mb-4 game-ratio">
                    <div class=" lock-game" style="background-image: url(<?php echo UPLOAD.'/'.GAME_FOLDER.'/'.$Listing['image'];?>)"></div>
                    <div class="d-flex align-items-center justify-content-center text-white flex-column">
                        <svg width="160" height="160" fill="currentColor">
                            <use xlink:href="<?php echo ASSETS.'/sprite/sprite.svg#hidden';?>"></use>
                        </svg>
                        <div class="h1 mb-2 text-white fw-bold">
                            <?php echo $this->translate('Members only');?>
                        </div>
                        <div class="text-white h4 fw-normal">
                            <?php echo $this->translate('This game is only for members.');?> <a href="<?php echo APP.'/'.$this->translate('login');?>" class="text-current fw-semibold">
                                <?php echo $this->translate('Login');?></a>, <a href="<?php echo APP.'/'.$this->translate('register');?>" class="text-current fw-semibold">
                                <?php echo $this->translate('Sign up');?></a></div>
                    </div>
                </div>
                <?php } else { ?>
                <div class="ratio ratio-16x9 overflow-hidden rounded-3 mb-4 game-ratio">
                    <iframe class="game-iframe lazyload" data-src="<?php echo $Listing['source'];?>" width="<?php echo $Resolution[0];?>" height="<?php echo $Resolution[1];?>" scrolling="none" frameborder="0" allowfullscreen></iframe>
                </div>
                <?php } ?>
                <div class="px-lg-3">
                    <div class="row">
                        <div class="col-lg">
                            <div class="mb-3">
                                <div class="card-category">
                                    <?php foreach($Categories as $Category) { ?>
                                    <a href="<?php echo category($Category['id'],$Category['self']);?>">
                                        <?php echo $Category['name'];?></a>
                                    <?php } ?>
                                </div>
                                <h1 class="h4">
                                    <?php echo $Listing['title'];?>
                                </h1>
                                <div class="rating-star ms-auto mt-2">
                                    <i class="bg-warning"></i><i class="bg-warning"></i><i class="bg-warning"></i><i class="bg-warning"></i><i class="bg-warning"></i>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-auto text-xl-end">
                            <div class="w-lg-300">
                                <div class="mb-2 d-flex align-items-center justify-content-lg-end flex-nowrap">
                                    <div class="dropdown mx-1 py-1" data-bs-tooltip="tooltip" data-bs-placement="top" title="<?php echo $this->translate('Share');?>">
                                        <button class="btn btn-square btn-ghost rounded-circle dropdown-toggle" type="button" id="shareDropdown" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="outside">
                                            <svg width="14" height="14" fill="currentColor">
                                                <use xlink:href="<?php echo ASSETS.'/sprite/sprite.svg#share';?>"></use>
                                            </svg>
                                        </button>
                                        <div class="dropdown-menu border-0 bg-transparent mt-3 p-0" aria-labelledby="shareDropdown">
                                            <div class="d-flex align-items-center">
                                                <button class="btn btn-square rounded-circle bg-facebook text-white mx-1 btn-share" data-type="facebook" data-title="<?php echo $Listing['title'];?>" data-sef="<?php echo play($Listing['id'],$Listing['self']);?>">
                                                    <svg width="16" height="16" fill="currentColor">
                                                        <use xlink:href="<?php echo ASSETS.'/sprite/sprite.svg#facebook';?>"></use>
                                                    </svg>
                                                </button>
                                                <button class="btn btn-square rounded-circle bg-twitter text-white mx-1 btn-share" data-type="twitter" data-title="<?php echo $Listing['title'];?>" data-sef="<?php echo play($Listing['id'],$Listing['self']);?>">
                                                    <svg width="16" height="16" fill="currentColor">
                                                        <use xlink:href="<?php echo ASSETS.'/sprite/sprite.svg#twitter';?>"></use>
                                                    </svg>
                                                </button>
                                                <button class="btn btn-square rounded-circle bg-whatsapp text-white mx-1 btn-share" data-type="whatsapp" data-title="<?php echo $Listing['title'];?>" data-sef="<?php echo play($Listing['id'],$Listing['self']);?>">
                                                    <svg width="16" height="16" fill="currentColor">
                                                        <use xlink:href="<?php echo ASSETS.'/sprite/sprite.svg#whatsapp';?>"></use>
                                                    </svg>
                                                </button>
                                                <button class="btn btn-square rounded-circle bg-telegram text-white mx-1 btn-share" data-type="telegram" data-title="<?php echo $Listing['title'];?>" data-sef="<?php echo play($Listing['id'],$Listing['self']);?>">
                                                    <svg width="16" height="16" fill="currentColor">
                                                        <use xlink:href="<?php echo ASSETS.'/sprite/sprite.svg#telegram';?>"></use>
                                                    </svg>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="dropdown mx-1 py-1" data-bs-tooltip="tooltip" data-bs-placement="top" title="" data-bs-original-title="<?php echo $this->translate('Fullscreen');?>">
                                        <button class="btn btn-square btn-fullscreen btn-ghost rounded-circle dropdown-toggle">
                                            <svg width="16" height="16" fill="currentColor">
                                                <use xlink:href="<?php echo ASSETS.'/sprite/sprite.svg#fullscreen';?>"></use>
                                            </svg>
                                        </button>
                                    </div>
                                    <?php if(isset($AuthUser['id'])) { ?>
                                    <div class="dropdown mx-1 py-1" data-bs-tooltip="tooltip" data-bs-placement="top" title="" data-bs-original-title="<?php echo $this->translate('Report');?>">
                                        <button class="btn btn-square btn-ghost rounded-circle dropdown-toggle" data-bs-toggle="modal" data-bs-target="#sm" data-remote="<?php echo APP.'/modal/report?id='.$Listing['id'];?>">
                                            <svg width="14" height="14" fill="currentColor">
                                                <use xlink:href="<?php echo ASSETS.'/sprite/sprite.svg#bug';?>"></use>
                                            </svg>
                                        </button>
                                    </div>
                                    <?php } ?>
                                    <div class="w-lg-200 ms-4">
                                        <div class="fs-sm">
                                            <?php echo (int)$Listing['view'].' '.$this->translate('played');?>
                                        </div>
                                        <div class="progress mt-2 bg-transparent" style="height: 6px;">
                                            <div class="progress-bar bg-theme rounded-pill" role="progressbar" style="width: <?php echo ($Listing['likes'] > 0 ? round($Listing['likes'] / ($Listing['likes']+$Listing['dislikes']) * 100) : 100);?>%" aria-valuenow="<?php echo $Likes;?>" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                        <div class="d-flex align-items-center justify-content-center justify-content-md-end mt-2">
                                            <button class="btn btn-square btn-sm text-current reaction like <?php if($Vote['reaction'] == 'up') echo 'text-theme';?>" data-id="<?php echo $Listing['id'];?>">
                                                <svg width="20" height="20" fill="currentColor">
                                                    <use xlink:href="<?php echo ASSETS.'/sprite/sprite.svg#like';?>"></use>
                                                </svg>
                                            </button>
                                            <span class="fs-xxs ms-1 text-muted fw-semibold like-count" data-votes="<?php echo $Listing['likes'];?>">
                                                <?php echo $Listing['likes'];?></span>
                                            <button class="btn btn-square btn-sm text-current reaction dislike ms-3 <?php if($Vote['reaction'] == 'down') echo 'text-theme';?>" data-id="<?php echo $Listing['id'];?>">
                                                <svg width="20" height="20" fill="currentColor">
                                                    <use xlink:href="<?php echo ASSETS.'/sprite/sprite.svg#dislike';?>"></use>
                                                </svg>
                                            </button>
                                            <span class="fs-xxs ms-1 text-muted fw-semibold dislike-count" data-votes="<?php echo $Listing['dislikes'];?>">
                                                <?php echo $Listing['dislikes'];?></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <?php if(isset($Listing['control'])) { ?>
                    <div class="pb-2">
                        <h3 class="fs-sm fw-semibold mb-2">
                            <?php echo $this->translate('Control');?>
                        </h3>
                        <p class="text-muted fs-sm" data-more="" data-limit="6">
                            <?php echo $Listing['control'];?>
                        </p>
                    </div>
                    <?php } ?>
                    <?php if(isset($Listing['description'])) { ?>
                    <div class="pb-2">
                        <h3 class="fs-sm fw-semibold mb-2">
                            <?php echo $this->translate('Description');?>
                        </h3>
                        <p class="text-muted fs-sm" data-more="" data-limit="6">
                            <?php echo $Listing['description'];?>
                        </p>
                    </div>
                    <?php } ?>
                    <?php $Keywords = explode(',', $Listing['keywords']); ?>
                    <?php if(count($Keywords)>=1 AND strlen($Keywords[0])>0) { ?>
                    <div class="card-tags">
                        <?php foreach($Keywords as $Keyword) { ?>
                        <a href="<?php echo tag(tagger($Keyword));?>" class="rounded-pill">
                            <?php echo $Keyword;?></a>
                        <?php } ?>
                    </div>
                    <?php } ?>
                    <div class="mx-auto py-3 px-2">
                        <?php echo ads($Ads,2,'ratio-ads mb-3');?>
                    </div>
                    <?php require PATH . '/theme/view/common/comments.php'; ?>
                </div>
            </div>
            <div class="col-lg-auto">
                <div class="w-lg-300">
                    <?php echo ads($Ads,1,'mb-3');?>
                    <div class="card-masonry mb-4">
                        <?php
                        $i = 1;
                        foreach ($Populars as $Popular) {
                        ?>
                        <a href="<?php echo play($Popular['id'],$Popular['self']);?>" class="card">
                            <?php echo picture(GAME_FOLDER,'thumb-'.$Popular['image'],'img-fluid',$Popular['title'],GAME_X.','.GAME_Y);?>
                            <div class="card-body">
                                <h3>
                                    <?php echo $Popular['title'];?>
                                </h3>
                            </div>
                        </a>
                        <?php $i++; } ?>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="mx-auto py-3 px-2">
    <?php echo ads($Ads,2,'ratio-ads mb-3');?>
</div>
<div class="layout-section">
    <div class="container-fluid">
        <div class="layout-heading mb-3">
            <h3 class="fs-lg fw-bold">
                <?php echo $this->translate('You may also like');?>
            </h3>
        </div>
        <div class="card-masonry">
            <?php
            $i = 1;
            foreach ($Randoms as $Random) {
            ?>
            <a href="<?php echo play($Random['id'],$Random['self']);?>" class="card <?php if($i == 1 || $i == 4) echo 'large';?>">
                <?php echo picture(GAME_FOLDER,($i == 1 || $i == 4 ? $Random['image'] : 'thumb-'.$Random['image']),'img-fluid',$Random['title'],GAME_X.','.GAME_Y);?>
                <div class="card-body">
                    <h3>
                        <?php echo $Random['title'];?>
                    </h3>
                </div>
            </a>
            <?php $i++; } ?>
        </div>
    </div>
</div>
<?php if(get($Settings,'data.footer_text','general')) { ?>
<div class="layout-section layout-text">
    <div class="container-fluid">
        <?php echo htmlspecialchars_decode(get($Settings,'data.footer_text','general'));?>
    </div>
</div>
<?php } ?>
<input type="hidden" name="game_id" value="<?php echo $Listing['id'];?>">
<?php require PATH . '/theme/view/common/javascript.php'; ?>
<?php require PATH . '/theme/view/common/footer.php'; ?>