<?xml version="1.0" encoding="utf-8" ?>
<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="TechTitans.Views.Components.EndOfYearRecap.MostPlayedArtistScreen"
             xmlns:custom="clr-namespace:TechTitans.Views.Components"
             xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit">
    <StackLayout VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand">
        <Image  x:Name="RedHalfCircle1"
        Source="half_circle.svg" 
        HeightRequest="128"
        Aspect="AspectFit">
            <Image.Behaviors>
                <toolkit:IconTintColorBehavior TintColor="Red" />
            </Image.Behaviors>
        </Image>
        <Label  VerticalOptions="Start" 
            HorizontalOptions="Center" 
            FontSize="25"
            Padding="20,40,20,20"
            TextColor="White" >
            <Label.Text>
                <MultiBinding StringFormat="{}Your top artist this year was {0}">
                    <Binding Path="MostPlayedArtistPercentile.Item1" />
                </MultiBinding>
            </Label.Text>
        </Label>
        <custom:Piechart Progress="{Binding MostPlayedArtistPercentile.Item2}"
        ProgressColor="Red"
        ProgressLeftColor="LightGreen"
        Size="140"
        TextColor="DarkGreen"
        Thickness="4" 
        HorizontalOptions="Center"
        VerticalOptions="Center"/>
        <Label  VerticalOptions="End" 
                HorizontalOptions="Center" 
                FontSize="25"
                Padding="20,40,20,20"
                TextColor="White" >
            <Label.Text>
                <MultiBinding StringFormat="{}Out of all your songs, {0:F2} were by {1}">
                    <Binding Path="MostPlayedArtistPercentile.Item2" />
                    <Binding Path="MostPlayedArtistPercentile.Item1" />
                </MultiBinding>
            </Label.Text>
        </Label>
        <Image  x:Name="RedHalfCircle2"
        Source="half_circle.svg" 
        HeightRequest="128"
        Aspect="AspectFit">
            <Image.Behaviors>
                <toolkit:IconTintColorBehavior TintColor="Red" />
            </Image.Behaviors>
        </Image>
    </StackLayout>
</ContentView>
