@{
    Layout = "_GameLayout";
}

@section Styles {
    <link rel="stylesheet" href="~/css/sicbo-account.css" />
}

<div class="home">
    <!-- Background Image -->
    <img class="image" src="~/img/image-2.png" />
    
    <!-- Reuse Game Menu -->
    <partial name="_GameMenu" />

    <!-- Account Content Panel -->
    <div class="account-panel">
        <!-- Left Side - Avatar -->
        <div class="account-avatar-section">
            <div class="avatar-frame">
                <img class="avatar-image" src="~/img/avatar.png" alt="Avatar" />
            </div>
            <div class="avatar-name">Rosé Stark</div>
        </div>

        <!-- Right Side - Account Info -->
        <div class="account-info-section">
            <!-- Phone Number -->
            <div class="info-row">
                <span class="info-label">Phone number</span>
                <span class="info-value">0912 345 678</span>
            </div>

            <!-- Name -->
            <div class="info-row">
                <span class="info-label">Name</span>
                <span class="info-value">Rosé Stark</span>
            </div>

            <!-- Total Coins -->
            <div class="info-row with-icon">
                <div class="info-content">
                    <span class="info-label">Total coins</span>
                    <span class="info-value coins">140.000</span>
                </div>
                <img class="settings-icon" src="~/img/042-settings.png" alt="Settings" />
            </div>

            <!-- Total Value Today -->
            <div class="info-row">
                <span class="info-label">Total value today</span>
                <span class="info-value money">$520.000</span>
            </div>

            <!-- Total Value This Month -->
            <div class="info-row">
                <span class="info-label">Total value this month</span>
                <span class="info-value money">$28.520.000</span>
            </div>
        </div>
    </div>
</div>
