<!DOCTYPE html>
<html lang="ru">
{include file="account_header.tpl"}

<body>

    <div class="flex page-lk-ref">
        <div class="menu-lk">
            <div class="lk-burger">
                <div class="icon--lk-burger"></div>
            </div>
            <div class="menu-lk-inner">
                <a class="btn-link" href="/">
                    <div class="logo">
                        <img src="styles/assets//img/logo.svg">
                    </div>
                </a>
                <div class="flex">
                    <a class="btn-link" href="/">
                        <div class="btn-link__icon icon--lk-home"></div>
                        <div class="btn-link__text">Main</div>
                    </a>
                    {include file="multilang.tpl"}
                </div>
                {include file="token_price.tpl"}
                <div class="caption-wrapper">
                    <div class="caption">Menu</div>
                    <div class="caption-decor"></div>
                </div>
                {include file="account_menu.tpl"}
                <div class="caption-wrapper">
                    <div class="caption">Social media</div>
                    <div class="caption-decor"></div>
                </div>
                {include file="social_account.tpl"}
            </div>
        </div>
        <div class="content-lk">
            <div class="content-lk-inner">
                <div class="container" id="partnersApp">
                    <div class="complex-block-wrapper">
                        <div class="complex-block__bg"></div>
                        <div class="complex-block">
                            <div class="complex-block__caption">Your referral link</div>
                            <div class="input-wrapper">
                                <div class="input-extra-icon input-copy-btn" style="cursor: pointer">
                                    <div data-clipboard-target="#referral_desk" class="icon--lk-copy"></div>
                                </div>
                                <input id="referral_desk" type="text" translate="no" value="{$settings.site_url}/?ref={$userinfo.username}">
                            </div>
                            <div class="btn-common">
                                <div class="btn-common__icon icon--lk-folder"></div>
                                <a href="?a=referallinks" class="btn-common__text">Open promo materials</a>
                            </div>
                        </div>
                    </div>
                    <div class="complex-block-mob-wrapper">
                        <div class="complex-block-mob-bg">
                            <div class="complex-block-mob__bg-left"></div>
                            <div class="complex-block-mob">
                                <div class="complex-block-mob__inner">
                                    <div class="complex-block__caption">Your referral link</div>
                                    <div class="input-wrapper">
                                        <div class="input-extra-icon input-copy-btn" style="cursor: pointer">
                                            <div data-clipboard-target="#referral_mob" class="icon--lk-copy"></div>
                                        </div>
                                        <input id="referral_mob" type="text" translate="no" value="{$settings.site_url}/?ref={$userinfo.username}">
                                    </div>
                                    <div class="btn-common">
                                        <div class="btn-common__icon icon--lk-folder"></div>
                                        <div class="btn-common__text" onclick="window.location.href='?a=referallinks'">Open promo materials</div>
                                    </div>
                                </div>
                            </div>
                            <div class="complex-block-mob__bg-left right"></div>
                        </div>
                    </div>
                    <div class="lk-slim-block">
                        <div class="title-icon">
                            <div class="orange-icon">
                                <div class="icon--users"></div>
                            </div>
                            <div class="title-icon__title-wrapper">
                                <div class="title-icon__title1">Partners</div>
                                <div class="title-icon__title2">Invited partners</div>
                            </div>
                        </div>
                        <div class="btn-rect-wrapper">
                            <div class="btn-rect active">
                                <div class="btn-rect-inner stripe-highlight">
                                    <div class="btn-rect__text">{$meta_title|default:$settings.site_name} - Start</div>
                                </div>
                            </div>
                            <div class="btn-rect ">
                                <div class="btn-rect-inner ">
                                    <div class="btn-rect__text">{$meta_title|default:$settings.site_name} - PRO</div>
                                </div>
                            </div>
                        </div>
                        <div class="adv-item-wrapper flex-between">
                            <div class="adv-item arrow">
                                <div class="adv-item__val">8%</div>
                                <div class="adv-item__name">1st level</div>
                            </div>
                            <div class="adv-item arrow">
                                <div class="adv-item__val">2%</div>
                                <div class="adv-item__name">2nd level</div>
                            </div>
                            <div class="adv-item arrow">
                                <div class="adv-item__val">1%</div>
                                <div class="adv-item__name">3rd level</div>
                            </div>
                            <div class="adv-item arrow">
                                <div class="adv-item__val">0.5%</div>
                                <div class="adv-item__name">4th level</div>
                            </div>
                        </div>
                    </div>
					{literal}
                    <div class="lk-stats-ref row-2">
                        <div class="col">
                            <div class="caption-wrapper">
                                <div class="caption">Partners list</div>
                                <div class="caption-decor"></div>
                            </div>
							<div class="input-wrapper">
                            <div class="input-shadow"></div>
                            <input type="text" placeholder="Search partner" v-model="searchString">
                            </div>
                            <div class="lk-table lk-table-ref">
                                <div class="lk-table__row-header">
                                    <div class="lk-table__col">Email</div>
                                    <div class="lk-table__col">Level</div>
                                    <div class="lk-table__col">Active Invested</div>
                                    <div class="lk-table__col"></div>
                                </div>
                                <div class="frame-line"></div>
                                <div class="frame-inner notranslate" translate="no">
                                    <div class="lk-table__row" v-for="(partner, index) in partnersToDisplay" :key="index" v-if="index < countToShow">
                                        <div class="slide-list-title">
                                            <div class="lk-table__col">${partner.email}</div>
                                            <div class="lk-table__col">${partner.level} LVL</div>
                                            <div class="lk-table__col">
                                                <div class="flex middle">
                                                    <div class="lk-table__icon-amount icon--lk-income"></div>
                                                    <div class="icon-text">${partner.profit}</div>
                                                </div>
                                            </div>
                                            <div class="lk-table__col">
                                                <div class="flex middle">
                                                    <div class="slide-control__text">Details</div>
                                                    <div class="slide-control__icon"></div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="slide-list-content">
                                            <div class="lk-table__detail-row">
                                                <div class="lk-table__detail-name">Email:</div>
                                                <div class="lk-table__detail-text">${partner.email}</div>
                                            </div>
                                            <div class="lk-table__detail-row">
                                                <div class="lk-table__detail-name">Date registered:</div>
                                                <div class="lk-table__detail-text">${partner.date}</div>
                                            </div>
                                            <div class="lk-table__detail-row">
                                                <div class="lk-table__detail-name">Login:</div>
                                                <div class="lk-table__detail-text">${partner.login}</div>
                                            </div>
                                            <div class="lk-table__detail-row">
                                                <div class="lk-table__detail-name">Deposit:</div>
                                                <div class="lk-table__detail-text">$${partner.invested}</div>
                                            </div>
                                        </div>
                                    </div>
                                    <form class="tickets-wrapper form-wrapper" v-show="partnersToDisplay.length == 0">
                                        <div class="frame">
                                            <div class="frame-line"></div>
                                            <div class="frame-inner">
                                                <div class="flex middle">
                                                    <div class="form-item__icon gray-icon"><svg width="67" height="68" viewBox="0 0 67 68" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                            <path d="M45.216.5a9.5 9.5 0 0 1 7.153 3.249l11.784 13.485a9.5 9.5 0 0 1 2.347 6.251v21.052a9.5 9.5 0 0 1-2.322 6.223L52.506 64.223a9.5 9.5 0 0 1-7.178 3.277H21.672a9.5 9.5 0 0 1-7.178-3.277L2.822 50.76A9.5 9.5 0 0 1 .5 44.537V23.44a9.5 9.5 0 0 1 2.297-6.194l11.56-13.44A9.5 9.5 0 0 1 21.559.5h23.657Z" stroke="#fff" stroke-opacity=".2" />
                                                            <circle cx="1" cy="1" r="1" fill="#fff" />
                                                            <circle cx="66" cy="1" r="1" fill="#fff" />
                                                            <circle cx="1" cy="67" r="1" fill="#fff" />
                                                            <circle cx="66" cy="67" r="1" fill="#fff" />
                                                            <g clip-path="url(#clip0_227_1943)">
                                                                <path d="M21 22h24a1.333 1.333 0 0 1 1.334 1.333v21.334A1.333 1.333 0 0 1 45 46H21a1.334 1.334 0 0 1-1.333-1.333V23.333A1.334 1.334 0 0 1 21 22Zm22.667 14.667h-4.555a6.668 6.668 0 0 1-12.224 0h-4.554v6.666h21.333v-6.666Zm0-2.667v-9.333H22.334V34H29a4 4 0 0 0 8 0h6.667Z" fill="#fff" />
                                                            </g>
                                                            <defs>
                                                                <clipPath id="clip0_227_1943">
                                                                    <path fill="#fff" d="M17 18h32v32H17z" />
                                                                </clipPath>
                                                            </defs>
                                                        </svg></div>
                                                    <div class="form-item__text">Partners list is empty</div>
                                                </div>
                                            </div>
                                            <div class="frame-line"></div>
                                        </div>
                                    </form>
                                </div>
                                <div class="frame-line"></div>
                            </div>
                            <div class="line-bg-btn" v-show="this.countToShow < this.partnersToDisplay.length">
                                <a class="btn btn-gray line-bg" style="cursor: pointer" @click="showMore">
                                    <div class="btn-bg">
                                        <div class="btn-text">Load more</div>
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>
					{/literal}
                </div>
            </div>





