<featurebase:FeaturePage 
    x:Class="was.touchcopy.features.music.MusicPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:featurebase="using:was.touchcopy.features"
    xmlns:local="using:was.touchcopy.features.music"
    xmlns:converters="using:was.touchcopy.features.music.converters"
    xmlns:coreconverters="using:was.touchcopy.features.converters"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d"  d:DataContext="{d:DesignInstance Type=local:MusicPage}"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Page.Resources>
        <ResourceDictionary>
            <converters:PlaybackStateToEnabledConverter x:Key="PlaybackStateToEnabledConverter" />
            <converters:PlaybackStateToPlayPauseGlyphConverter x:Key="PlaybackStateToPlayPauseGlyphConverter" />
            <converters:PlaybackStateToVisibilityConverter x:Key="PlaybackStateToVisibilityConverter" />
            <converters:TrackDetailToPlaybackInfoConverter x:Key="TrackDetailToPlaybackInfoConverter" />
            <converters:VolumeToGlyphConverter x:Key="VolumeToGlyphConverter" />
            <coreconverters:DurationToStringConverter x:Key="DurationToStringConverter" />
            <coreconverters:ValueToVisibilityConverter x:Key="ValueToVisibilityConverter" />
            <ThemeShadow x:Name="SharedShadow" />
        </ResourceDictionary>
    </Page.Resources>

    <Grid>
        <Grid x:Name="gridContent">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>

            <Border Style="{StaticResource PageHeaderBorderStyle}">
                <Grid>
                    <CommandBar Style="{ThemeResource PageHeaderCommandBarStyle}">
                        <featurebase:CopyProgressAppBarUserController x:Name="copyProgressUserControl" Visibility="Collapsed" OnCancelTapped="CopyProgressUserControl_OnCancelTapped" MaxWidth="350"/>
                        <AppBarButton x:Name="appBarButtonCopy" x:Uid="AppBarButtonCopy" Icon="Copy" Label="XX Copy to PC" Style="{ThemeResource AppBarButtonStyle}" Click="AppBarButtonCopy_Click" IsEnabled="{x:Bind IsExportAvailable, Mode=OneWay}">
                            <ToolTipService.ToolTip>
                                <ToolTip x:Uid="ToolTipSaveToPC" Placement="Bottom" Content="XX Save tracks to a chosen folder on your PC." />
                            </ToolTipService.ToolTip>
                        </AppBarButton>
                        <AppBarButton x:Name="appBarButtonITunes" x:Uid="AppBarButtonITunes" Icon="MusicInfo" Label="XX Copy to iTunes" Style="{ThemeResource AppBarButtonStyle}" Click="AppBarButtonItunes_Click" IsEnabled="{x:Bind IsExportAvailable, Mode=OneWay}">
                            <ToolTipService.ToolTip>
                                <ToolTip x:Uid="ToolTipSaveToITunes" Placement="Bottom" Content="XX Save tracks to your iTunes library on your PC." />
                            </ToolTipService.ToolTip>
                        </AppBarButton>
                        <AppBarButton x:Name="appBarButtonAppleMusic" x:Uid="AppBarButtonAppleMusic" Icon="MusicInfo" Label="XX Copy to Music" Style="{ThemeResource AppBarButtonStyle}" Click="AppBarButtonAppleMusic_Click" IsEnabled="{x:Bind IsExportAvailable, Mode=OneWay}">
                            <ToolTipService.ToolTip>
                                <ToolTip x:Uid="ToolTipSaveToAppleMusic" Placement="Bottom" Content="XX Save tracks to your Apple Music library on your PC." />
                            </ToolTipService.ToolTip>
                        </AppBarButton>
                    </CommandBar>
                    <TextBlock Text="{Binding PageTitle }" Style="{ThemeResource PageHeaderTitleStyle}"/>
                </Grid>
            </Border>

            <NavigationView x:Name="navigationView" Grid.Row="1" Margin="10,0" PaneDisplayMode="Top" SelectionChanged="NavigationView_SelectionChanged"
                        IsSettingsVisible="False" IsBackButtonVisible="Visible" IsBackEnabled="{Binding CanGoBack, ElementName=musicContentFrame}" BackRequested="NavigationView_BackRequested">
                <NavigationView.MenuItems>
                    <NavigationViewItem x:Uid="NavigationViewItemSongs" Content="Songs" Tag ="songs" IsSelected="True"/>
                    <NavigationViewItem x:Uid="NavigationViewItemAlbums" Content="Albums" Tag="albums"/>
                    <NavigationViewItem x:Uid="NavigationViewItemArtists" Content="Artists" Tag="artists"/>
                    <NavigationViewItem x:Uid="NavigationViewItemPlaylists" Content="Playlists" Tag="playlists"/>
                    <NavigationViewItem x:Name="navigationVewItemITunes" x:Uid="NavigationViewItemITunes" Content="iTunes" Tag="itunes"/>

                </NavigationView.MenuItems>
                <NavigationView.PaneCustomContent>
                    <StackPanel x:Name="navigationPaneCustomContent" HorizontalAlignment="Right" VerticalAlignment="Center" Orientation="Horizontal">
                        <StackPanel.Resources>
                            <Style TargetType="ComboBox">
                                <Setter Property="Foreground" Value="{ThemeResource SystemAccentColor}" />
                                <Setter Property="Background" Value="Transparent" />
                                <Setter Property="BorderThickness" Value="0" />
                                <Setter Property="Padding" Value="10,0,0,0" />
                                <Setter Property="Margin" Value="0,0,10,0" />
                            </Style>
                        </StackPanel.Resources>
                        <TextBlock x:Name="textBlockSortLabel" x:Uid="TextBlockSortLabel" Text="Sort By:" VerticalAlignment="Center" Visibility="Collapsed" />
                        <ComboBox x:Name="comboBoxTrackSort" PlaceholderText="{Binding SelectedValue, ElementName=comboBoxTrackSort, TargetNullValue=''}" Visibility="Collapsed" />
                        <ComboBox x:Name="comboBoxAlbumSort" PlaceholderText="{Binding SelectedValue, ElementName=comboBoxAlbumSort, TargetNullValue=''}" Visibility="Collapsed" />
                        <TextBlock x:Name="textBlockGenreLabel" x:Uid="TextBlockGenreLabel" Text="Genre:" VerticalAlignment="Center" />
                        <ComboBox x:Name="comboBoxGenres" PlaceholderText="{Binding SelectedValue, ElementName=comboBoxGenres, TargetNullValue=''}" />
                    </StackPanel>
                </NavigationView.PaneCustomContent>
                <NavigationView.AutoSuggestBox>
                    <AutoSuggestBox x:Name="autoSuggestBox" x:Uid="AutoSuggestBoxMusic" QueryIcon="Find" QuerySubmitted="AutoSuggestBox_QuerySubmitted" PlaceholderText="Search Music" TextChanged="AutoSuggestBox_TextChanged" />
                </NavigationView.AutoSuggestBox>
                <Frame x:Name="musicContentFrame" Navigating="MusicContentFrame_Navigating" Navigated="MusicContentFrame_Navigated" />
            </NavigationView>
            
            <!-- iCloud Tracks Hidden Notifcation -->
            <InfoBar x:Name="infoBarRemoteTracksHidden" x:Uid="InfoBarRemoteTracksHidden" Grid.Row="1" Title="XX iCloud and Apple Music tracks are set to be hidden." IsOpen="True" HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="5,0,5,5" Severity="Warning">
                <InfoBar.IconSource>
                    <FontIconSource Glyph="&#xEC9C;" />
                </InfoBar.IconSource>
                <InfoBar.ActionButton>
                    <Button x:Uid="ButtonRemoteTracksHiddenShowAll" Content="XX Show All" Style="{ThemeResource AccentButtonStyle}" Click="ButtonRemoteTracksHiddenShowAll_Click" />
                </InfoBar.ActionButton>
            </InfoBar>

            <!-- Playback Controlls -->
            <Border Grid.Row="2" Background="{ThemeResource TextFillColorInverse}" 
                 BorderThickness="0,1,0,0" CornerRadius="0"  VerticalAlignment="Bottom" Padding="20,0,20,10">
                <StackPanel>
                    <Grid ColumnSpacing="10" Visibility="{x:Bind MusicPlayback.LoadedTrack, Converter={StaticResource ValueToVisibilityConverter}, Mode=OneWay}">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="auto" MinWidth="50" />
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="auto" MinWidth="50" />
                        </Grid.ColumnDefinitions>
                        <TextBlock Text="{x:Bind MusicPlayback.Position, Mode=OneWay, Converter={StaticResource DurationToStringConverter}, ConverterParameter='includeHour'}" Opacity=".6" VerticalAlignment="Center" TextAlignment="Center" FontSize="12" />
                        <Slider x:Name="positionSlider" Grid.Column="1" VerticalAlignment="Center" Margin="0,2,0,0"
                            IsEnabled="{x:Bind MusicPlayback.PlaybackState, Converter={StaticResource PlaybackStateToEnabledConverter}}"
                            ThumbToolTipValueConverter="{StaticResource DurationToStringConverter}"
                            Value="{x:Bind MusicPlayback.Position, Mode=TwoWay}" Maximum="{x:Bind MusicPlayback.Duration, Mode=OneWay, FallbackValue='1'}"
                            ManipulationMode="All" ManipulationCompleted="Slider_ManipulationCompleted" ManipulationStarted="Slider_ManipulationStarted" />
                        <TextBlock Grid.Column="2" Opacity=".6" Text="{x:Bind MusicPlayback.Duration, Mode=OneWay, Converter={StaticResource DurationToStringConverter}, ConverterParameter='includeHour'}" VerticalAlignment="Center" TextAlignment="Center" FontSize="12" />
                    </Grid>
                    <Grid ColumnSpacing="10" Margin="0,0,0,0">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="auto" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
                        <Grid ColumnSpacing="10" Visibility="{x:Bind MusicPlayback.LoadedTrack, Converter={StaticResource ValueToVisibilityConverter}, Mode=OneWay}">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="auto" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <Border x:Name="BorderArtwork" Height="72" Width="72" BorderThickness="1" CornerRadius="4" BorderBrush="{ThemeResource TextFillColorDisabled}">
                                <Grid>
                                    <FontIcon Glyph="&#xE93C;" Opacity=".8" Foreground="{ThemeResource TextFillColorPrimary}"/>
                                    <Image x:Name="imageArtworkThumnail" Tapped="imageArtworkThumnail_Tapped" />
                                </Grid>
                            </Border>
                            <StackPanel x:Name="StackPanelPlaybackDetails" Grid.Column="1" VerticalAlignment="Center" Margin="0,0,0,10" Tapped="StackPanelPlaybackDetails_Tapped">
                                <TextBlock Text="{x:Bind MusicPlayback.LoadedTrack, Converter={StaticResource TrackDetailToPlaybackInfoConverter},ConverterParameter='[trackName]', TargetNullValue='Track Name', Mode=OneWay}" TextTrimming="CharacterEllipsis" FontWeight="SemiBold" FontSize="16" />
                                <TextBlock Text="{x:Bind MusicPlayback.LoadedTrack, Converter={StaticResource TrackDetailToPlaybackInfoConverter},ConverterParameter='[album] • [artist]', TargetNullValue='Artist', Mode=OneWay}" TextTrimming="CharacterEllipsis" FontSize="12" Opacity="0.7" />
                            </StackPanel>
                        </Grid>
                        <StackPanel Spacing="5" Grid.Column="1" VerticalAlignment="Center" Orientation="Horizontal" Padding="0,00,0,0">
                            <Button Background="Transparent" BorderThickness="0" Click="PreviousButton_Click">
                                <FontIcon Glyph="&#xE892;" Foreground="{ThemeResource TextFillColorPrimary}" />
                            </Button>
                            <Button Background="Transparent" Padding="0,6,0,6" BorderThickness="0" Click="PlayPauseButton_Click">
                                <Border BorderThickness="2" BorderBrush="{ThemeResource SystemAccentColor}" CornerRadius="80" Padding="8" Margin="10,0,10,0">
                                    <FontIcon Glyph="{x:Bind MusicPlayback.PlaybackState, Converter={StaticResource PlaybackStateToPlayPauseGlyphConverter}, Mode=OneWay}" Foreground="{ThemeResource TextFillColorPrimary}" />
                                </Border>
                            </Button>
                            <Button Background="Transparent" BorderThickness="0" Click="NextButton_Click">
                                <FontIcon Glyph="&#xE893;" Foreground="{ThemeResource TextFillColorPrimary}" />
                            </Button>
                        </StackPanel>
                        <StackPanel Spacing="10" Grid.Column="2" HorizontalAlignment="Right" VerticalAlignment="Center" Orientation="Horizontal">
                            <Button>
                                <Button.Content>
                                    <FontIcon Glyph="{x:Bind MusicPlayback.Volume, Converter={StaticResource VolumeToGlyphConverter}, Mode=OneWay}" Foreground="{ThemeResource TextFillColorPrimary}" />
                                </Button.Content>
                                <Button.Flyout>
                                    <Flyout Placement="Top">
                                        <Slider Orientation="Vertical" MinHeight="100" TickPlacement="None" Padding="0" HorizontalAlignment="Center" Value="{x:Bind MusicPlayback.Volume, Mode=TwoWay}" />
                                    </Flyout>
                                </Button.Flyout>
                            </Button>
                        </StackPanel>
                    </Grid>
                </StackPanel>
            </Border>
        </Grid>
        
        <Border x:Name="BorderFullSizeArtwork" CornerRadius="12" Shadow="{StaticResource SharedShadow}"
                Visibility="Collapsed" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="120" >
            <Image x:Name="ImageFullSize" Tapped="ImageFullSize_Tapped" />
        </Border>
        <ContentDialog x:Name="dialogSelectMediaLibraryLocation" x:Uid="DialogSelectMediaLibraryLocation" Title="XX Apple Music Media Location" CloseButtonText="XX Cancel" PrimaryButtonText="XX Browse" IsPrimaryButtonEnabled="True" DefaultButton="Primary">
            <StackPanel Spacing="8">
                <TextBlock x:Uid="TextBlockSelectMediaLibrayrLocationLineOne" Text="XX TouchCopy was unable to detect your Apple Music media folder location. To proceed, click 'Browse' below and manually select it." Style="{ThemeResource BodyTextBlockStyle}" />
                <TextBlock x:Uid="TextBlockSelectMediaLibrayrLocationLineTwo" Text="XX This must match the media library location you have set in the Apple Music PC app." Style="{ThemeResource CaptionTextBlockStyle}" Foreground="{ThemeResource SystemErrorTextColor}" />
            </StackPanel>
        </ContentDialog>
        <ContentDialog x:Name="dialogInvalidAppleMusicLibraryLocation" x:Uid="DialogInvalidAppleMusicLibraryLocation" Title="XX Failed to Locate Subfolder" CloseButtonText="XX Cancel" PrimaryButtonText="XX Retry" IsPrimaryButtonEnabled="True" DefaultButton="Primary">
            <StackPanel Spacing="8">
                <TextBlock x:Uid="TextBlockInvalidAppleMusicLibraryLocationLineOne" Text="XX TouchCopy could not locate the 'Automatically Add to Apple Music' folder within your chosen media folder." Style="{ThemeResource BodyTextBlockStyle}" />
                <TextBlock x:Uid="TextBlockInvalidAppleMusicLibraryLocationLineTwo" Text="XX Please ensure that the media library location you select matches the one set in the Apple Music PC app." Style="{ThemeResource CaptionTextBlockStyle}" Foreground="{ThemeResource SystemErrorTextColor}" />
            </StackPanel>
        </ContentDialog>
        <ContentDialog x:Name="dialogCopyToMusicLibraryComplete" x:Uid="DialogCopyToMusicLibraryComplete" Title="XX Copy Complete" CloseButtonText="XX Dismiss" DefaultButton="Close" >
            <StackPanel>
                <TextBlock x:Uid="CopyToMusicLibraryCompleteLineOne" Text="XX TouchCopy has finished copying your tracks to your music library." Style="{ThemeResource BodyTextBlockStyle}" />
                <TextBlock x:Uid="CopyToMusicLibraryCompleteLineTwo" x:Name="textBlockCopyToMusicLibraryCompleteError" Text="XX Some items may not have copied..." Visibility="Visible" Style="{ThemeResource BodyTextBlockStyle}" Foreground="{ThemeResource SystemErrorTextColor}" />
                <TextBlock x:Uid="CopyToMusicLibraryCompleteLineThree" Text="XX You may need to restart the Apple Music PC app for your tracks to be listed." Style="{ThemeResource CaptionTextBlockStyle}" Margin="0,4,0,0" Opacity="0.8" Visibility="Collapsed" />
                <CheckBox x:Name="checkBoxDoNotShowCopyToMusicDialog" x:Uid="CheckBoxDoNotShowCopyToMusicDialog" Content="XX Don't show this message again." Margin="0,16,0,0" Click="CheckBoxDoNotShowCopyToMusicDialog_Click" />
            </StackPanel>
        </ContentDialog>
    </Grid>
</featurebase:FeaturePage>
