<Page
    x:Class="was.touchcopy.features.voicememos.VoiceMemosContentPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:was.touchcopy.features.voicememos"
    xmlns:converters="using:was.touchcopy.features.voicememos.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:VoiceMemosContentPage}"
    Visibility="{x:Bind Folder, Converter={StaticResource ValueToVisibilityConverter}, Mode=OneWay}">
    <Page.Resources>
        <ResourceDictionary>
            <converters:BoolToPlaybackGlyphConverter x:Key="BoolToPlaybackGlyphConverter" />
            <converters:VoiceMemosFolderToFilteredEntriesConverter x:Key="VoiceMemosFolderToFilteredEntriesConverter" />
            <converters:VoiceMemosFilterOptionsToDescriptionStringConverter x:Key="VoiceMemosFilterOptionsToDescriptionStringConverter" />
            <coreconverters:DurationToStringConverter x:Key="DurationToStringConverter" />
            <coreconverters:ValueToVisibilityConverter x:Key="ValueToVisibilityConverter" />
        </ResourceDictionary>
    </Page.Resources>
    <Border Style="{ThemeResource FeatureContentPageBorder}" Padding="0">
        <Grid >
            <Grid.RowDefinitions>
                <RowDefinition Height="auto" />
                <RowDefinition Height="auto" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <InfoBar x:Uid="InfoBarFilter" IsOpen="True" Title="XX Date Filter Applied" Message="{x:Bind DateFilterOptions, Converter={StaticResource VoiceMemosFilterOptionsToDescriptionStringConverter}, Mode=OneWay}" 
                 Severity="Informational" HorizontalAlignment="Stretch" IsClosable="False" Visibility="{x:Bind DateFilterOptions, Converter={StaticResource ValueToVisibilityConverter}, Mode=OneWay}">
                <InfoBar.IconSource>
                    <SymbolIconSource Symbol="Calendar"/>
                </InfoBar.IconSource>
                <InfoBar.ActionButton>
                    <Button x:Name="buttonClearFilter" x:Uid="ClearFilterButton" Content="XX Clear Filter" Click="_buttonClearFilter_Click" />
                </InfoBar.ActionButton>
            </InfoBar>
            <Border Grid.Row="1" BorderThickness="0,0,0,1" BorderBrush="{ThemeResource AppBarBorderThemeBrush}" Padding="16,4,12,6">
                <Grid ColumnSpacing="4">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="32" />
                        <ColumnDefinition Width="3*" />
                        <ColumnDefinition Width="2*" />
                        <ColumnDefinition Width="1*" />
                        <ColumnDefinition Width="32" />
                    </Grid.ColumnDefinitions>
                    <Border BorderThickness="0,0,1,0" BorderBrush="{ThemeResource AppBarBorderThemeBrush}" />
                    <Border Grid.Column="1" BorderThickness="0,0,1,0" BorderBrush="{ThemeResource AppBarBorderThemeBrush}">
                        <TextBlock x:Uid="NameLabelTextBlock" Tag="0" Text="XX Name" Tapped="_fileColumnHeader_Tapped" />
                    </Border>
                    <Border Grid.Column="2" BorderThickness="0,0,1,0" BorderBrush="{ThemeResource AppBarBorderThemeBrush}">
                        <TextBlock x:Uid="DateLabelTextBlock" Tag="1" Text="XX Date" Tapped="_fileColumnHeader_Tapped" />
                    </Border>
                    <TextBlock x:Uid="DurationLabelTextBlock" Grid.Column="3" Tag="2" Text="XX Duration" Tapped="_fileColumnHeader_Tapped" />
                    <FontIcon Grid.Column="4" Tag="3" Glyph="&#xEB51;" Foreground="{ThemeResource TextFillColorPrimary}" Tapped="_fileColumnHeader_Tapped" />
                </Grid>
            </Border>
            <ListView Grid.Row="2" x:Name="listViewFiles" ItemsSource="{x:Bind Folder, Converter={StaticResource VoiceMemosFolderToFilteredEntriesConverter}, Mode=OneWay}"
                  SelectionMode="Extended" RightTapped="_listViewFiles_RightTapped">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <Grid ColumnSpacing="4">
                            <Grid.ContextFlyout>
                                <MenuFlyout>
                                    <MenuFlyoutItem x:Uid="MenuFlyoutSaveFileToPC" Text="XX Save to PC" Icon="SaveLocal" Click="_menuFlyoutSaveFileToPC_Click" />
                                    <MenuFlyoutSeparator />
                                    <MenuFlyoutItem x:Uid="MenuFlyoutSortFilesByName" Tag="0" Text="XX Sort by Name" Click="_menuFlyoutApplySort_Click">
                                        <MenuFlyoutItem.Icon>
                                            <FontIcon Glyph="&#xE84B;" />
                                        </MenuFlyoutItem.Icon>
                                    </MenuFlyoutItem>
                                    <MenuFlyoutItem x:Uid="MenuFlyoutSortFilesByDate" Tag="1" Text="XX Sort by Date" Click="_menuFlyoutApplySort_Click">
                                        <MenuFlyoutItem.Icon>
                                            <FontIcon Glyph="&#xE787;" />
                                        </MenuFlyoutItem.Icon>
                                    </MenuFlyoutItem>
                                    <MenuFlyoutItem x:Uid="MenuFlyoutSortFilesByDuration" Tag="2" Text="XX Sort by Duration" Click="_menuFlyoutApplySort_Click">
                                        <MenuFlyoutItem.Icon>
                                            <FontIcon Glyph="&#xE823;" />
                                        </MenuFlyoutItem.Icon>
                                    </MenuFlyoutItem>
                                    <MenuFlyoutItem x:Uid="MenuFlyoutSortFilesByFavorites" Tag="3" Text="XX Sort by Favorites" Click="_menuFlyoutApplySort_Click">
                                        <MenuFlyoutItem.Icon>
                                            <FontIcon Glyph="&#xEB51;" />
                                        </MenuFlyoutItem.Icon>
                                    </MenuFlyoutItem>
                                </MenuFlyout>
                            </Grid.ContextFlyout>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="32" />
                                <ColumnDefinition Width="3*" />
                                <ColumnDefinition Width="2*" />
                                <ColumnDefinition Width="1*" />
                                <ColumnDefinition Width="32" />
                            </Grid.ColumnDefinitions>
                            <Button x:Name="buttonPlayEntry" Padding="0" Background="Transparent" BorderThickness="0" Click="_buttonPlayEntry_Click">
                                <FontIcon Glyph="{Binding IsPlaying, Converter={StaticResource BoolToPlaybackGlyphConverter}, Mode=OneWay}" FontSize="15" />
                            </Button>
                            <TextBlock Grid.Column="1" Text="{Binding Name}" />
                            <TextBlock Grid.Column="2" Text="{Binding Date}" />
                            <TextBlock Grid.Column="3" Text="{Binding Duration, Converter={StaticResource DurationToStringConverter}}" />
                            <FontIcon Grid.Column="4" Glyph="&#xEB52;" Visibility="{Binding IsLoved, Converter={StaticResource ValueToVisibilityConverter}}" Foreground="{ThemeResource SystemAccentColor}" HorizontalAlignment="Right" />
                        </Grid>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </Grid>
    </Border>
</Page>
