<Page
    x:Class="FoxTube.MainPage"
    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"
    xmlns:ui="using:Microsoft.UI.Xaml.Controls"
    xmlns:controls="using:FoxTube.Controls">

    <Grid Name="grid">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState>
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="{x:Bind nav.CompactModeThresholdWidth}"/>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="Title.Margin" Value="0"/>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        <Border x:Name="AppTitleBar"
                IsHitTestVisible="True"
                VerticalAlignment="Top"
                Background="Transparent"
                Canvas.ZIndex="1">

            <TextBlock x:Name="AppTitle"
                       Text="FoxTube"
                       VerticalAlignment="Center"
                           Margin="12, 8, 0, 0"
                       Style="{StaticResource CaptionTextBlockStyle}" />
        </Border>

        <ui:NavigationView SelectedItem="toHome" BackRequested="Nav_BackRequested" PaneClosing="Nav_PaneClosing" PaneOpened="Nav_PaneOpened" OpenPaneLength="300" Name="nav" SelectionChanged="Nav_SelectionChanged">
            <ui:NavigationView.Header>
                <Grid>
                    <TextBlock Name="Title" Style="{StaticResource TitleTextBlockStyle}"/>
                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
                        <Button x:Uid="/Main/feedback" Name="feedback" Click="Feedback_Click" Visibility="Collapsed" FontFamily="Segoe MDL2 Assets" Content="&#xED15;" Background="Transparent" Height="41" Width="60" FontSize="15"/>
                        <Button x:Uid="/Main/signIn" Name="account" Click="SignIn_Click" Visibility="Collapsed" FontFamily="Segoe MDL2 Assets" Content="&#xE8FA;" Background="Transparent" Height="41" Width="60" FontSize="15"/>
                        <Button Background="Transparent" Visibility="Collapsed" Name="avatar" Height="41" Width="60" FontSize="15" Padding="0">
                            <Button.Flyout>
                                <Flyout>
                                    <Grid>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="auto"/>
                                            <ColumnDefinition/>
                                        </Grid.ColumnDefinitions>
                                        <PersonPicture Width="65" Name="avatarFlyout" VerticalAlignment="Top"/>
                                        <StackPanel Grid.Column="1" Margin="5">
                                            <TextBlock Name="myNameFlyout"/>
                                            <TextBlock Style="{StaticResource CaptionTextBlockStyle}" Name="myEmail"/>
                                            <HyperlinkButton x:Uid="/Main/signOut" Content="Log out" Click="Logout_Click"/>
                                        </StackPanel>
                                    </Grid>
                                </Flyout>
                            </Button.Flyout>
                            <Ellipse Width="25" Height="25">
                                <Ellipse.Fill>
                                    <ImageBrush ImageSource="/Assets/Icons/profile.png"/>
                                </Ellipse.Fill>
                            </Ellipse>
                        </Button>
                    </StackPanel>
                </Grid>
            </ui:NavigationView.Header>

            <ui:NavigationView.MenuItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal" Padding="5" Margin="-5,0,0,0" Tag="{Binding Snippet.ResourceId.ChannelId}">
                        <PersonPicture Height="20" Margin="-5,0,15,0">
                            <PersonPicture.ProfilePicture>
                                <BitmapImage UriSource="{Binding Snippet.Thumbnails.Medium.Url}" DecodePixelHeight="20" DecodePixelWidth="20"/>
                            </PersonPicture.ProfilePicture>
                        </PersonPicture>
                        <TextBlock FontSize="14" Text="{Binding Snippet.Title}"/>
                    </StackPanel>
                </DataTemplate>
            </ui:NavigationView.MenuItemTemplate>

            <ui:NavigationView.MenuItems>
                <ui:NavigationViewItem x:Uid="/Main/home" Icon="Home" Content="Home" Name="toHome"/>
                <ui:NavigationViewItem x:Uid="/Main/myChannel" Icon="Contact" Content="My channel" Name="toChannel" Visibility="Collapsed"/>
                <ui:NavigationViewItem x:Uid="/Main/subscriptions" Icon="People" Content="Subscriptions" Name="toSubscriptions" Visibility="Collapsed"/>
                <ui:NavigationViewItemHeader x:Uid="/Main/myLibrary" FontSize="14" Content="My library" Name="libHeader" Visibility="Collapsed"/>
                <ui:NavigationViewItem x:Uid="/Main/history" Content="History" Name="toHistory" Visibility="Collapsed">
                    <ui:NavigationViewItem.Icon>
                        <FontIcon Glyph="&#xE81C;"/>
                    </ui:NavigationViewItem.Icon>
                </ui:NavigationViewItem>
                <ui:NavigationViewItem x:Uid="/Main/liked" Icon="Like" Content="Liked videos" Name="toLiked" Visibility="Collapsed"/>
                <ui:NavigationViewItem x:Uid="/Main/later" Icon="Clock" Content="Watch later" Name="toLater" Visibility="Collapsed"/>
                <ui:NavigationViewItem x:Uid="/Main/downloads" Icon="Download" Content="Downloads" Name="toDownloads"/>
                <ui:NavigationViewItemHeader x:Uid="/Main/subscriptions" FontSize="14" Content="Subscriptions" Name="subsHeader" Visibility="Collapsed"/>
            </ui:NavigationView.MenuItems>

            <ui:NavigationView.PaneFooter>
                <ui:NavigationViewItem Content="Remove ads" Visibility="Collapsed" Tapped="RemoveAds_Tapped" Name="removeAds">
                    <ui:NavigationViewItem.Icon>
                        <FontIcon Glyph="&#xE14D;"/>
                    </ui:NavigationViewItem.Icon>
                </ui:NavigationViewItem>
            </ui:NavigationView.PaneFooter>

            <ui:NavigationView.AutoSuggestBox>
                <AutoSuggestBox x:Name="search" QueryIcon="Find" QuerySubmitted="Search_QuerySubmitted" TextChanged="Search_TextChanged" x:Uid="/Main/searchPlaceholder" PlaceholderText="Search"/>
            </ui:NavigationView.AutoSuggestBox>

            <Grid>
                <controls:ContentFrame x:Name="content" Navigated="Content_Navigated"/>
                <controls:ContentFrame x:Name="videoPlaceholder"/>
            </Grid>

        </ui:NavigationView>
    </Grid>
</Page>
