<Page
    NavigationCacheMode="Disabled"
    x:Class="FoxTube.Pages.ChannelPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:FoxTube"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:pages="using:FoxTube.Pages"
    xmlns:controls="using:FoxTube.Controls"
    mc:Ignorable="d">

    <Page.Resources>
        <Storyboard x:Name="showHeader">
            <DoubleAnimation Storyboard.TargetName="ColapsedHeader" Storyboard.TargetProperty="Opacity" To="1" Duration="{StaticResource CardOpacityDuration}"/>
        </Storyboard>
        <Storyboard x:Name="hideHeader">
            <DoubleAnimation Storyboard.TargetName="ColapsedHeader" Storyboard.TargetProperty="Opacity" To="0" Duration="{StaticResource CardOpacityDuration}"/>
        </Storyboard>
        <Storyboard x:Name="showThumb">
            <DoubleAnimation Storyboard.TargetName="channelCover" Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="{StaticResource CardOpacityDuration}"/>
        </Storyboard>
        <Storyboard x:Name="hideThumb">
            <DoubleAnimation Storyboard.TargetName="channelCover" Storyboard.TargetProperty="Opacity" From="1" To="0" Duration="{StaticResource CardOpacityDuration}"/>
        </Storyboard>
    </Page.Resources>

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" SizeChanged="Grid_SizeChanged">
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition Height="auto"/>
        </Grid.RowDefinitions>

        <Pivot SelectedIndex="0" Name="content" IsHeaderItemsCarouselEnabled="False" SelectionChanged="Content_SelectionChanged">
            <PivotItem x:Uid="/Channel/videos" Header="Videos">
                <Grid>
                    <ParallaxView Source="{x:Bind videoScroll}" VerticalShift="100">
                        <Grid>
                            <Image Source="/Assets/ChannelCoverTemplate.png" Name="channelCover" Stretch="Uniform" HorizontalAlignment="Left" VerticalAlignment="Top" Opacity="0" ImageOpened="ChannelCover_ImageOpened"/>
                        </Grid>
                    </ParallaxView>
                    <ScrollViewer ViewChanged="ScrollViewer_ViewChanged" Name="videoScroll">
                        <StackPanel Background="{ThemeResource AppBarBackgroundThemeBrush}" Margin="0,300,0,0" Name="infoStack" Visibility="Visible">
                            <Grid Name="infoPanel">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="120"/>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="Auto"/>
                                </Grid.ColumnDefinitions>
                                <Ellipse HorizontalAlignment="Left" Margin="10,-40,0,0" Fill="Black" Width="100" Height="1"/>
                                <PersonPicture Name="avatar" HorizontalAlignment="Left" Margin="10,-40,0,0"/>
                                <StackPanel Grid.Column="1" Orientation="Vertical" Margin="10,0,0,5">
                                    <TextBlock Name="title" FontWeight="SemiBold" FontSize="22" Text="Channel name"/>
                                    <TextBlock Name="subscribers" Foreground="Gray" Text="1,000,000 subscribers"/>
                                    <TextBlock Name="videosCount" Foreground="Gray" Text="563,000 videos"/>
                                </StackPanel>
                                <TextBlock Grid.Column="2" VerticalAlignment="Bottom" HorizontalAlignment="Stretch" Height="50" Margin="10" TextAlignment="Center" Padding="0,16,0,0" Foreground="Gray">
                                <Hyperlink Click="Hyperlink_Click"><Run x:Uid="/Cards/login">Log in</Run></Hyperlink> <Run x:Uid="/Cards/tomanage">to manage your subscriptions</Run>
                                </TextBlock>

                                <Grid Visibility="Collapsed" Grid.Column="2" VerticalAlignment="Bottom" Margin="10" Name="subscriptionPane" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
                                    <Button x:Uid="/Cards/subscribe" Click="Subscribe_Click" Name="subscribe" Width="250" Height="50" Background="Red" Foreground="White" FontSize="18" FontWeight="SemiBold" Content="Subscirbe"/>
                                </Grid>
                            </Grid>
                            <pages:VideoGrid x:Name="videoList"/>
                            <controls:ShowMore Clicked="VideoMore_Clicked" x:Name="videoMore"/>
                        </StackPanel>
                    </ScrollViewer>
                </Grid>
            </PivotItem>
            <PivotItem x:Uid="/Channel/playlists" Header="Playlists">
                <ScrollViewer>
                    <Grid>
                        <StackPanel Margin="10" Visibility="Visible">
                            <pages:VideoGrid x:Name="playlistList"/>
                            <controls:ShowMore Clicked="ShowMorePlaylists_Click" x:Name="playlistMore"/>
                        </StackPanel>
                        <local:LoadingPage Visibility="Collapsed" x:Name="playlistLoading"/>
                    </Grid>
                </ScrollViewer>
            </PivotItem>
            <PivotItem x:Uid="/Channel/about" Header="About channel">
                <ScrollViewer>
                    <TextBlock Name="description" TextWrapping="WrapWholeWords" Margin="10" IsTextSelectionEnabled="True" Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum justo erat, dapibus sit amet maximus eget, volutpat non turpis. Suspendisse. "/>
                </ScrollViewer>
            </PivotItem>

            <Pivot.RightHeader>
                <StackPanel Orientation="Horizontal">
                    <StackPanel Orientation="Horizontal" Name="ColapsedHeader" Opacity="0">
                        <PersonPicture Height="32" Name="collapsedAvatar"/>
                        <TextBlock Text="Channel name" VerticalAlignment="Center" Margin="10,0" Name="collapsedTitle"/>
                        <Button x:Uid="/Cards/subscribe" Background="Red" Foreground="White" FontWeight="SemiBold" Content="Subscribe" Width="150" Name="collapsedBtn" Click="Subscribe_Click" Padding="2"/>
                    </StackPanel>
                    <AutoSuggestBox FontSize="14" x:Uid="/Channel/search" VerticalAlignment="Center" Width="250" Margin="8" PlaceholderText="Search on channel" QueryIcon="Find" Name="search" QuerySubmitted="AutoSuggestBox_QuerySubmitted"/>
                </StackPanel>
            </Pivot.RightHeader>
        </Pivot>
        
        <CommandBar Grid.Row="1" VerticalAlignment="Bottom" Name="commandBar">
            <AppBarButton x:Uid="/Channel/openWeb" Icon="Globe" Label="Open in browser" Name="inBrowser" Click="InBrowser_Click"/>
            <AppBarButton x:Uid="/Channel/refresh" Icon="Refresh" Label="Refresh" Name="refresh" Click="Refresh_Click"/>
            <AppBarButton x:Uid="/Channel/share" Icon="Share" Label="Share" Name="share" Click="Share_Click"/>
        </CommandBar>

        <local:LoadingPage Grid.RowSpan="2" Visibility="Collapsed" x:Name="loading" RefreshPage="Refresh_Click"/>
    </Grid>
</Page>
