<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"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid Name="grid">
            <Grid.RowDefinitions>
                <RowDefinition Height="auto"/>
                <RowDefinition Height="30"/>
            </Grid.RowDefinitions>
            <TextBox x:Uid="/CommentsPage/textbox" Margin="5,5,42,5" PlaceholderText="Add a public comment" Name="newComment" 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"/>
            <ProgressBar Name="sending" IsIndeterminate="True" Foreground="Red" Visibility="Collapsed" VerticalAlignment="Bottom" HorizontalAlignment="Stretch"/>

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

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