<Page
    x:Class="FoxTube.Pages.CommentsPage"
    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">

    <Grid x:Name="grid">
        <Grid.RowDefinitions>
            <RowDefinition Height="auto"/>
            <RowDefinition Height="30"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <TextBox x:Uid="/CommentsPage/textbox" PlaceholderText="Add a public comment" Name="newComment" MinHeight="32" TextWrapping="Wrap" AcceptsReturn="True" Margin="0,0,40,0"/>
        <Button HorizontalAlignment="Right" Name="send" Click="send_Click" VerticalAlignment="Top" 
                    Height="32" Width="32" 
                    Margin="5,0" Padding="0"
                    Background="Transparent"
                    FontFamily="Segoe MDL2 Assets"
                    Content="&#xE122;" FontSize="30"/>
        <ProgressBar Name="sending" IsIndeterminate="True" Visibility="Collapsed" VerticalAlignment="Bottom" HorizontalAlignment="Stretch"/>

        <TextBlock Name="counter" Grid.Row="1" Text="[Comments count] Comments" VerticalAlignment="Center" FontWeight="SemiBold"/>
        <StackPanel Grid.Row="1" Orientation="Horizontal" HorizontalAlignment="Right">
            <TextBlock x:Uid="/CommentsPage/sortBy" Text="Sort by: " VerticalAlignment="Center"/>
            <Button Name="orderBtn" Background="Transparent" Content="Relevance" Foreground="Red" Padding="0" VerticalAlignment="Bottom" Margin="5,3">

                <Button.Flyout>
                    <MenuFlyout>
                        <MenuFlyoutItem x:Uid="/CommentsPage/relevance" Click="toRelevance_Click" Name="toRelevance" Text="Relevance"/>
                        <MenuFlyoutItem x:Uid="/CommentsPage/date" Click="toDate_Click" Name="toDate" Text="Date"/>
                    </MenuFlyout>
                </Button.Flyout>
            </Button>
        </StackPanel>

        <ScrollViewer Grid.Row="2" Name="scroll">
            <StackPanel>
                <StackPanel x:Name="list">
                    <StackPanel.ChildrenTransitions>
                        <TransitionCollection>
                            <EntranceThemeTransition IsStaggeringEnabled="True"/>
                        </TransitionCollection>
                    </StackPanel.ChildrenTransitions>
                </StackPanel>
                
                <controls:ShowMore x:Name="more" Clicked="ShowMore_Clicked"/>
            </StackPanel>
        </ScrollViewer>
    </Grid>
</Page>
