<UserControl
    x:Class="FoxTube.Controls.Chat"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:controls="using:FoxTube.Controls"
    mc:Ignorable="d"
    d:DesignHeight="600"
    d:DesignWidth="400">

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto"/>
            <RowDefinition/>
        </Grid.RowDefinitions>

        <Grid Name="inputField">
            <TextBox x:Uid="/Chat/box" Margin="5,5,42,5" PlaceholderText="Send a message" Name="newMessage" VerticalAlignment="Center" MinHeight="32" TextWrapping="Wrap" AcceptsReturn="True"/>
            <Button HorizontalAlignment="Right" Name="send" Click="send_Click"  VerticalAlignment="Top" 
                    Height="32" Width="32" 
                    Margin="0,5,5,0" Padding="0"
                    Background="Transparent"
                    FontFamily="Segoe MDL2 Assets"
                    Content="&#xE122;" FontSize="30"/>
        </Grid>

        <ListView Name="list" Grid.Row="1" SelectionMode="None">
            <ListView.ItemTemplate>
                <DataTemplate x:DataType="controls:ChatMessage">
                    <Border BorderBrush="Red" BorderThickness="{Binding Path=BorderThickness}" CornerRadius="5" HorizontalAlignment="Stretch" Background="{Binding Path=Background}" Margin="0,2">
                        <Grid Margin="0,5,5,0">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition/>
                            </Grid.ColumnDefinitions>
                            <StackPanel Orientation="Horizontal" VerticalAlignment="Top" Margin="5,0">
                                <PersonPicture Height="20">
                                    <PersonPicture.ProfilePicture>
                                        <BitmapImage UriSource="{Binding Path=Avatar}" DecodePixelHeight="20" DecodePixelWidth="20"/>
                                    </PersonPicture.ProfilePicture>
                                </PersonPicture>
                                <FontIcon Glyph="&#xEC61;" Margin="2,0" Visibility="{Binding Path=IsVerified}">
                                    <ToolTipService.ToolTip>
                                        <TextBlock x:Uid="/Chat/verified"/>
                                    </ToolTipService.ToolTip>
                                </FontIcon>
                                <FontIcon Glyph="&#xEC1B;" Margin="2,0" Visibility="{Binding Path=IsModerator}">
                                    <ToolTipService.ToolTip>
                                        <TextBlock x:Uid="/Chat/moder"/>
                                    </ToolTipService.ToolTip>
                                </FontIcon>
                                <FontIcon Glyph="&#xECA7;" Margin="2,0" Visibility="{Binding Path=IsOwner}">
                                    <ToolTipService.ToolTip>
                                        <TextBlock x:Uid="/Chat/owner"/>
                                    </ToolTipService.ToolTip>
                                </FontIcon>
                                <FontIcon Glyph="&#xE735;" Margin="2,0" Visibility="{Binding Path=IsSponsor}">
                                    <ToolTipService.ToolTip>
                                        <TextBlock x:Uid="/Chat/sponsor"/>
                                    </ToolTipService.ToolTip>
                                </FontIcon>
                            </StackPanel>
                            <StackPanel Orientation="Horizontal" Grid.Column="1" VerticalAlignment="Top" Margin="0,0,5,0">
                                <HyperlinkButton Tag="{Binding Path=ChannelId}" Margin="0,-6,0,0" FontWeight="Bold" Click="HyperlinkButton_Click">
                                    <ToolTipService.ToolTip>
                                        <TextBlock Text="{Binding Path=Author}" Style="{StaticResource CaptionTextBlockStyle}"/>
                                    </ToolTipService.ToolTip>
                                    <TextBlock TextTrimming="CharacterEllipsis" MaxWidth="150" Text="{Binding Path=Author}"/>
                                </HyperlinkButton>
                                <TextBlock Text=":"/>
                            </StackPanel>
                            <GroupItem Content="{Binding Path=Message}" Grid.Column="2"/>
                        </Grid>
                    </Border>
                </DataTemplate>
            </ListView.ItemTemplate>
            <ListViewItem>
                <TextBlock x:Uid="/Chat/welcome" Text="Welcome to the chat room" Foreground="Gray"/>
            </ListViewItem>
        </ListView>
    </Grid>
</UserControl>
