<Page
    x:Class="FoxTube.Pages.VideoPage"
    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:classes="using:FoxTube.Classes"
    mc:Ignorable="d">

    <Grid Name="grid" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" SizeChanged="grid_SizeChanged">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState>
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="600"/>
                    </VisualState.StateTriggers>

                    <VisualState.Setters>
                        <Setter Target="ratingPanel.(Grid.Row)" Value="0"/>
                        <Setter Target="ratingPanel.(HorizontalAlignment)" Value="Right"/>
                        <Setter Target="rating.Width" Value="250"/>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="400"/>
        </Grid.ColumnDefinitions>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition/>
                <RowDefinition Height="auto"/>
            </Grid.RowDefinitions>
            <ScrollViewer Name="mainScroll" VerticalScrollBarVisibility="Hidden">
                <StackPanel Name="mainContent">
                    <Border BorderBrush="Red" BorderThickness="5" CornerRadius="10" Margin="10" Name="upcoming" Visibility="Collapsed">
                        <Grid Margin="10">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="auto"/>
                                <ColumnDefinition/>
                                <ColumnDefinition Width="auto"/>
                                <ColumnDefinition Width="auto"/>
                            </Grid.ColumnDefinitions>

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

                            <TextBlock x:Uid="/VideoPage/upcomingHeader" FontWeight="Bold" FontSize="25" Text="Stream hasn't started yet" Grid.Column="1" Margin="10,0" VerticalAlignment="Center"/>

                            <StackPanel Grid.Column="2" Margin="10,0" Name="schedule" Visibility="Collapsed">
                                <TextBlock x:Uid="/VideoPage/scheduleHeader" FontSize="20" FontWeight="SemiBold" Text="Stream schedule:"/>
                                <TextBlock Name="start" Text="Starts at: 2/15/2019 21:00:00" Visibility="Collapsed"/>
                                <TextBlock Name="end" Text="Ends at: 2/15/2019 23:00:00" Visibility="Collapsed"/>
                            </StackPanel>

                            <StackPanel Grid.Column="3" Margin="10,0" Name="countdownPanel" Visibility="Collapsed">
                                <TextBlock x:Uid="/VideoPage/countdown" FontSize="20" FontWeight="SemiBold" Text="Stream starts in:"/>
                                <TextBlock Name="countdown" FontWeight="Bold" FontSize="35" Text="00:12:12"/>
                            </StackPanel>
                        </Grid>
                    </Border>
                    <local:VideoPlayer x:Name="player" NextClicked="Player_NextClicked" MiniMode="Player_Minimize"/>
                    <PivotItem Header="Description" Name="descriptionPanel">
                        <StackPanel Margin="0,10">
                            <Button FontFamily="Segoe UI, Segoe MDL2 Assets" Content="&#xE122; Continue from: 00:10:37" Name="left" Click="Left_Click" Visibility="Collapsed"/>
                            <TextBlock IsTextSelectionEnabled="True" Name="title" Text="[Video title]" FontSize="25" TextWrapping="WrapWholeWords" HorizontalTextAlignment="Start"/>
                            <TextBlock Text="Published at: " Name="meta"/>
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="Auto"/>
                                </Grid.RowDefinitions>
                                <Button Padding="0" Background="Transparent" Margin="5" Name="gotoChannel" Click="gotoChannel_Click">
                                    <StackPanel Orientation="Horizontal">
                                        <PersonPicture Name="channelAvatar" Width="90"/>
                                        <StackPanel Orientation="Vertical" Grid.Column="1" Padding="5" VerticalAlignment="Center">
                                            <TextBlock Name="channelName" Text="[Channel name]" FontSize="18"/>
                                            <TextBlock Name="subscribers" Text="[subscribers]" Foreground="Gray" Margin="0,0,0,5"/>
                                            <Button x:Uid="/Cards/subscribe" Click="subscribe_Click" Grid.Column="2" Height="30" Width="200" Background="Red" Foreground="White" FontSize="14" FontWeight="SemiBold" Content="Subscirbe" Name="subscribe"/>
                                        </StackPanel>
                                    </StackPanel>
                                </Button>
                                <StackPanel HorizontalAlignment="Stretch" Name="ratingPanel" Grid.Row="1">
                                    <TextBlock Name="views" Text="[views]" FontSize="24" Foreground="Gray"/>
                                    <ProgressBar Name="rating" Background="Green" Foreground="Red"/>
                                    <Grid>
                                        <TextBlock Foreground="Gray" Text="[dislikes]" Name="dislikes"/>
                                        <TextBlock HorizontalAlignment="Right" Foreground="Gray" Text="[likes]" Name="likes"/>
                                    </Grid>
                                    <Grid BorderBrush="{StaticResource SystemControlBackgroundListMediumRevealBorderBrush}">
                                        <FontIcon Foreground="Gray"
                                                  HorizontalAlignment="Left"
                                                  FontSize="40"
                                                  Name="dislike" Tapped="dislike_Click"
                                                  Glyph="&#xE19E;"/>

                                        <FontIcon Foreground="Gray"
                                                  HorizontalAlignment="Right"
                                                  FontSize="40"
                                                  Name="like" Tapped="like_Click"
                                                  Glyph="&#xE19F;"/>
                                    </Grid>
                                </StackPanel>
                            </Grid>
                            <TextBlock Name="description" Text="[Description]" IsTextSelectionEnabled="True" TextWrapping="WrapWholeWords"/>
                        </StackPanel>
                    </PivotItem>
                </StackPanel>
            </ScrollViewer>

            <classes:AdaptiveCommandBar Grid.Row="1" VerticalAlignment="Bottom" x:Name="commandbar">
                <AppBarButton x:Uid="/VideoPage/download" Icon="Download" Label="Download video" Name="download">
                    <AppBarButton.Flyout>
                        <MenuFlyout x:Name="downloadSelector"/>
                    </AppBarButton.Flyout>
                </AppBarButton>
                <AppBarButton x:Uid="/VideoPage/addTo" Name="addTo" Label="Add to" Icon="Add" Visibility="Visible">
                    <AppBarButton.Flyout>
                        <MenuFlyout x:Name="addList">
                            <MenuFlyoutItem x:Uid="/VideoPage/newPlaylist" Text="New playlist" Name="newPlaylist" Click="NewPlaylist_Click" Icon="Add"/>
                            <ToggleMenuFlyoutItem x:Uid="/VideoPage/wl" Text="Watch later" Name="wl" Click="Wl_Click" Icon="Clock"/>
                            <MenuFlyoutSeparator/>
                        </MenuFlyout>
                    </AppBarButton.Flyout>
                </AppBarButton>
                <AppBarButton x:Uid="/VideoPage/refresh" Name="refresh" Click="refresh_Click" Icon="Refresh" Label="Refresh page"/>
                <AppBarButton x:Uid="/VideoPage/share" Name="share" Click="share_Click" Icon="Share" Label="Share"/>
                <AppBarButton x:Uid="/VideoPage/openWeb" Name="openBrowser" Click="openBrowser_Click" Icon="Globe" Label="Open in browser"/>

                <classes:AdaptiveCommandBar.SecondaryCommands>
                    <AppBarButton x:Uid="/VideoPage/report" Icon="Flag" x:Name="report" Label="Report this video" Click="Report_Click"/>
                </classes:AdaptiveCommandBar.SecondaryCommands>
            </classes:AdaptiveCommandBar>
        </Grid>

        <Grid Grid.Column="1" Name="tabsPlaceholder">
            <Pivot Name="pivot" SelectedIndex="0" IsHeaderItemsCarouselEnabled="False">
                <PivotItem x:Uid="/VideoPage/related" Header="Suggestions">
                    <ScrollViewer>
                        <pages:VideoGrid x:Name="relatedVideos"/>
                    </ScrollViewer>
                </PivotItem>
                <PivotItem x:Uid="/VideoPage/comments" Header="Comments" Name="commentsPlaceholder">
                    <pages:CommentsPage x:Name="comments"/>
                </PivotItem>
                <PivotItem x:Uid="/VideoPage/playlist" Header="Playlist" Name="playlist">
                    <ScrollViewer Name="playlistScroll">
                        <StackPanel>
                            <StackPanel Padding="8" Background="{ThemeResource SystemControlBackgroundChromeMediumBrush}">
                                <TextBlock Text="[Playlsit name]" FontSize="26" TextWrapping="WrapWholeWords" Name="playlistName"/>
                                <TextBlock Text="[Channel name]" Name="playlistChannel"/>
                                <TextBlock Text="[Counter]" Name="playlistCounter"/>
                            </StackPanel>
                            <ListBox Background="Transparent" SelectionChanged="ListBox_SelectionChanged" Name="playlistList">
                                <ListBox.ItemTemplate>
                                    <DataTemplate>
                                        <Grid Tag="{Binding Path=Id}">
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition Width="auto"/>
                                                <ColumnDefinition Width="auto"/>
                                                <ColumnDefinition/>
                                            </Grid.ColumnDefinitions>
                                            <TextBlock Text="{Binding Path=Number}" VerticalAlignment="Center" Margin="0,0,8,0"/>
                                            <Image Grid.Column="1" Source="{Binding Path=Thumbnail}" Height="65"/>
                                            <TextBlock Grid.Column="2" Margin="8,0,0,0" VerticalAlignment="Center" TextWrapping="WrapWholeWords" Text="{Binding Path=Title}"/>
                                        </Grid>
                                    </DataTemplate>
                                </ListBox.ItemTemplate>
                            </ListBox>
                        </StackPanel>
                    </ScrollViewer>
                </PivotItem>
            </Pivot>
        </Grid>

        <ContentDialog x:Uid="/VideoPage/dialog" PrimaryButtonText="Create and add" Title="New playlist" CloseButtonText="Cancel" DefaultButton="Primary" PrimaryButtonClick="ContentDialog_PrimaryButtonClick" Name="playlistDialog">
            <StackPanel>
                <TextBox x:Uid="/VideoPage/newPlaylistName" PlaceholderText="Enter playlist name" Name="newListName"/>
                <ComboBox x:Uid="/VideoPage/privacy" Header="Availablity" SelectedIndex="0" HorizontalAlignment="Stretch" Name="newListDisc">
                    <ComboBoxItem x:Uid="/VideoPage/public" Content="Public"/>
                    <ComboBoxItem x:Uid="/VideoPage/private" Content="Private"/>
                    <ComboBoxItem x:Uid="/VideoPage/direct" Content="Direct link"/>
                </ComboBox>
            </StackPanel>
        </ContentDialog>
    </Grid>
</Page>
