<UserControl
    x:Class="FoxTube.Controls.CommentCard"
    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"
    mc:Ignorable="d"
    d:DesignWidth="400">

    <Grid Margin="2">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="60"/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <PersonPicture Tapped="avatar_Tapped" Name="avatar" Height="50" Margin="5" VerticalAlignment="Top"/>
        <StackPanel Grid.Column="1" Margin="5">
            <TextBlock Text="Channel name" Name="author" TextWrapping="WrapWholeWords" Foreground="Gray" FontSize="13"/>
            <Border Visibility="Collapsed" Name="specialAuthor" HorizontalAlignment="Left" Background="Red" CornerRadius="5">
                <TextBlock Text="Channelname" Foreground="White" TextWrapping="WrapWholeWords" FontSize="13" Padding="2,0,2,2"/>
            </Border>
            <TextBlock Text="[Publish date] (edited)" Name="meta" TextWrapping="WrapWholeWords" Foreground="Gray" FontSize="13"/>
            <TextBlock Name="text" IsTextSelectionEnabled="True" TextWrapping="WrapWholeWords" Text="Content"/>

            <StackPanel Name="editor" Visibility="Collapsed">
                <TextBox Name="editorText" Text="[Content]" AcceptsReturn="True" TextWrapping="Wrap" TextChanged="editorText_TextChanged"/>
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Margin="0,5,0,5">
                    <Button x:Uid="/CommentsPage/editorDelete" FontFamily="Segoe MDL2 Assets" Content="&#xE107;" Background="Transparent" FontSize="20" Foreground="Red" Name="deleteComment" Click="DeleteComment_Click"/>
                    <Button x:Uid="/CommentsPage/editorCancel" Name="editorClose" Content="Cancel" Click="editorClose_Click" Margin="5, 0"/>
                    <Button x:Uid="/CommentsPage/editorSubmit" Name="editorSend" Content="Submit" Click="editorSend_Click"/>
                </StackPanel>
            </StackPanel>

            <StackPanel Orientation="Horizontal" Name="toolbar">
                <TextBlock Name="upvote" Foreground="Gray" Padding="0"
                           VerticalAlignment="Center" Margin="0,0,5,0"
                           FontFamily="Segoe MDL2 Assets" Text="&#xE19F;" FontSize="20"/>
                <TextBlock Name="rating" Foreground="Gray" VerticalAlignment="Center" Text="123"/>

                <Button Click="showReplies_Click" Name="showReplies" Background="Transparent" Foreground="Gray" Padding="5,0" Margin="5,0"
                                    VerticalContentAlignment="Center" HorizontalContentAlignment="Center"
                                    Height="35">
                    <StackPanel Orientation="Horizontal">
                        <TextBlock FontFamily="Segoe MDL2 Assets" Text="&#xEC42;" Margin="0,0,5,0" FontSize="20"/>
                        <TextBlock Text="123"/>
                    </StackPanel>
                </Button>

                <Button Click="replyBtn_Click" Name="replyBtn" Background="Transparent" Foreground="Gray" Padding="5,0" Margin="5,0"
                                    VerticalContentAlignment="Center" HorizontalContentAlignment="Center"
                                    Height="35">
                    <StackPanel Orientation="Horizontal">
                        <TextBlock FontFamily="Segoe MDL2 Assets" Text="&#xEE35;" FontSize="20"/>
                        <TextBlock x:Uid="/CommentsPage/reply" Text="Reply"/>
                    </StackPanel>
                </Button>

                <Button Click="editBtn_Click" Visibility="Collapsed" Name="editBtn" Background="Transparent" Foreground="Gray" Padding="5,0" Margin="5,0"
                                    VerticalContentAlignment="Center" HorizontalContentAlignment="Center"
                                    Height="35">
                    <StackPanel Orientation="Horizontal">
                        <TextBlock FontFamily="Segoe MDL2 Assets" Text="&#xE104;" FontSize="20"/>
                        <TextBlock x:Uid="/CommentsPage/edit" Text="Edit"/>
                    </StackPanel>
                </Button>

                <Button x:Name="spam" Background="Transparent" Foreground="Gray" Padding="5,0" Margin="5,0" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" Height="35" Content="&#x205D;">
                    <Button.Flyout>
                        <MenuFlyout>
                            <MenuFlyoutItem x:Uid="/CommentsPage/spam" Icon="Flag" Text="Report as spam" Click="MarkAsSpam_Click"/>
                        </MenuFlyout>
                    </Button.Flyout>
                </Button>
            </StackPanel>

            <Grid Name="replyEditor" Visibility="Collapsed">
                <TextBox x:Uid="/CommentsPage/replyBox" Name="reply" TextChanged="reply_TextChanged" TextWrapping="Wrap" AcceptsReturn="True" MaxLength="500"
                             Margin="2,0,34,0"
                             PlaceholderText="Enter your reply..."/>
                <Button Name="send" Click="send_Click" IsEnabled="True" HorizontalAlignment="Right" VerticalAlignment="Top"
                            Width="32" Height="32" Padding="0"
                            Background="Transparent"
                            FontFamily="Segoe MDL2 Assets"
                            FontSize="30"
                            Content="&#xE122;"/>
            </Grid>
            <ProgressBar Grid.Row="1" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" IsIndeterminate="True" Name="processing" Visibility="Collapsed"/>

            <StackPanel Name="replies" Visibility="Collapsed">
                <StackPanel.ChildrenTransitions>
                    <TransitionCollection>
                        <EntranceThemeTransition IsStaggeringEnabled="True"/>
                    </TransitionCollection>
                </StackPanel.ChildrenTransitions>
            </StackPanel>
        </StackPanel>
    </Grid>
</UserControl>
