<?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="ex_CustomContentView.MyAvatarView"
             xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
             x:Name="root">
    <Grid Margin="0,0,0,4" 
          BindingContext="{x:Reference root}">
        <Grid.GestureRecognizers>
            <TapGestureRecognizer
                Tapped="OnTapped"
                Command="{Binding TapCommand, Source={x:Reference root}}"
                CommandParameter="{Binding TapCommandParameter, Source={x:Reference root}}"
                />
        </Grid.GestureRecognizers>
        <Border Stroke="{Binding Color}" StrokeThickness="4"
                Margin="0, 2" Padding="8,4">
            <Border.StrokeShape>
                <RoundRectangle CornerRadius="30, 30, 30, 0"/>
            </Border.StrokeShape>
            <Grid ColumnDefinitions="Auto, *, Auto, Auto" RowDefinitions="2*, *"
                    ColumnSpacing="10" MinimumHeightRequest="74">
                <Frame Grid.RowSpan="2" 
                        WidthRequest="60" HeightRequest="60"
                        Padding="0" CornerRadius="30" Margin="0"
                        IsClippedToBounds="True"
                        BorderColor="{Binding Color}" HasShadow="True" >
                    <Frame.Shadow>
                        <Shadow Brush="{Binding Color}" Offset="3, 2"
                                Radius="2" Opacity="0.8"/>
                    </Frame.Shadow>
                    <Image Source="{Binding ImageName}"/>
                </Frame>
                <Label Text="{Binding Title}" Grid.Column="1" FontSize="Medium"
                       VerticalOptions="Center"/>
                <Label Text="{Binding SubTitle}"
                        Grid.Column="1" Grid.Row="1" FontSize="Small"/>
                <ImageButton Source="info_circle.png" 
                             WidthRequest="28" MinimumWidthRequest="20"
                             HeightRequest="28" MinimumHeightRequest="20"
                             Grid.Column="2" Grid.RowSpan="2"
                             Clicked="OnInfoClicked"
                             Command="{Binding InfoCommand}"
                             CommandParameter="{Binding InfoCommandParameter}">
                    <ImageButton.Behaviors>
                        <toolkit:IconTintColorBehavior 
                            TintColor="{AppThemeBinding Light=Black, Dark=White}"/>
                    </ImageButton.Behaviors>
                </ImageButton>
                <ImageButton Source="chevron_right_circle.png" x:Name="nextButton"
                             WidthRequest="28" MinimumWidthRequest="20"
                             HeightRequest="28" MinimumHeightRequest="20"
                             Grid.Column="3" Grid.RowSpan="2"
                             Command="{Binding NextCommand}"
                             CommandParameter="{Binding NextCommandParameter}">
                    <ImageButton.Behaviors>
                        <toolkit:IconTintColorBehavior 
                            TintColor="{AppThemeBinding Light=Black, Dark=White}"/>
                    </ImageButton.Behaviors>
                </ImageButton>
            </Grid>
        </Border>
    </Grid>
</ContentView>