{loaddata name="user_referrals" referrals=1 var=ur}
{assign var="totalUsers" value=$ur.referrals|count}
{assign var="activeUsers" value=0|count}
{assign var="partners" value=[]}				
{counter name=rex_referral start=0 print=0}

{foreach $ur.referrals as $level => $referrals}
{foreach $referrals as $referral}

{assign var="partner" value=[
            "login" => $referral.username,
            "level" => $level,
			"invested" => $referral.deposits_amount|number_format:2:".":",",
			"profit" => $referral.active_deposits_amount|number_format:2:".":","|fiat:$t.ec,
			"dateNum" => {counter name=rex_referral},
            "email" => $referral.email,
            "date" => $referral.join_date
]}

{append var="partners" value=$partner}
{**assign var="partners" value=array_merge($partners, [$partner]**}
{/foreach}
{/foreach}	


				
            <!-- <div class="lk-footer"> -->
            {include file="account_footer.tpl"}
            <!--  </div> -->
			
        </div>
    </div>
	
	
    {literal}
    <style>
        .shake {
            animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
            transform: translate3d(0, 0, 0);
        }

        @keyframes shake {

            10%,
            90% {
                transform: translate3d(-1px, 0, 0);
            }

            20%,
            80% {
                transform: translate3d(2px, 0, 0);
            }

            30%,
            50%,
            70% {
                transform: translate3d(-4px, 0, 0);
            }

            40%,
            60% {
                transform: translate3d(4px, 0, 0);
            }
        }

    </style>

   
    <script defer src="styles/assets/js/all.js"></script>
    <script src="styles/assets/js/axios.min.js"></script>
    <script src="styles/assets/js/vue.min.js"></script>
    {/literal}
    
	<script>
	const partners_json = {$partners|json_encode};
	console.log(partners_json);
	</script>

    {literal}
	<script>
    const perPage = 10;

    const partnersApp = new Vue({
        delimiters: ['${', '}'],
        el: '#partnersApp',
        data() {
            return {
                countToShow: 5,
                searchString: '',
                partners: partners_json,
                }
            },
        methods: {
            showMore() {
                if (this.countToShow < this.partnersToDisplay.length) {
                    this.countToShow += 5;
                }
            },
            partnersInvestedByLevel(level) {               
            },
            partnersProfitByLevel(level) {               
            },
            partnersNumberByLevel(level) {               
            },
            sortFunction(a, b) {
                return b.dateNum - a.dateNum;
            },
        },
        computed: {
            partnersToDisplay() {
                return this.partners.filter((partner) => {
                    return partner.login.toLowerCase().includes(this.searchString.toLowerCase());
                }).sort(this.sortFunction);
            },
            totalInvested() {               
            },
            totalProfit() {               
            }
        },
        watch: {
            searchString() {
                this.countToShow = 5;
            }
        },
        updated() {
            $('.slide-list-title').unbind('click');
            $('.slide-list-title').click(function(){
                $(this).parent().toggleClass('opened');
                $(this).toggleClass('expand').next().slideToggle(200)
            });
        }
    });
</script>

<script>
        function writeScript(src) {
            document.write(`<script type='text/javascript' src='${src}?v=${Date.now()}'><\/script>`);
        }

		writeScript('styles/assets/js/only_get_token.js');
    </script>
{/literal}

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>

<script>
        var clipboard = new ClipboardJS('.icon--lk-copy');

        clipboard.on('success', function(e) {
            //var tooltip = document.createElement('div');
            //tooltip.className = 'tooltip';
            //tooltip.textContent = 'Copied';
            //e.trigger.parentNode.appendChild(tooltip);
            //setTimeout(function() {
            //    e.trigger.parentNode.removeChild(tooltip);
            //}, 1000);
        });
</script>

</body>

</html>
