<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:converters="clr-namespace:App.Converters"
             x:Class="App.Pages.ChampionDetailPage"
             Title="Champion Page"
             BackgroundColor="Black">
    <ContentPage.ToolbarItems>
        <ToolbarItem Text="Edit"
                     Command="{Binding NaviagteToChampionAddEditPageCommand}"/>
    </ContentPage.ToolbarItems>

    <ContentPage.Resources>
        <converters:Base64ToImage x:Key="Base64ToImageConv"/>

        <Style TargetType="Label">
            <Setter Property="TextColor" Value="{StaticResource Primary}"/>
        </Style>
    </ContentPage.Resources>

    <ScrollView>
        <StackLayout Orientation="Vertical">
            <Image Source="{Binding Path=ChampionVM.Image, Converter={StaticResource Base64ToImageConv}}"/>

            <StackLayout Orientation="Horizontal" Padding="0,0,0,20">
                <Label Text="{Binding ChampionVM.Name}"
                       HorizontalOptions="Start"
                       FontSize="Title"/>

                <Image HorizontalOptions="End"/>
            </StackLayout>

            <Label Text="{Binding ChampionVM.Bio}"/>

            <Label Text="Characteristics"
                   FontSize="Title"
                   Padding="0,0,0,20"/>

            <CollectionView ItemsSource="{Binding ChampionVM.Characteristics}"
                            ItemsLayout="VerticalGrid, 3">
                <CollectionView.ItemTemplate>
                    <DataTemplate>
                        <Border Margin="10" Stroke="{StaticResource Primary}" StrokeThickness="3">
                            <StackLayout Orientation="Vertical" VerticalOptions="Center">
                                <Label HorizontalOptions="Center" Text="{Binding Key}"/>
                                <Label HorizontalOptions="Center" Text="{Binding Value}"/>
                            </StackLayout>
                        </Border>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>
        </StackLayout>
    </ScrollView>

</ContentPage>
