<UserControl
    xmlns="https://github.com/avaloniaui"
    xmlns:shared="clr-namespace:Tel.Egram.Views.Shared">
    
    <Grid
        Width="516"
        Classes="ChatInfo"
        ColumnDefinitions="auto,*,auto"
        RowDefinitions="23,23,6">
            
        <shared:AvatarControl
            DataContext="{Binding Avatar}"
            Margin="16,0,8,0"
            Grid.Column="0"
            Grid.RowSpan="2"
            Source="{Binding Bitmap}"
            Color="{Binding Color}"
            TextColor="{Binding TextColor}"
            Text="{Binding Label}"
            Size="32" />
            
        <TextBlock
            Grid.Column="1"
            Grid.Row="0"
            VerticalAlignment="Bottom"
            Text="{Binding Title}"
            FontWeight="Medium"
            Foreground="#555555"
            FontSize="12" />
            
        <TextBlock
            Grid.Column="1"
            Grid.Row="1"
            VerticalAlignment="Top"
            Text="{Binding Label}"
            Foreground="#7d8fa0"
            FontSize="11" />
        
        <Button
            Grid.RowSpan="2"
            Grid.Column="2">
            
            <Panel>
                <Ellipse />
                <Image Source="resm:Tel.Egram.Application.Icons.Light.More32.png?assembly=Tel.Egram.Application" />
            </Panel>
            
        </Button>
        
        <Rectangle
            Grid.Row="2"
            Grid.Column="0"
            Grid.ColumnSpan="3" />
            
    </Grid>
    
    <UserControl.Styles>
        
        <Style Selector="Image">
            <Setter Property="Margin" Value="8" />
        </Style>
        
        <Style Selector="Button">
            <Setter Property="Width" Value="26" />
            <Setter Property="Height" Value="26" />
            <Setter Property="Margin" Value="0,2,10,0" />
            <Setter Property="Padding" Value="0" />
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="BorderThickness" Value="0" />
            <Setter Property="BorderBrush" Value="Transparent" />
        </Style>
        
        <Style Selector="Button Image">
            <Setter Property="Width" Value="14" />
            <Setter Property="Height" Value="14" />
        </Style>
        
        <Style Selector="Button Ellipse">
            <Setter Property="Width" Value="24" />
            <Setter Property="Height" Value="24" />
            <Setter Property="Fill" Value="#5f6e8c" />
        </Style>
        
        <Style Selector="Rectangle">
            <Setter Property="Fill">
                <Setter.Value>
                    <LinearGradientBrush 
                        StartPoint="0%,0%"
                        EndPoint="0%,100%">
                        <LinearGradientBrush.GradientStops>
                            <GradientStop
                                Offset="0"
                                Color="#f0f0f0"/>
                            <GradientStop
                                Offset="1"
                                Color="Transparent"/>
                        </LinearGradientBrush.GradientStops>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
        </Style>
        
    </UserControl.Styles>
        
</UserControl>