@{
    Layout = "_GameLayout";
}

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

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

    <!-- Ranking Content Panel -->
    <div class="ranking-panel">
        <!-- Corner Rectangle -->
        <img class="panel-corner-rectangle" src="~/img/Rectangle_red_T.png" alt="" />
        <!-- Header -->
        <div class="ranking-header">
            <!-- Triangles -->
            <div class="header-triangles">
                <span class="triangle red">▲</span>
                <span class="triangle red">▲</span>
            </div>
            
            <!-- Switch Button -->
            <a href="@Url.Action("MonthlyRanking", "Home")" class="switch-button">
                <img class="switch-icon" src="~/img/017-strategy.png" alt="" />
                <span class="switch-text">Switch to Monthy</span>
            </a>
            
            <!-- Title -->
            <div class="ranking-title daily">
                <span class="title-line">Daily</span>
                <span class="title-line">Ranking</span>
            </div>
        </div>

        <!-- Table Header -->
        <div class="ranking-table-header">
            <div class="col-top">Top</div>
            <div class="col-player">Player</div>
            <div class="col-rewards">Rewards</div>
        </div>

        <!-- Table Body -->
        <div class="ranking-table-body">
            <!-- Row 1 - Gold -->
            <div class="ranking-row gold">
                <div class="col-top">1</div>
                <div class="col-player">0912 345 678</div>
                <div class="col-rewards"><span class="reward-value">+1.500</span> <span class="reward-unit">Coins</span></div>
            </div>
            
            <!-- Row 2 - Silver -->
            <div class="ranking-row silver">
                <div class="col-top">2</div>
                <div class="col-player">0912 345 678</div>
                <div class="col-rewards"><span class="reward-value">+500</span> <span class="reward-unit">Coins</span></div>
            </div>
            
            <!-- Row 3 - Bronze -->
            <div class="ranking-row bronze">
                <div class="col-top">3</div>
                <div class="col-player">0912 345 678</div>
                <div class="col-rewards"><span class="reward-value">+250</span> <span class="reward-unit">Coins</span></div>
            </div>
            
            <!-- Row 4 -->
            <div class="ranking-row">
                <div class="col-top">4</div>
                <div class="col-player">0912 345 678</div>
                <div class="col-rewards"><span class="reward-value">+150</span> <span class="reward-unit">Coins</span></div>
            </div>
            
            <!-- Row 5 -->
            <div class="ranking-row">
                <div class="col-top">5</div>
                <div class="col-player">0912 345 678</div>
                <div class="col-rewards"><span class="reward-value">+75</span> <span class="reward-unit">Coins</span></div>
            </div>
            
            <!-- Row 6 -->
            <div class="ranking-row">
                <div class="col-top">6</div>
                <div class="col-player">0912 345 678</div>
                <div class="col-rewards"><span class="reward-value">+50</span> <span class="reward-unit">Coins</span></div>
            </div>
        </div>
    </div>
</div>
