<?xml version="1.0" encoding="utf-8"?>
<Page
    x:Class="was.droidtransfer.features.music.MusicSyncPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:sync="using:was.droidtransfer.features.music.sync"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <Border Style="{ThemeResource PageHeaderBorderStyle}">
            <Grid>
                <CommandBar Style="{ThemeResource PageHeaderCommandBarStyle}">
                    <AppBarButton x:Uid="AppBarButtonIncludeAll" Label="XX Include All" Style="{ThemeResource AppBarButtonStyle}" Visibility="{Binding Visibility, ElementName=gridAdvanced, Mode=OneWay}" Click="_appBarButtonIncludeAll_Click">
                        <ToolTipService.ToolTip>
                            <ToolTip x:Uid="ToolTipSyncIncludeAll" Content="XX Click this to include all displayed tracks to be synced." />
                        </ToolTipService.ToolTip>
                        <AppBarButton.Content>
                            <FontIcon Glyph="&#xE73A;" Foreground="{ThemeResource AccentFillColorDefaultBrush}"/>
                        </AppBarButton.Content>
                    </AppBarButton>
                    <AppBarButton x:Uid="AppBarButtonInclude" Label="XX Include" Style="{ThemeResource AppBarButtonStyle}" Visibility="{Binding Visibility, ElementName=gridAdvanced, Mode=OneWay}">
                        <AppBarButton.Content>
                            <FontIcon Glyph="&#xE8FD;" Foreground="{ThemeResource AccentFillColorDefaultBrush}"/>
                        </AppBarButton.Content>
                        <AppBarButton.Flyout>
                            <MenuFlyout Placement="Bottom">
                                <MenuFlyoutItem x:Uid="MenuFlyoutItemSelection" Text="XX Selection" Click="_menuFlyoutItemIncludeSelection_Click">
                                    <ToolTipService.ToolTip>
                                        <ToolTip x:Uid="ToolTipSyncIncludeSelection" Content="XX Click this after selecting one or more tracks to mark the selection to be synced." />
                                    </ToolTipService.ToolTip>
                                    <MenuFlyoutItem.Icon>
                                        <FontIcon Glyph="&#xE8FD;" Foreground="{ThemeResource AccentFillColorDefaultBrush}"/>
                                    </MenuFlyoutItem.Icon>
                                </MenuFlyoutItem>
                                <MenuFlyoutItem x:Uid="MenuFlyoutItemSelectedArtists" Text="XX Selected Artists" Click="_menuFlyoutItemIncludeArtists_Click">
                                    <ToolTipService.ToolTip>
                                        <ToolTip x:Uid="ToolTipSyncIncludeArtists" Content="XX Click this after selecting one or more tracks to mark all tracks by the same artists as those selected to be synced." />
                                    </ToolTipService.ToolTip>
                                    <MenuFlyoutItem.Icon>
                                        <FontIcon Glyph="&#xE77B;" Foreground="{ThemeResource AccentFillColorDefaultBrush}"/>
                                    </MenuFlyoutItem.Icon>
                                </MenuFlyoutItem>
                                <MenuFlyoutItem x:Uid="MenuFlyoutItemSelectedAlbums" Text="XX Selected Albums" Click="_menuFlyoutItemIncludeAlbums_Click">
                                    <ToolTipService.ToolTip>
                                        <ToolTip x:Uid="ToolTipSyncIncludeAlbums" Content="XX Click this after selecting one or more tracks to mark all tracks in the same albums as those selected to be synced." />
                                    </ToolTipService.ToolTip>
                                    <MenuFlyoutItem.Icon>
                                        <FontIcon Glyph="&#xE93C;" Foreground="{ThemeResource AccentFillColorDefaultBrush}"/>
                                    </MenuFlyoutItem.Icon>
                                </MenuFlyoutItem>
                            </MenuFlyout>
                        </AppBarButton.Flyout>
                    </AppBarButton>
                    <AppBarButton x:Uid="AppBarButtonClearSelection" Label="XX Clear Selection" Style="{ThemeResource AppBarButtonStyle}" Visibility="{Binding Visibility, ElementName=gridAdvanced, Mode=OneWay}" Click="_appBarButtonClearSelection_Click">
                        <ToolTipService.ToolTip>
                            <ToolTip x:Uid="ToolTipSyncClearSelection" Content="XX Click this to unmark all tracks currently marked to be synced." />
                        </ToolTipService.ToolTip>
                        <AppBarButton.Content>
                            <FontIcon Glyph="&#xE8E6;" Foreground="{ThemeResource AccentFillColorDefaultBrush}"/>
                        </AppBarButton.Content>
                    </AppBarButton>
                    <AppBarSeparator Visibility="{Binding Visibility, ElementName=gridAdvanced, Mode=OneWay}" />
                    <AppBarButton x:Name="appBarButtonCancel" x:Uid="AppBarButtonCancel" Label="XX Cancel" Style="{ThemeResource AppBarButtonStyle}" IsEnabled="{x:Bind ProgressNotifier.CanBeCanceled, Mode=OneWay}" Visibility="{x:Bind ProgressNotifier.CanBeCanceled, Mode=OneWay}" Click="_appBarButtonCancel_Click">
                        <AppBarButton.Content>
                            <FontIcon Glyph="&#xE711;" Foreground="{ThemeResource AccentFillColorDefaultBrush}"/>
                        </AppBarButton.Content>
                    </AppBarButton>
                </CommandBar>
                <TextBlock x:Name="textBlockSyncMusicTitle" Style="{ThemeResource PageHeaderTitleStyle}"/>
            </Grid>
        </Border>
        <Grid Grid.Row="1">
            <!-- Progress -->

            <Grid x:Name="gridProgress" VerticalAlignment="Center" RowSpacing="5" MaxWidth="600" Margin="10">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <TextBlock Text="{x:Bind ProgressNotifier.Title, Mode=OneWay}" Style="{ThemeResource BodyStrongTextBlockStyle}" TextWrapping="Wrap" />
                <TextBlock Grid.Row="1" Text="{x:Bind ProgressNotifier.Message, Mode=OneWay}" TextWrapping="Wrap" Opacity=".7" />
                <ProgressBar Grid.Row="2" IsIndeterminate="{x:Bind ProgressNotifier.IsIndeterminate, Mode=OneWay}" Maximum="{x:Bind ProgressNotifier.MaxProgress, Mode=OneWay}" Value="{x:Bind ProgressNotifier.Progress, Mode=OneWay}" Margin="0,10" />
                <Button x:Uid="ButtonProgressCancel" Grid.Row="3" Content="XX Cancel" Visibility="{x:Bind ProgressNotifier.CanBeCanceled, Mode=OneWay}" Margin="0,20,0,0" Click="_buttonProgressCancel_Click" />
            </Grid>

            <!-- End Progress -->
            <!-- Simple Mode -->

            <Grid x:Name="gridSimple" VerticalAlignment="Center" MaxWidth="600" Margin="10">
                <StackPanel Spacing="10">
                    <Border CornerRadius="8" BorderThickness="2" BorderBrush="{ThemeResource TextBoxForegroundThemeBrush}" HorizontalAlignment="Center" Padding="10" Margin="10">
                        <FontIcon Glyph="&#xE8AB;" FontSize="32" Foreground="{ThemeResource TextBoxForegroundThemeBrush}"/>
                    </Border>
                    <Button x:Name="buttonSyncTracksToPC" HorizontalAlignment="Stretch" HorizontalContentAlignment="Left" Click="_buttonSyncTracksToPC_Click">
                        <StackPanel Spacing="5" Padding="5,10">
                            <StackPanel Orientation="Horizontal">
                                <TextBlock x:Name="textBlockSyncTracksToPC" Style="{ThemeResource BodyStrongTextBlockStyle}" />
                                <TextBlock x:Name="textBlockSyncTracksToPCSubText" Style="{ThemeResource BodyStrongTextBlockStyle}" Opacity=".5" />
                            </StackPanel>
                            <TextBlock x:Name="textBlockSyncTracksToPCDescription" Style="{ThemeResource BodyTextBlockStyle}" />
                        </StackPanel>
                    </Button>
                    <Button x:Name="buttonSyncTracksToAndroid" HorizontalAlignment="Stretch" HorizontalContentAlignment="Left" Click="_buttonSyncTracksToAndroid_Click">
                        <StackPanel Spacing="5" Padding="5,10">
                            <StackPanel Orientation="Horizontal">
                                <TextBlock x:Uid="TextBlockSyncTracksToAndroid" Text="XX Sync Tracks to Android" Style="{ThemeResource BodyStrongTextBlockStyle}" />
                                <TextBlock x:Name="textBlockSyncTracksToAndroidSubText" Style="{ThemeResource BodyStrongTextBlockStyle}" Opacity=".5" />
                            </StackPanel>
                            <TextBlock x:Name="textBlockSyncTracksToAndroidDescription" Style="{ThemeResource BodyTextBlockStyle}" />
                        </StackPanel>
                    </Button>
                    <Button x:Name="buttonManualSelection" HorizontalAlignment="Stretch" HorizontalContentAlignment="Left" Click="_buttonManualSelection_Click">
                        <StackPanel Spacing="5" Padding="5,10">
                            <StackPanel Orientation="Horizontal">
                                <TextBlock x:Uid="TextBlockManualSelection" Text="XX Manual Selection" Style="{ThemeResource BodyStrongTextBlockStyle}" />
                                <TextBlock x:Name="textBlockManualSelectionSubText" Style="{ThemeResource BodyStrongTextBlockStyle}" Opacity=".5" />
                            </StackPanel>
                            <TextBlock x:Name="textBlockManualSelectionDescription" Style="{ThemeResource BodyTextBlockStyle}" />
                        </StackPanel>
                    </Button>
                    <StackPanel x:Name="stackPanelNoTracksRequireSync" Spacing="5" Margin="0,-20,0,40" Visibility="Collapsed">
                        <TextBlock x:Uid="TextBlockNoTracksRequireSyncTitle" Text="XX No Tracks Require Sync" Style="{ThemeResource TitleTextBlockStyle}" FontSize="18" TextAlignment="Center" />
                        <TextBlock x:Uid="TextBlockNoTracksRequireSyncDescription" Text="XX Your PC and your Android device contain the same tracks." Style="{ThemeResource BodyTextBlockStyle}" TextAlignment="Center" />
                    </StackPanel>
                    <Button x:Name="buttonGridSimpleCancel" Click="_appBarButtonCancel_Click">
                        <TextBlock x:Uid="TextBlockButtonCancel" Text="XX Cancel" Style="{ThemeResource BodyTextBlockStyle}" Margin="5,0,0,0" />
                    </Button>
                </StackPanel>
            </Grid>

            <!-- End Simple Mode -->
            <!-- Advanced Mode -->

            <Grid x:Name="gridAdvanced">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="*" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <Border BorderThickness="0,0,0,1" BorderBrush="{ThemeResource CheckBoxDisabledBorderThemeBrush}" Padding="10">
                    <Grid ColumnSpacing="10">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>
                        <Grid.Resources>
                            <Style TargetType="ComboBox">
                                <Setter Property="Foreground" Value="{ThemeResource SystemAccentColor}" />
                                <Setter Property="Background" Value="Transparent" />
                                <Setter Property="BorderThickness" Value="0" />
                                <Setter Property="Padding" Value="5,0,0,0" />
                                <Setter Property="Margin" Value="0,0,10,0" />
                            </Style>
                        </Grid.Resources>
                        
                        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
                            <TextBlock x:Uid="TextBlockSyncMusicToLabel" Text="XX Sync Music to" VerticalAlignment="Center" />
                            <ComboBox x:Name="comboBoxDestination" FontWeight="Bold" SelectedIndex="0" SelectionChanged="_comboBoxDestination_SelectionChanged">
                                <ComboBoxItem>
                                    <StackPanel Orientation="Horizontal" Spacing="5">
                                        <FontIcon Glyph="&#xF0AF;" VerticalAlignment="Center" Foreground="Green" FontSize="12" Margin="0,4,0,0" />
                                        <TextBlock Text="Android" VerticalAlignment="Center" />
                                    </StackPanel>
                                </ComboBoxItem>
                                <ComboBoxItem>
                                    <StackPanel Orientation="Horizontal" Spacing="5">
                                        <FontIcon Glyph="&#xF0AF;" VerticalAlignment="Center" Foreground="Blue" FontSize="12" Margin="0,4,0,0" />
                                        <TextBlock x:Name="textBlockComboBoxItemPC" VerticalAlignment="Center" />
                                    </StackPanel>
                                </ComboBoxItem>
                                <ComboBoxItem>
                                    <StackPanel Orientation="Horizontal" Spacing="5">
                                        <FontIcon Glyph="&#xE8AB;" VerticalAlignment="Center" Foreground="{ThemeResource TextBoxForegroundThemeBrush}" FontSize="12" Margin="0,4,0,0" />
                                        <TextBlock x:Uid="TextBlockComboBoxItemBoth" Text="XX Both" VerticalAlignment="Center" />
                                    </StackPanel>
                                </ComboBoxItem>
                            </ComboBox>
                        </StackPanel>
                        <StackPanel Grid.Column="2" Orientation="Horizontal">
                            <TextBlock x:Uid="TextBlockSortByLabel" Text="XX Sort by" VerticalAlignment="Center" />
                            <ComboBox x:Name="comboBoxTrackSort" SelectedIndex="1" SelectionChanged="_comboBoxTrackSort_SelectionChanged">
                                <ComboBoxItem x:Uid="ComboBoxItemTitle" Content="XX Title" />
                                <ComboBoxItem x:Uid="ComboBoxItemArtist" Content="XX Artist" />
                                <ComboBoxItem x:Uid="ComboBoxItemAlbum" Content="XX Album" />
                            </ComboBox>
                            <AutoSuggestBox x:Name="autoSuggestBoxTrackSearch" x:Uid="AutoSuggestBoxTrackSearch" Grid.Column="2" Width="180" QueryIcon="Find" QuerySubmitted="_autoSuggestBoxTrackSearch_QuerySubmitted" PlaceholderText="XX Search Music" TextChanged="_autoSuggestBoxTrackSearch_TextChanged" />
                        </StackPanel>
                    </Grid>
                </Border>
                <Grid Grid.Row="1">
                    <ListView x:Name="listViewTracks" SelectionMode="Extended" ItemsSource="{x:Bind TrackItems.View, Mode=OneWay}" ContainerContentChanging="_listViewTracks_ContainerContentChanging" IsRightTapEnabled="True" RightTapped="_listViewTracks_RightTapped">
                        <ListView.GroupStyle>
                            <GroupStyle HidesIfEmpty="True">
                                <GroupStyle.HeaderTemplate>
                                    <DataTemplate>
                                        <TextBlock Text="{Binding Key}" Foreground="{ThemeResource SystemAccentColor}" />
                                    </DataTemplate>
                                </GroupStyle.HeaderTemplate>
                            </GroupStyle>
                        </ListView.GroupStyle>
                        <ListView.ItemContainerStyle>
                            <Style TargetType="ListViewItem" BasedOn="{StaticResource DefaultListViewItemStyle}">
                                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                                <Setter Property="VerticalContentAlignment" Value="Stretch" />
                                <Setter Property="Padding" Value="0" />
                                <Setter Property="Margin" Value="0" />
                            </Style>
                        </ListView.ItemContainerStyle>
                        <ListView.ItemTemplate>
                            <DataTemplate x:DataType="sync:MusicSyncListItem">
                                <Border Margin="4,2,4,2" Padding="10,0,10,0" CornerRadius="4"  PointerEntered="_trackBorder_PointerEntered" PointerExited="_trackBorder_PointerExited" DataContext="{x:Bind}" Background="White">
                                    <Grid ColumnSpacing="10">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="48" />
                                            <ColumnDefinition Width="*" />
                                            <ColumnDefinition Width="*" />
                                            <ColumnDefinition Width="*" />
                                        </Grid.ColumnDefinitions>
                                        <StackPanel Orientation="Horizontal" Spacing="10">
                                            <FontIcon Glyph="&#xF0AF;" VerticalAlignment="Center" FontSize="14" Foreground="{x:Bind SourceBrush, Mode=OneWay}" />
                                            <CheckBox VerticalAlignment="Center" IsChecked="{x:Bind IsSelectedForSync, Mode=TwoWay}" />
                                        </StackPanel>
                                        <TextBlock Grid.Column="1" Text="{x:Bind Title, Mode=OneWay}" Style="{ThemeResource BodyTextBlockStyle}" VerticalAlignment="Center" TextWrapping="NoWrap" TextTrimming="CharacterEllipsis" />
                                        <TextBlock Grid.Column="2" Text="{x:Bind Artist, Mode=OneWay}" Style="{ThemeResource BodyTextBlockStyle}" VerticalAlignment="Center" TextWrapping="NoWrap" TextTrimming="CharacterEllipsis" />
                                        <TextBlock Grid.Column="3" Text="{x:Bind Album, Mode=OneWay}" Style="{ThemeResource BodyTextBlockStyle}" VerticalAlignment="Center" TextWrapping="NoWrap" TextTrimming="CharacterEllipsis" />
                                    </Grid>
                                </Border>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                        <ListView.ContextFlyout>
                            <MenuFlyout>
                                <MenuFlyoutItem x:Uid="MenuFlyoutItemIncludeAll" Text="XX Include All" Click="_appBarButtonIncludeAll_Click">
                                    <ToolTipService.ToolTip>
                                        <ToolTip x:Uid="ToolTipSyncIncludeAll" Content="XX Click this to include all displayed tracks to be synced." />
                                    </ToolTipService.ToolTip>
                                    <MenuFlyoutItem.Icon>
                                        <FontIcon Glyph="&#xE73A;" />
                                    </MenuFlyoutItem.Icon>
                                </MenuFlyoutItem>
                                <MenuFlyoutSeparator />
                                <MenuFlyoutItem x:Uid="MenuFlyoutItemIncludeSelected" Text="XX Include Selection" Click="_menuFlyoutItemIncludeSelection_Click">
                                    <ToolTipService.ToolTip>
                                        <ToolTip x:Uid="ToolTipSyncIncludeSelection" Content="XX Click this after selecting one or more tracks to mark the selection to be synced." />
                                    </ToolTipService.ToolTip>
                                    <MenuFlyoutItem.Icon>
                                        <FontIcon Glyph="&#xE8FD;" />
                                    </MenuFlyoutItem.Icon>
                                </MenuFlyoutItem>
                                <MenuFlyoutItem x:Uid="MenuFlyoutItemIncludeSelectedArtists" Text="XX Include Selected Artists" Click="_menuFlyoutItemIncludeArtists_Click">
                                    <ToolTipService.ToolTip>
                                        <ToolTip x:Uid="ToolTipSyncIncludeArtists" Content="XX Click this after selecting one or more tracks to mark all tracks by the same artists as those selected to be synced." />
                                    </ToolTipService.ToolTip>
                                    <MenuFlyoutItem.Icon>
                                        <FontIcon Glyph="&#xE77B;" />
                                    </MenuFlyoutItem.Icon>
                                </MenuFlyoutItem>
                                <MenuFlyoutItem x:Uid="MenuFlyoutItemIncludeSelectedAlbums" Text="XX Include Selected Albums" Click="_menuFlyoutItemIncludeAlbums_Click">
                                    <ToolTipService.ToolTip>
                                        <ToolTip x:Uid="ToolTipSyncIncludeAlbums" Content="XX Click this after selecting one or more tracks to mark all tracks in the same albums as those selected to be synced." />
                                    </ToolTipService.ToolTip>
                                    <MenuFlyoutItem.Icon>
                                        <FontIcon Glyph="&#xE93C;" />
                                    </MenuFlyoutItem.Icon>
                                </MenuFlyoutItem>
                                <MenuFlyoutSeparator />
                                <MenuFlyoutItem x:Uid="MenuFlyoutItemClearSelection" Text="XX Clear Selection" Click="_appBarButtonClearSelection_Click">
                                    <ToolTipService.ToolTip>
                                        <ToolTip x:Uid="ToolTipSyncClearSelection" Content="XX Click this to unmark all tracks currently marked to be synced." />
                                    </ToolTipService.ToolTip>
                                    <MenuFlyoutItem.Icon>
                                        <FontIcon Glyph="&#xE8E6;" />
                                    </MenuFlyoutItem.Icon>
                                </MenuFlyoutItem>
                            </MenuFlyout>
                        </ListView.ContextFlyout>
                    </ListView>
                </Grid>
                <Border Grid.Row="2" BorderThickness="0,1,0,0" BorderBrush="{ThemeResource AppBarBorderThemeBrush}" Padding="10" Background="{ThemeResource TextFillColorInverse}">
                    <Grid ColumnSpacing="10">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
                        <StackPanel VerticalAlignment="Center">
                            <TextBlock x:Name="textBlockTracksSelected" Style="{ThemeResource CaptionTextBlockStyle}" FontWeight="Bold" />
                            <TextBlock x:Name="textBlockSpaceRequired" Style="{ThemeResource CaptionTextBlockStyle}" />
                        </StackPanel>
                        <StackPanel Grid.Column="1" Orientation="Horizontal" Spacing="10" HorizontalAlignment="Center" VerticalAlignment="Center">
                            <Button x:Name="buttonSyncSelection" x:Uid="ButtonSyncSelection" Content="XX Sync" Style="{ThemeResource AccentButtonStyle}" Click="_buttonSyncSelection_Click" />
                            <Button x:Uid="ButtonSyncCancel" Content="XX Cancel" Click="_appBarButtonCancel_Click" />
                        </StackPanel>
                        <HyperlinkButton x:Name="hyperlinkButtonSwitchToSimpleMode" x:Uid="HyperlinkButtonSwitchToSimpleMode" Grid.Column="2" Content="XX Switch to Simple Mode" HorizontalAlignment="Right" Click="_hyperlinkButtonSwitchToSimpleMode_Click" />
                    </Grid>
                </Border>
            </Grid>

            <!-- End Advanced Mode -->
            <!-- Error -->

            <Grid x:Name="gridError" VerticalAlignment="Center" RowSpacing="5" MaxWidth="600" Margin="10">
                <StackPanel Spacing="10">
                    <FontIcon Glyph="&#xE783;" FontSize="32" Foreground="{ThemeResource TextBoxForegroundThemeBrush}" HorizontalAlignment="Center"/>
                    <StackPanel Spacing="5" Margin="0,0,0,40">
                        <TextBlock x:Name="textBlockErrorTitle" Style="{ThemeResource TitleTextBlockStyle}" TextAlignment="Center" FontSize="18" />
                        <TextBlock x:Name="textBlockErrorDescription" Style="{ThemeResource BodyTextBlockStyle}" TextAlignment="Center" />
                    </StackPanel>
                    <Button x:Name="buttonGridErrorCancel" Click="_appBarButtonCancel_Click" HorizontalAlignment="Center">
                        <TextBlock x:Uid="TextBlockButtonErrorCancel" Text="XX Close" Style="{ThemeResource BodyTextBlockStyle}" Margin="5,0,0,0" />
                    </Button>
                </StackPanel>
            </Grid>
            
            <!-- End Error -->
        </Grid>
    </Grid>
</Page>
