<?xml version="1.0" encoding="utf-8"?>

<ContentView 
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:mobile="clr-namespace:InABox.Mobile;assembly=InABox.Mobile.Shared"
    x:Class="InABox.Mobile.MobileRadioList"
    x:DataType="mobile:MobileRadioList">
    
    <ContentView.Resources>
        <mobile:BooleanToImageConverter x:Key="CheckedConverter" Checked="checked" Unchecked="unchecked"/>
    </ContentView.Resources>
    
    <ContentView.Content>
        <mobile:MobileCard 
            Padding="10" 
            BorderColor="{Binding BorderColor}" 
            BackgroundColor="{Binding BackgroundColor}" 
            IsClippedToBounds="True">
                <CollectionView  
                    x:Name="_list"
                    BackgroundColor="Transparent" 
                    ItemSizingStrategy="MeasureAllItems"
                    SelectionMode="None">
                    <CollectionView.ItemsLayout>
                        <LinearItemsLayout 
                            ItemSpacing="5" 
                            Orientation="Vertical" />
                    </CollectionView.ItemsLayout>
                    <CollectionView.ItemTemplate>
                        <DataTemplate 
                            x:DataType="mobile:MobileRadioListItem">
                            
                            <Grid
                                Grid.ColumnSpacing="5">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                
                                <Image
                                    Grid.Column="0"
                                    HeightRequest="20"
                                    WidthRequest="20"
                                    VerticalOptions="Center">
                                    <!-- Source="{Binding IsChecked, Converter={StaticResource CheckedConverter}, Mode=TwoWay}"  -->
                                    <Image.Triggers>
                                        <DataTrigger TargetType="Image" Binding="{Binding IsChecked}" Value="True">
                                            <Setter Property="Source" Value="checked" />
                                        </DataTrigger>
                                        <DataTrigger TargetType="Image" Binding="{Binding IsChecked}" Value="False">
                                            <Setter Property="Source" Value="unchecked" />
                                        </DataTrigger>
                                        </Image.Triggers>
                                    <Image.GestureRecognizers>
                                        <TapGestureRecognizer Tapped="Tapped"/>
                                    </Image.GestureRecognizers>
                                </Image>
                                
                                <Label
                                    Grid.Column="1"
                                    Text="{Binding Text}"
                                    TextColor="{Binding Source={RelativeSource AncestorType={x:Type mobile:MobileRadioList}}, Path=TextColor}"
                                    FontSize="Small"
                                    VerticalTextAlignment="Center"
                                    VerticalOptions="Fill">
                                    <Label.GestureRecognizers>
                                        <TapGestureRecognizer Tapped="Tapped"/>
                                    </Label.GestureRecognizers>
                                </Label>
                            </Grid>

                        </DataTemplate>
                    </CollectionView.ItemTemplate>
                </CollectionView>
            </mobile:MobileCard> 
        
    </ContentView.Content>
</ContentView>