<UserControl
    xmlns="https://github.com/avaloniaui"
    xmlns:shared="clr-namespace:Tel.Egram.Views.Messenger.Explorer.Messages.Shared">
    
    <shared:MessageControl>
        
        <Grid
            ColumnDefinitions="auto,auto,auto,auto,*"
            RowDefinitions="auto,auto">
            
            <Panel
                Grid.Row="0"
                Grid.Column="0">
                <Ellipse />
                <Image
                    Source="resm:Tel.Egram.Application.Icons.Light.File32.png?assembly=Tel.Egram.Application" />
            </Panel>
            
            <TextBlock
                Grid.Row="0"
                Grid.Column="1"
                Text="{Binding Name}" />
            
            <TextBlock
                Grid.Row="0"
                Grid.Column="2"
                Text="{Binding Size}"
                Classes="Size" />
            
            <Button
                IsVisible="{Binding !IsDownloaded}"
                Command="{Binding DownloadCommand}"
                CommandParameter="{Binding}"
                Classes="Link"
                Grid.Row="0"
                Grid.Column="3">
                <TextBlock
                    Text="Download" />
            </Button>
            
            <Button
                IsVisible="{Binding IsDownloaded}"
                Command="{Binding ShowCommand}"
                CommandParameter="{Binding}"
                Classes="Link"
                Grid.Row="0"
                Grid.Column="3">
                <TextBlock
                    Text="Show" />
            </Button>
            
            <TextBlock
                Grid.Row="1"
                Grid.Column="0"
                Grid.ColumnSpan="5"
                Text="{Binding Text}"
                TextWrapping="Wrap"
                VerticalAlignment="Center" />
            
        </Grid>
        
    </shared:MessageControl>

    <UserControl.Styles>
        
        <Style Selector="Panel">
            <Setter Property="Margin" Value="0,0,6,0" />
        </Style>
        
        <Style Selector="Ellipse">
            <Setter Property="Width" Value="24" />
            <Setter Property="Height" Value="24" />
            <Setter Property="Fill" Value="#5195e1" />
            <Setter Property="Opacity" Value="0.9" />
        </Style>
        
        <Style Selector="Image">
            <Setter Property="Width" Value="16" />
            <Setter Property="Height" Value="16" />
            <Setter Property="Margin" Value="3" />
        </Style>
        
        <Style Selector="TextBlock">
            <Setter Property="VerticalAlignment" Value="Center" />
            <Setter Property="Margin" Value="0,0,8,0" />
        </Style>
        
        <Style Selector="TextBlock.Size">
            <Setter Property="Foreground" Value="#7d8fa0" />
            <Setter Property="FontSize" Value="11" />
        </Style>
        
        <Style Selector="Button.Link">
            <Setter Property="Margin" Value="0" />
            <Setter Property="Padding" Value="0" />
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="BorderThickness" Value="0" />
        </Style>
        
        <Style Selector="Button.Link TextBlock">
            <Setter Property="Foreground" Value="#5195e1" />
        </Style>
        
    </UserControl.Styles>
    
</UserControl>