<Page
    x:Class="FoxTube.Pages.PlaylistPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:FoxTube.Pages"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:controls="using:FoxTube.Controls"
    xmlns:classes="using:FoxTube.Classes"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition Height="auto"/>
        </Grid.RowDefinitions>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState>
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="800"/>
                    </VisualState.StateTriggers>

                    <VisualState.Setters>
                        <Setter Target="cover.(Grid.Column)" Value="0"/>
                        <Setter Target="cover.(Grid.Row)" Value="1"/>
                        <Setter Target="cover.(MaxWidth)" Value="300"/>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <ScrollViewer>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="auto"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="auto"/>
                    <RowDefinition/>
                </Grid.RowDefinitions>
                <StackPanel Grid.Row="0" Margin="10" Grid.Column="1" x:Name="cover" HorizontalAlignment="Left">
                    <Image Source="/Assets/videoThumbSample.png" Name="thumbnail"/>
                    <TextBlock FontSize="20" Text="[Title]" TextWrapping="WrapWholeWords" Name="title"/>
                    <TextBlock Foreground="Gray" Text="# videos | # views | Updated at: ##-##-## ##:##:##" TextWrapping="WrapWholeWords" Name="info"/>
                    <TextBlock Foreground="Gray" Text="description" TextWrapping="WrapWholeWords" Name="description"/>
                    <Button Margin="10" Background="Transparent" Name="toChannel" Click="toChannel_Click">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition/>
                            </Grid.ColumnDefinitions>
                            <PersonPicture Height="50" Name="avatar"/>
                            <TextBlock Grid.Column="1" Text="Channel name" FontSize="18" VerticalAlignment="Center" Margin="10,0" TextWrapping="WrapWholeWords" Name="channelName"/>
                        </Grid>
                    </Button>
                </StackPanel>

                <StackPanel Grid.Column="1" Grid.Row="1">
                    <Grid Name="wlAlert" Margin="10" BorderBrush="Red" BorderThickness="5" CornerRadius="10" Padding="10" Visibility="Collapsed">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="auto"/>
                            <ColumnDefinition/>
                        </Grid.ColumnDefinitions>

                        <FontIcon Glyph="&#xF58F;" FontSize="50" VerticalAlignment="Center"/>

                        <StackPanel Grid.Column="1" Margin="10,0">
                            <TextBlock x:Uid="/Playlist/wlHeader" FontWeight="Bold" FontSize="25" Text="Don't know how to delete video from 'Watch later' playlist?" VerticalAlignment="Center"/>
                            <TextBlock x:Uid="/Playlist/wlBody" Text="Unfortunately, for now we are unable to delete videos from 'Watch later' playlist. If you want to do that you have to visit YouTube web page" TextWrapping="WrapWholeWords"/>
                        </StackPanel>
                    </Grid>
                    <local:VideoGrid x:Name="list"/>
                    <controls:ShowMore x:Name="more" Clicked="ShowMore_Clicked"/>
                </StackPanel>
            </Grid>
        </ScrollViewer>

        <classes:AdaptiveCommandBar Grid.Row="2">
            <AppBarButton x:Uid="/Playlist/openWeb" Icon="Globe" Label="Open in browser" Name="inBrowser" Click="inBrowser_Click"/>
            <AppBarButton x:Uid="/Playlist/addTo" Icon="Add" Label="Add to" IsEnabled="False" Visibility="Collapsed">
                <AppBarButton.Flyout>
                    <MenuFlyout>

                    </MenuFlyout>
                </AppBarButton.Flyout>
            </AppBarButton>
            <AppBarButton x:Uid="/Playlist/refresh" Icon="Refresh" Label="Refresh" Name="refresh" Click="refresh_Click"/>
            <AppBarButton x:Uid="/Playlist/share" Icon="Share" Label="Share" Name="share" Click="share_Click"/>
        </classes:AdaptiveCommandBar>
    </Grid>
</Page>
