<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"
    xmlns:classes="using:FoxTube.Classes"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <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>
    </Page.Resources>

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

        <Pivot 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 ApplicationPageBackgroundThemeBrush}" Name="infoStack">
                            <Grid Name="infoPanel" Height="80">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="120"/>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="Auto"/>
                                </Grid.ColumnDefinitions>
                                <Ellipse Fill="{ThemeResource ApplicationPageBackgroundThemeBrush}" Margin="5,-30,5,0"/>
                                <PersonPicture Name="avatar" Margin="10,-30,10,0"/>
                                
                                <StackPanel Grid.Column="1">
                                    <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 x:Name="logIn" Grid.Column="2" VerticalAlignment="Center" Margin="10" Width="250" HorizontalTextAlignment="Center" 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>

                                <Button Visibility="Collapsed" x:Name="subscribe" x:Uid="/Cards/subscribe" Grid.Column="2" Content="Subscribe" Height="50" Width="250" Margin="10" VerticalAlignment="Center" FontSize="18" FontWeight="SemiBold" Foreground="White" Background="Red"/>
                            </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">
                <Grid>
                    <ScrollViewer>
                        <StackPanel>
                            <pages:VideoGrid x:Name="playlistList"/>
                            <controls:ShowMore Clicked="ShowMorePlaylists_Click" x:Name="playlistMore"/>
                        </StackPanel>
                    </ScrollViewer>
                    <local:LoadingPage Visibility="Collapsed" x:Name="playlistLoading" RefreshPage="Refresh_Click"/>
                </Grid>
            </PivotItem>
            <PivotItem x:Uid="/Channel/about" Header="About channel">
                <ScrollViewer>
                    <TextBlock Name="description" TextWrapping="WrapWholeWords" 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" Margin="10,0">
                    <StackPanel Orientation="Horizontal" Name="ColapsedHeader" Opacity="0" Margin="10,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" Visibility="Collapsed"/>
                    </StackPanel>
                    <AutoSuggestBox x:Uid="/Channel/search" VerticalAlignment="Center" Width="250" PlaceholderText="Search on channel" QueryIcon="Find" Name="search" QuerySubmitted="AutoSuggestBox_QuerySubmitted"/>
                </StackPanel>
            </Pivot.RightHeader>
        </Pivot>

        <classes:AdaptiveCommandBar 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"/>
        </classes:AdaptiveCommandBar>
    </Grid>
</Page>
