<local:MusicContentPage
    x:Class="was.touchcopy.features.music.MusicContentPlaylistsPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:was.touchcopy.features.music"
    xmlns:converters="using:was.touchcopy.features.music.converters"
    xmlns:coreconverters="using:was.touchcopy.features.converters"
    xmlns:data="using:was.touchcopy.features.music.data"
    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:MusicContentPlaylistsPage}"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    NavigationCacheMode="Enabled">
    <Page.Resources>
        <ResourceDictionary>
            <converters:PlaylistToPlaybackInfoConverter x:Key="PlaylistToPlaybackInfoConverter" />
            <converters:PlaylistToPlaylistImageConverter x:Key="PlaylistToPlaylistImageConverter" />
            <converters:BoolToOpacitiyForMediaConverter x:Key="BoolToOpacitiyForMediaConverter" />
            <coreconverters:ValueToVisibilityConverter x:Key="ValueToVisibilityConverter" />
        </ResourceDictionary>
    </Page.Resources>
    <Grid>
        <SplitView x:Name="splitViewResults" Grid.Row="1" Style="{ThemeResource FeatureSplitViewStyle}">
            <SplitView.Pane>
                <Border Padding="0,3,0,0" BorderThickness="0,0,1,0" BorderBrush="{StaticResource ButtonBorderThemeBrush}">
                    <ListView x:Name="listViewPlaylists" ItemsSource="{x:Bind PlaylistData.View, Mode=OneWay}" SelectionChanged="ListViewPlaylists_SelectionChanged" SelectionMode="Extended">
                        <ListView.ItemTemplate>
                            <DataTemplate x:DataType="data:Playlist">
                                <StackPanel Orientation="Horizontal" Spacing="10">
                                    <FontIcon Glyph="&#xE90B;" />
                                    <TextBlock Text="{x:Bind PlaylistName}" TextTrimming="CharacterEllipsis" />
                                    <StackPanel.ContextFlyout>
                                        <MenuFlyout Opening="ListViewItemMenuFlyout_Opening">
                                            <MenuFlyoutItem x:Uid="MenuFlyoutItemPlay" Text="Play" Click="ListViewMenuPlay_Click">
                                                <MenuFlyoutItem.Icon>
                                                    <FontIcon Glyph="&#xE768;" />
                                                </MenuFlyoutItem.Icon>
                                            </MenuFlyoutItem>
                                            <MenuFlyoutSeparator />
                                            <MenuFlyoutItem x:Uid="MenuFlyoutItemCopy" Text="Copy" Click="ListViewMenuCopyToPC_Click">
                                                <MenuFlyoutItem.Icon>
                                                    <FontIcon Glyph="&#xE8C8;" />
                                                </MenuFlyoutItem.Icon>
                                            </MenuFlyoutItem>
                                            <MenuFlyoutItem Name="MenuFlyoutItemITunes" x:Uid="MenuFlyoutItemITunes" Text="iTunes" Click="ListViewMenuCopyToITunes_Click">
                                                <MenuFlyoutItem.Icon>
                                                    <FontIcon Glyph="&#xE90B;" />
                                                </MenuFlyoutItem.Icon>
                                            </MenuFlyoutItem>
                                        </MenuFlyout>
                                    </StackPanel.ContextFlyout>
                                </StackPanel>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>
                </Border>
            </SplitView.Pane>
            <Grid Visibility="{x:Bind listViewPlaylists.SelectedItem, Converter={StaticResource ValueToVisibilityConverter}, Mode=OneWay}">
                <Grid.RowDefinitions>
                    <RowDefinition Height="auto" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <Border Background="{StaticResource TextFillColorInverse}" CornerRadius="5" BorderBrush="#08000000" BorderThickness="0.5" Margin="4,5,4,5" Padding="20">
                    <Grid ColumnSpacing="20">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="auto" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
                        <Border x:Name="artworkBorder" Width="150" Height="150" BorderThickness="1" BorderBrush="{StaticResource TextFillColorDisabledBrush}" CornerRadius="8" 
                                Background="{StaticResource TextFillColorInverse}" PointerEntered="Border_PointerEntered" PointerExited="Border_PointerExited">
                            <Grid ColumnSpacing="20">
                                <FontIcon x:Name="placeholderFontIcon" Glyph="&#xE90B;" FontSize="28" Opacity=".8" Foreground="{StaticResource TextFillColorPrimary}" 
                                          Visibility="{Binding ElementName=artworkImage, Path=Source, Converter={StaticResource ValueToVisibilityConverter}, ConverterParameter='invert', Mode=OneWay}" />
                                <Image x:Name="artworkImage" Source="{x:Bind listViewPlaylists.SelectedItem, Converter={StaticResource PlaylistToPlaylistImageConverter}, Mode=OneWay}" Width="150" Height="150"/>
                                <Border x:Name="playlistPlayButton" HorizontalAlignment="Right" VerticalAlignment="Bottom" Padding="10" Margin="10" CornerRadius="64" 
                                        Background="{StaticResource ApplicationPageBackgroundThemeBrush}" Visibility="Collapsed" Tapped="PlaylistPlayButton_Tapped" DataContext="{x:Bind}">
                                    <FontIcon Glyph="&#xE768;" Foreground="{StaticResource TextFillColorPrimary}" />
                                </Border>
                                <Border HorizontalAlignment="Left" VerticalAlignment="Top" Padding="8,8,10,8" CornerRadius="0,0,12,0" Background="{StaticResource TextFillColorInverse}" Visibility="{x:Bind ContainsOnlyRemoteTracks, Converter={StaticResource ValueToVisibilityConverter}}">
                                    <FontIcon Glyph="&#xE753;" FontSize="16" FontWeight="Bold" Foreground="{StaticResource TextFillColorPrimary}" />
                                </Border>
                            </Grid>
                        </Border>
                        <StackPanel Grid.Column="1" VerticalAlignment="Center">
                            <TextBlock Text="{x:Bind listViewPlaylists.SelectedItem, Converter={StaticResource PlaylistToPlaybackInfoConverter}, ConverterParameter='[name]', Mode=OneWay}" FontWeight="Bold" FontSize="26" TextTrimming="CharacterEllipsis" />
                            <TextBlock Text="{x:Bind listViewPlaylists.SelectedItem, Converter={StaticResource PlaylistToPlaybackInfoConverter}, ConverterParameter='[type] • [trackcount]', Mode=OneWay}" Margin="0,8,0,0" Opacity=".7" TextTrimming="CharacterEllipsis" />
                            <Button x:Name="buttonPlayPlaylist" Style="{StaticResource AccentButtonStyle}" Margin="0,24,0,0" Click="PlayPlaylistButton_Click">
                                <StackPanel Orientation="Horizontal" Spacing="5">
                                    <FontIcon x:Name="buttonPlayPlaylistFontIcon" Glyph="&#xE768;" Foreground="{Binding Foreground, ElementName=buttonPlayPlaylistTextBlock}" />
                                    <TextBlock x:Name="buttonPlayPlaylistTextBlock" x:Uid="ButtonPlayPlaylistLabel" Text="Play" />
                                </StackPanel>
                            </Button>
                        </StackPanel>
                    </Grid>
                </Border>
                <local:MusicContentSongsPage Grid.Row="1" x:Name="songsPage" PropertyChanged="SongsPage_PropertyChanged" />
            </Grid>
        </SplitView>
        <Grid x:Name="gridNoResults" Visibility="Collapsed">
            <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
                <TextBlock x:Name="textBlockNoResults" x:Uid="TextBlockNoResultsPlaylists" Text="No playlists found." FontSize="18" FontStyle="Italic" FontWeight="SemiLight" Opacity=".7"/>
            </StackPanel>
        </Grid>
        <ContentDialog x:Name="contentDialogInvalidOperation" x:Uid="ContentDialogInvalidOperation" CloseButtonText="Dismiss" DefaultButton="Close">
            <TextBlock x:Name="textBlockInvalidOperation" TextWrapping="Wrap" />
        </ContentDialog>
    </Grid>
</local:MusicContentPage>
