@using WotBlitzStatisticsPro.Blazor.Helpers
@inherits PlayerInfoTanksTreeBase;
<div style="overflow-y: auto; overflow-x: auto;">
    <svg 
        xmlns="http://www.w3.org/2000/svg" 
        width="1400" 
        height="@FrameHeigth" 
        style="background-color: darkcyan; ">
    @for (int i = 0; i < 3; i++)
        {
            <svg 
                xmlns="http://www.w3.org/2000/svg" 
                x="20"
                y="@(i * (CardWidth + 20) + 20)"
                width="@CardWidth"
                height="@CardHeigth">
                <g>
                    <!--Rect fill = #275950 - researched, #2E353B - unresearched, #66502b - prem--> 
                    <rect
                        x="0"
                        y="0"
                        width="@CardWidth"
                        height="@CardHeigth"
                        rx="10"
                        ry="10"
                        fill="@(i == 0 ? "#275950" : (i == 1 ? "#2E353B" : "#66502b"))"
                        stroke="#4a8777">
                    </rect>

                    <!--Tank type-->
                    <image x="7" y="7" width="25" height="25" href="@TanksList.ToArray()[i].TankTypeId.TankTypeAsset(i == 2)"/>
                    <!--Tank tier-->
                    <text x="33" y="4" fill="@(i == 2 ? @Constants.ClanTagColor : "white")" text-anchor="start" alignment-baseline="before-edge" font-family="Segoe UI" font-size="19">
                        @TanksList.ToArray()[i].Tier.RomanNumber()
                    </text>
                    <!--TankImage-->
                    <image x="@((CardWidth - 95) / 2)" y="@((CardHeigth - 70) / 2)" width="95" height="70" href="@TanksList.ToArray()[i].PreviewImage"/>
                    <!--TankName-->
                    <text x="33" y="@(CardHeigth - 25)" fill="@(i == 2 ? @Constants.ClanTagColor : "white")" text-anchor="start" alignment-baseline="before-edge" font-family="Segoe UI" font-size="12">
                        @TanksList.ToArray()[i].Name
                    </text>

                    <!--Researched: Mastery, Winrate, AvgDmg, Battles, LastBattle-->
                    @if(i == 0 || i == 2)
                    {
                        <g>
                            <!--Mastery-->
                            <image x="7" y="@(CardHeigth - 26)" width="20" height="20" href="@TanksList.ToArray()[i].MarkOfMastery.IconAsset()"/>
                            <!--Winrate-->
                            <image x="7" y="40" width="20" height="20" href="icons/details.wins.scale-200.png"/>
                            <text x="32" y="40" fill="white" text-anchor="start" alignment-baseline="before-edge" font-family="Segoe UI" font-size="12">
                                @(TanksList.ToArray()[i].WinRate.ToString("N0"))%
                            </text>
                            <line x1="8" y1="60" x2="58" y2="60" style="@($"stroke:{TanksList.ToArray()[i].WinRate.ScaleColor()};stroke-width:3")" />
                            <!--AvgDmg-->
                            <image x="@(CardWidth - 62)" y="40" width="20" height="20" href="icons/damage.scale-200.png"/>
                            <text x="@(CardWidth - 37)" y="40" fill="white" text-anchor="start" alignment-baseline="before-edge" font-family="Segoe UI" font-size="12">
                                @TanksList.ToArray()[i].AvgDamage.ToString("N0")
                            </text>
                            <!--Battles-->
                            <image x="@(CardWidth - 62)" y="9" width="20" height="20" href="icons/details.battles.scale-200.png"/>
                            <text x="@(CardWidth - 37)" y="9" fill="white" text-anchor="start" alignment-baseline="before-edge" font-family="Segoe UI" font-size="12">
                                @TanksList.ToArray()[i].Battles.ToString("N0")
                            </text>
                            <!--Last battle-->
                            <image x="@(CardWidth - 83)" y="@(CardHeigth - 23)" width="16" height="16" href="icons/calendar.scale-200.png"/>
                            <text x="@(CardWidth - 60)" y="@(CardHeigth - 23)" fill="white" text-anchor="start" alignment-baseline="before-edge" font-family="Segoe UI" font-size="12">
                                @TanksList.ToArray()[i].LastBattleTime.ToString("d")
                            </text>
                        </g>
                    }
                    <!--Unresearched: XP, Credits-->
                    @if(i == 1)
                    {
                        <g>
                            <!--XP-->
                            <image x="@(CardWidth - 84)" y="9" width="20" height="20" href="icons/xp.avg.scale-200.png"/>
                            <text x="@(CardWidth - 60)" y="9" fill="white" text-anchor="start" alignment-baseline="before-edge" font-family="Segoe UI" font-size="12">
                                203.5 K
                            </text>
                            <!--Credits-->
                            <image x="@(CardWidth - 84)" y="@(CardHeigth - 23)" width="20" height="20" href="icons/encyclopedia.vehicle.credits.scale-200.png"/>
                            <text x="@(CardWidth - 60)" y="@(CardHeigth - 23)" fill="white" text-anchor="start" alignment-baseline="before-edge" font-family="Segoe UI" font-size="12">
                                8 500 K
                            </text>
                        </g>
                    }
                </g>
            </svg>
        }
    </svg>
</div>