<div class="d-flex justify-content-between">
    <div class="p-2 mx-1" style="flex: 1;">
        <img src="{$avatar}" class="img-responsive" alt="">
    </div>
    <div class="p-2 mx-1" style="flex: 2;">
        <p class="py-2 mb-0"><strong>Name:</strong> {$user.name}</p>
        <p class="py-2 mb-0"><strong>Email:</strong> {$user.email}</p>
        <p class="py-2 mb-0"><strong>Age:</strong> {$user.age}</p>
        <p class="py-2 mb-0"><strong>Phone:</strong> {$user.phone}</p>
        <p class="py-2 mb-0"><strong>City:</strong> {$user.city}</p>
    </div>
    <div class="p-2 mx-1" style="flex: 2;">
        <p class="py-2 mb-0"><strong>Gender:</strong> {$user.gender}</p>
        <p class="py-2 mb-0"><strong>Balance:</strong> {$user.balance}</p>
        <p class="py-2 mb-0"><strong>Followers:</strong> {$user.followers}</p>
        <p class="py-2 mb-0"><strong>Likes:</strong> {$user.likes}</p>
    </div>
    <div class="p-2 mx-1" style="flex: 2;">
        <p class="py-2 mb-0"><strong>Views:</strong> {$user.views}</p>
        <p class="py-2 mb-0"><strong>Pay Methods:</strong> {$user.pay_methods|escape}</p>
        <p class="py-2 mb-0"><strong>Purchases:</strong> {$user.purchases}</p>
        <p class="py-2 mb-0"><strong>Sales:</strong> {$user.sales}</p>
    </div>
</div>
<div class="d-flex justify-content-between">
    <div class="flex-fill p-1 darkbg1 text-white text-center mx-1">
        Онлайн-чат
    </div>
    <div class="flex-fill p-1 darkbg2 text-white text-center mx-1">
        Расписание
    </div>
    <div class="flex-fill p-1 darkbg3 text-white text-center mx-1">
        Задания
    </div>
    <div class="flex-fill p-1 darkbg4 text-white text-center mx-1">
        Видеонаблюдение
    </div>
</div>
<div class="d-flex justify-content-between mt-2">
    <div class="flex-fill p-1 darkbg5 text-white text-center mx-1">
        Мои покупки
    </div>
    <div class="flex-fill p-1 darkbg6 text-white text-center mx-1">
        Мои курсы
    </div>
    <div class="flex-fill p-1 darkbg7 text-white text-center mx-1">
        Избранное
    </div>
    <div class="flex-fill p-1 darkbg8 text-dark text-center mx-1">
        Отзывы
    </div>
</div>
<pre class="mt-3 fs-6"><strong>BiO:</strong> {$user.bio|escape}</pre>
<div style="font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; padding: 20px; border-radius: 12px; box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); transition: transform 0.3s;">
    <p style="margin: 10px 0; font-size: 18px; font-weight: 600;">
        Реферральный код:
        <strong style="color: #4299e1;">{$referralCode}</strong>
        <sup>
            <strong style="margin: 10px 0; font-size: 10px; font-weight: 600; color: #718096; cursor: pointer;">
                Процент от покупки: {htmlspecialchars($config['referral_reward_percentage'])} %
            </strong>
        </sup>
    </p>
    <p style="margin: 0; font-size: 18px; font-weight: 600;">Количество реферралов:
        <strong style="color: #48bb78;">{$referralsCount}</strong>
    </p>
    <p style="margin: 10px 0; font-size: 18px; font-weight: 600;">Общая сумма вознаграждения:
        <strong style="color: #d69e2e;">{$referralsTotalReward}</strong>
    </p>
    <p style="margin: 10px 0; font-size: 18px; font-weight: 600;">Общая сумма процента:
        <strong style="color: #d69e2e;">{$allPercentage}%</strong>
    </p>
    <p style="margin: 10px 0; font-size: 13px; font-weight: 600;">
        Сумма вознаграждения за последние 7 дней:
        <strong style="color: #38a169;">
            {$total_reward_last_7_days}
            <sup style="cursor: pointer; transition: transform 0.3s; {if $percentage_change_7 > 0} color: #38a169; {else} color: #e53e3e; {/if}">
                {$percentage_change_7}%
            </sup>
        </strong>
    </p>
    <p style="margin: 10px 0; font-size: 13px; font-weight: 600;">
        Сумма вознаграждения за последние 30 дней:
        <strong style="color: #38a169;">
            {$total_reward_last_30_days}
            <sup style="cursor: pointer; transition: transform 0.3s; {if $percentage_change_30 > 0} color: #38a169; {else} color: #e53e3e; {/if}">
                {$percentage_change_30}%
            </sup>
        </strong>
    </p>

    <label for="referral-url" style="font-size: 16px; color: #4a5568; display: block; margin-bottom: 5px;">
        Реферральная ссылка
    </label>
    <input id="referral-url" class="form-control" style="width: 100%; padding: 12px; font-size: 16px; border: 1px solid rgba(203,213,224,0); border-radius: 8px; outline: none; transition: box-shadow 0.3s;" name="referral-url" disabled value="{$referralUrl}" onfocus="this.style.boxShadow='0 0 10px rgba(66, 153, 225, 0.5)'" onblur="this.style.boxShadow='none'">
    <hr>

    {include file='main/datatable.tpl' tableTitle="Приглашенные реферралы:"
    theads=["ID", "Дата регистрации", "Имя", "Общая сумма оплат", "Процент начислений", "Сумма вознаграждения"]
    data=$referrals }
</div>
{*
{if $access.update}
<form method="post" action="">
    <label for="new_name">New Name:</label>
    <input class="form-control" type="text" id="new_name" name="new_name" value="{$name}" required>
    <br>
    <label for="new_bio">New Bio:</label>
    <textarea class="form-control" id="new_bio" name="new_bio" required>{$bio}</textarea>
    <br>
    <button type="submit" class="btn btn-primary w-100">Save</button>
</form>
{/if}*}
