<UserControl
    xmlns="https://github.com/avaloniaui"
    xmlns:catalog="clr-namespace:Tel.Egram.Views.Messenger.Catalog">
    
    <Grid
        Width="220"
        ColumnDefinitions="*,auto"
        RowDefinitions="46,*"
        Background="#242e44">
        
        <TextBox
            Text="{Binding SearchText, Mode=TwoWay}"
            Grid.Row="0"
            Grid.Column="0" />
        
        <Button
            Grid.Row="0"
            Grid.Column="1">
            
            <Panel>
                <Ellipse />
                <Image Source="resm:Tel.Egram.Application.Icons.Light.More32.png?assembly=Tel.Egram.Application" />
            </Panel>
            
        </Button>
        
        <ListBox
            Grid.Row="1"
            Grid.ColumnSpan="2"
            Items="{Binding Entries}"
            SelectedItem="{Binding SelectedEntry, Mode=TwoWay}"
            BorderThickness="0"
            ScrollViewer.VerticalScrollBarVisibility="Hidden"
            ScrollViewer.HorizontalScrollBarVisibility="Disabled"
            Background="Transparent">
            
            <ListBox.ItemTemplate>
                <DataTemplate>
                    
                    <catalog:EntryControl />
                    
                </DataTemplate>
            </ListBox.ItemTemplate>
            
        </ListBox>
        
    </Grid>
    
    <UserControl.Styles>
        
        <Style Selector="TextBox">
            <Setter Property="Height" Value="28" />
            <Setter Property="Margin" Value="10,2,0,0" />
            <Setter Property="BorderThickness" Value="1" />
            <Setter Property="Foreground" Value="#ffffff" />
            <Setter Property="Background" Value="#1b2333" />
            <Setter Property="BorderBrush" Value="#3a455a" />
        </Style>
        
        <Style Selector="TextBox /template/ Border">
            <Setter Property="CornerRadius" Value="4" />
        </Style>
        
        <Style Selector="Button">
            <Setter Property="Width" Value="26" />
            <Setter Property="Height" Value="26" />
            <Setter Property="Margin" Value="6,2,6,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" />
            <Setter Property="Opacity" Value="0.8" />
        </Style>
        
        <Style Selector="Button Ellipse">
            <Setter Property="Width" Value="24" />
            <Setter Property="Height" Value="24" />
            <Setter Property="Fill" Value="#435270" />
            <Setter Property="Opacity" Value="0.8" />
        </Style>
        
        <Style Selector="ListBox">
            <Setter Property="BorderThickness" Value="0" />
            <Setter Property="Margin" Value="0"/>
            <Setter Property="Padding" Value="0"/>
        </Style>
        
        <Style Selector="ListBoxItem">
            <Setter Property="Padding" Value="0"/>
        </Style>
        
        <Style Selector="ListBoxItem:selected /template/ ContentPresenter">
            <Setter Property="Background" Value="Transparent" />
        </Style>
        
        <Style Selector="ListBoxItem:pointerover /template/ ContentPresenter">
            <Setter Property="Background" Value="Transparent" />
        </Style>
        
        <Style Selector="ListBoxItem Grid">
            <Setter Property="Margin" Value="6,2,0,2"/>
        </Style>
        
        <Style Selector="ListBoxItem Grid > Border">
            <Setter Property="CornerRadius" Value="15,0,0,15" />
            <Setter Property="Padding" Value="3,0,8,0" />
        </Style>
        
        <Style Selector="ListBoxItem:selected Grid > Border">
            <Setter Property="Background" Value="#435270" />
        </Style>
        
        <Style Selector="ListBoxItem Panel.Title">
            <Setter Property="Margin" Value="6,3,2,3"/>
        </Style>
        
        <Style Selector="ListBoxItem Panel.Indicator">
            <Setter Property="Margin" Value="2,3,8,3"/>
        </Style>
        
        <Style Selector="ListBoxItem TextBlock">
            <Setter Property="Foreground" Value="#92a3b3"/>
        </Style>
        
        <Style Selector="ListBoxItem:selected TextBlock">
            <Setter Property="Foreground" Value="#ffffff"/>
        </Style>
        
        <Style Selector="ListBoxItem Panel.Indicator > Border">
            <Setter Property="Margin" Value="0,2" />
            <Setter Property="Padding" Value="6,0" />
            <Setter Property="Background" Value="#435270" />
            <Setter Property="CornerRadius" Value="10" />
        </Style>
        
        <Style Selector="ListBoxItem Panel.Indicator > Border > TextBlock">
            <Setter Property="FontSize" Value="11" />
        </Style>
        
        <Style Selector="ListBoxItem:selected Panel.Indicator > Border">
            <Setter Property="Background" Value="#242e44" />
        </Style>
        
    </UserControl.Styles>
    
</UserControl>