<featurebase:FeaturePage
    x:Class="was.touchcopy.features.files.FilesPage"
    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.files"
    xmlns:controls="using:was.touchcopy.features.controls"
    xmlns:converters="using:was.touchcopy.features.files.converters"
    xmlns:data="using:was.touchcopy.features.files.data"
    xmlns:utilities="using:was.touchcopy.features.utilities"
    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:FilesPage}"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Page.Resources>
        <ResourceDictionary>
            <converters:DeviceEntriesToSortedDataSourceConverter x:Key="DeviceEntriesToSortedDataSourceConverter"/>
            <converters:BooleanToFolderFontIconGlyphConverter x:Key="BooleanToFolderFontIconGlyphConverter" />
            <converters:DeviceEntryToFileIconConverter x:Key="DeviceEntryToFileIconConverter" />
            <converters:FileViewModeToIsCheckedBoolConverter x:Key="FileViewModeToIsCheckedBoolConverter" />
            <converters:DeviceEntryToSizeStringConverter x:Key="DeviceEntryToSizeStringConverter" />
            <converters:DeviceEntryToVisabiltyConverter x:Key="DeviceEntryToVisabiltyConverter" /> 
            <DataTemplate x:Key="FilesTileViewDataTemplate" x:DataType="data:IDeviceEntry">
                <Grid MinWidth="200" Padding="8,12" HorizontalAlignment="Stretch">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="48" />
                        <ColumnDefinition Width="4" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <Image Height="48" Width="48" Stretch="Uniform" Source="{Binding Converter={StaticResource DeviceEntryToFileIconConverter}}" />
                    <StackPanel Grid.Column="2" Orientation="Vertical" VerticalAlignment="Center">
                        <TextBlock Text="{Binding Name}" TextAlignment="Left" TextWrapping="NoWrap" TextTrimming="CharacterEllipsis" />
                        <TextBlock Text="{Binding Converter={StaticResource DeviceEntryToSizeStringConverter}}" Visibility="{Binding Converter={StaticResource DeviceEntryToVisabiltyConverter}}"
                                   TextAlignment="Left" TextWrapping="NoWrap" TextTrimming="CharacterEllipsis" Opacity="0.6" />
                    </StackPanel>
                </Grid>
            </DataTemplate>
            <DataTemplate x:Key="FilesListViewDataTemplate" x:DataType="data:IDeviceEntry">
                <Grid Width="{Binding ActualWidth, ElementName=gridViewEntries, Mode=OneWay}" Margin="0" Padding="8,4,16,4" MinHeight="0" Height="auto">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="16" />
                        <ColumnDefinition Width="8" />
                        <ColumnDefinition Width="auto" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="auto" />
                        <ColumnDefinition Width="16" />
                    </Grid.ColumnDefinitions>
                    <Image Height="16" Width="16" Stretch="Uniform" Source="{Binding Converter={StaticResource DeviceEntryToFileIconConverter}, ConverterParameter=16}" />
                    <TextBlock Grid.Column="2" Text="{Binding Name}" TextAlignment="Left" TextWrapping="NoWrap" TextTrimming="CharacterEllipsis" VerticalAlignment="Center" Margin="0,0,0,2" />
                    <TextBlock Grid.Column="4" Text="{x:Bind Converter={StaticResource DeviceEntryToSizeStringConverter}}" TextAlignment="Left" TextWrapping="NoWrap" VerticalAlignment="Center" Opacity="0.5" />
                </Grid>
            </DataTemplate>
            <DataTemplate x:Key="FilesSmallSizedIconViewDataTemplate" x:DataType="data:IDeviceEntry">
                <Grid Width="250" Padding="8,4">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="16" />
                        <ColumnDefinition Width="4" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <Image Height="16" Width="16" Stretch="Uniform" Source="{Binding Converter={StaticResource DeviceEntryToFileIconConverter},ConverterParameter=16}" />
                    <TextBlock Grid.Column="2" Text="{Binding Name}" TextAlignment="Left" TextWrapping="NoWrap" TextTrimming="CharacterEllipsis" VerticalAlignment="Center" Margin="0,0,0,2" />
                </Grid>
            </DataTemplate>
            <DataTemplate x:Key="FilesMediumSizedIconViewDataTemplate" x:DataType="data:IDeviceEntry">
                <Grid MinWidth="150" Padding="8,12">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="48" />
                        <RowDefinition Height="8" />
                        <RowDefinition Height="38" />
                    </Grid.RowDefinitions>
                    <Image Height="48" Width="48" Stretch="Uniform" Source="{Binding Converter={StaticResource DeviceEntryToFileIconConverter}}" />
                    <TextBlock Grid.Row="2" Text="{Binding Name}" TextAlignment="Center" TextWrapping="Wrap" TextTrimming="CharacterEllipsis" />
                </Grid>
            </DataTemplate>
            <DataTemplate x:Key="FilesLargeSizedIconViewDataTemplate" x:DataType="data:IDeviceEntry">
                <Grid MinWidth="200" Padding="8,12">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="96" />
                        <RowDefinition Height="8" />
                        <RowDefinition Height="38" />
                    </Grid.RowDefinitions>
                    <Image Height="96" Width="96" Stretch="Uniform" Source="{Binding Converter={StaticResource DeviceEntryToFileIconConverter}, ConverterParameter=96}" />
                    <TextBlock Grid.Row="2" Text="{Binding Name}" TextAlignment="Center" TextWrapping="Wrap" TextTrimming="CharacterEllipsis" />
                </Grid>
            </DataTemplate>
        </ResourceDictionary>
    </Page.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Border Style="{ThemeResource PageHeaderBorderStyle}">
            <Grid>
                <CommandBar Style="{ThemeResource PageHeaderCommandBarStyle}">
                    <featurebase:CopyProgressAppBarUserController x:Name="copyProgressUserControl" Visibility="Collapsed" OnCancelTapped="CopyProgressUserControl_OnCancelTapped" MaxWidth="350" />
                    <AppBarButton x:Uid="ChangeViewButton" Label="View" Style="{ThemeResource AppBarButtonStyle}">
                        <AppBarButton.Icon>
                            <FontIcon Glyph="&#xF0E2;" />
                        </AppBarButton.Icon>
                        <AppBarButton.Flyout>
                            <MenuFlyout Placement="Bottom">
                                <ToggleMenuFlyoutItem x:Uid="ViewLargeIconsMenuFlyoutIcon" Text="Large Icons" Tag="4" Click="ViewModeToggleMenuFlyoutItem_Click"
                                                      IsChecked="{x:Bind ViewMode, Converter={StaticResource FileViewModeToIsCheckedBoolConverter}, ConverterParameter=4, Mode=OneWay}" />
                                <ToggleMenuFlyoutItem x:Uid="ViewMediumIconsMenuFlyoutIcon" Text="Medium-Sized Icons" Tag="3" Click="ViewModeToggleMenuFlyoutItem_Click"
                                                      IsChecked="{x:Bind ViewMode, Converter={StaticResource FileViewModeToIsCheckedBoolConverter}, ConverterParameter=3, Mode=OneWay}" />
                                <ToggleMenuFlyoutItem x:Uid="ViewSmallIconsMenuFlyoutIcon" Text="Small Icons" Tag="2" Click="ViewModeToggleMenuFlyoutItem_Click"
                                                      IsChecked="{x:Bind ViewMode, Converter={StaticResource FileViewModeToIsCheckedBoolConverter}, ConverterParameter=2, Mode=OneWay}" />
                                <ToggleMenuFlyoutItem x:Uid="ViewListMenuFlyoutIcon" Text="List" Tag="1" Click="ViewModeToggleMenuFlyoutItem_Click"
                                                      IsChecked="{x:Bind ViewMode, Converter={StaticResource FileViewModeToIsCheckedBoolConverter}, ConverterParameter=1, Mode=OneWay}" />
                                <ToggleMenuFlyoutItem x:Uid="ViewTilesMenuFlyoutIcon" Text="Tiles" Tag="0" Click="ViewModeToggleMenuFlyoutItem_Click"
                                                      IsChecked="{x:Bind ViewMode, Converter={StaticResource FileViewModeToIsCheckedBoolConverter}, ConverterParameter=0, Mode=OneWay}" />
                            </MenuFlyout>
                        </AppBarButton.Flyout>
                    </AppBarButton>
                    <AppBarButton x:Uid="SaveToPCButton" Icon="SaveLocal" Label="Save to PC" Style="{ThemeResource AppBarButtonStyle}" Click="SaveToPCAppBarButton_Click" IsEnabled="{x:Bind IsExportAvailable, Mode=OneWay}" />
                    <AppBarButton x:Uid="AddFromPCButton" Icon="Upload" Label="Add from PC" Style="{ThemeResource AppBarButtonStyle}" IsEnabled="{x:Bind IsImportAvailable, Mode=OneWay}">
                        <AppBarButton.Flyout>
                            <MenuFlyout>
                                <MenuFlyoutItem x:Uid="AddFromPCAddFilesMenuFlyoutIcon" Text="Add Files" Click="AddFileFromPCMenuFlyoutItem_Click">
                                    <MenuFlyoutItem.Icon>
                                        <FontIcon Glyph="&#xE8E5;" />
                                    </MenuFlyoutItem.Icon>
                                </MenuFlyoutItem>
                                <MenuFlyoutItem x:Uid="AddFromPCAddFolderMenuFlyoutIcon" Text="Add Folder" Click="AddFolderFromPCMenuFlyoutItem_Click">
                                    <MenuFlyoutItem.Icon>
                                        <FontIcon Glyph="&#xE8DA;" />
                                    </MenuFlyoutItem.Icon>
                                </MenuFlyoutItem>
                            </MenuFlyout>
                        </AppBarButton.Flyout>
                    </AppBarButton>
                    <AppBarButton x:Uid="CreateFolderButton" Icon="NewFolder" Label="New Folder" Style="{ThemeResource AppBarButtonStyle}" Click="CreateFolderAppBarButton_Click" IsEnabled="{x:Bind IsCreateAvailable, Mode=OneWay}" />
                    <AppBarButton x:Uid="RefreshButton" Icon="Refresh" Label="Refresh" Style="{ThemeResource AppBarButtonStyle}">
                        <AppBarButton.Flyout>
                            <MenuFlyout>
                                <MenuFlyoutItem x:Uid="RefreshCurrentFolderFlyoutItem" Text="Current Folder" Click="RefreshFolderAppBarButton_Click">
                                    <MenuFlyoutItem.Icon>
                                        <FontIcon Glyph="&#xE8B7;" />
                                    </MenuFlyoutItem.Icon>
                                </MenuFlyoutItem>
                                <MenuFlyoutItem x:Uid="RefreshDeviceFlyoutItem" Text="Device" Click="RefreshDeviceAppBarButton_Click">
                                    <MenuFlyoutItem.Icon>
                                        <FontIcon Glyph="&#xE8EA;" />
                                    </MenuFlyoutItem.Icon>
                                </MenuFlyoutItem>
                            </MenuFlyout>
                        </AppBarButton.Flyout>
                    </AppBarButton>
                    <AppBarButton x:Uid="DeleteSelectionButton" Icon="Delete" Label="Delete Selection" Style="{ThemeResource AppBarButtonStyle}" Click="DeleteSelectionAppBarButton_Click" IsEnabled="{x:Bind IsDeleteAvailable, Mode=OneWay}" />
                </CommandBar>
                <TextBlock Text="{Binding PageTitle}" Style="{ThemeResource PageHeaderTitleStyle}"/>
            </Grid>
        </Border>
        <SplitView Grid.Row="1" Style="{ThemeResource FeatureSplitViewStyle}" OpenPaneLength="300">
            <SplitView.Pane>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="auto" /> 
                    </Grid.ColumnDefinitions>
                    <TreeView x:Name="treeViewFolders" ItemsSource="{x:Bind RootFolders, Mode=OneWay}" SelectionMode="Multiple" KeyUp="TreeViewFolders_KeyUp"
                              Tapped="TreeViewFolders_Tapped" RightTapped="TreeViewFolders_RightTapped"  Margin="0,10,2,0"
                              DoubleTapped="TreeViewFolders_DoubleTapped" IsDoubleTapEnabled="True">
                        <TreeView.ItemTemplate>
                            <DataTemplate x:DataType="data:DeviceFolder">
                                <TreeViewItem x:Name="treeViewItem" AutomationProperties.Name="{x:Bind Name}"
                                          ItemsSource="{x:Bind Children, Converter={StaticResource DeviceEntriesToSortedDataSourceConverter}, ConverterParameter=ExcludeFiles, Mode=OneWay}">
                                    <TreeViewItem.ContextFlyout>
                                        <MenuFlyout>
                                            <MenuFlyoutItem x:Uid="SaveFolderToPCFlyoutItem" Text="Save to PC" Click="SaveFolderMenuFlyoutItem_Click">
                                                <MenuFlyoutItem.Icon>
                                                    <FontIcon Glyph="&#xE78C;" />
                                                </MenuFlyoutItem.Icon>
                                            </MenuFlyoutItem>
                                            <MenuFlyoutSeparator />
                                            <MenuFlyoutItem x:Uid="CreateSubFolderFlyoutItem" Text="New Folder" Click="CreateSubFolderMenuFlyoutItem_Click">
                                                <MenuFlyoutItem.Icon>
                                                    <FontIcon Glyph="&#xE8F4;" />
                                                </MenuFlyoutItem.Icon>
                                            </MenuFlyoutItem>
                                            <MenuFlyoutItem x:Uid="DeleteFolderFlyoutItem" Text="Delete Folder" Click="DeleteFolderMenuFlyoutItem_Click">
                                                <MenuFlyoutItem.Icon>
                                                    <FontIcon Glyph="&#xE74D;" />
                                                </MenuFlyoutItem.Icon>
                                            </MenuFlyoutItem>
                                        </MenuFlyout>
                                    </TreeViewItem.ContextFlyout>
                                    <Grid>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="auto"/>
                                            <ColumnDefinition Width="*"/>
                                        </Grid.ColumnDefinitions>
                                        <FontIcon x:Name="treeViewItemIcon" Glyph="{Binding Path=IsExpanded, ElementName=treeViewItem, Converter={StaticResource BooleanToFolderFontIconGlyphConverter}}"
                                              Margin="0,0,10,0" />
                                        <TextBlock  Grid.Column="1" TextTrimming="CharacterEllipsis" Text="{x:Bind Name}" VerticalAlignment="Center" />
                                    </Grid>
               
                                </TreeViewItem>
                            </DataTemplate>
                        </TreeView.ItemTemplate>
                    </TreeView>
                    <controls:ResizeSplitterHandle Grid.Column="1" />
                    
                </Grid>

            </SplitView.Pane>
            <Border Style="{ThemeResource FeatureContentPageBorder}" Padding="0">
                <Grid x:Name="gridContent">
                    <GridView x:Name="gridViewEntries" ItemClick="GridViewEntries_ItemClick" IsItemClickEnabled="True" RightTapped="GridViewEntries_RightTapped" PreviewKeyDown="GridViewEntries_PreviewKeyDown" SelectionMode="Extended"  HorizontalContentAlignment="Stretch" Padding="10">
                        <GridView.ItemContainerStyle>
                            <Style TargetType="GridViewItem" BasedOn="{StaticResource DefaultGridViewItemStyle}">
                                <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                                <Setter Property="MinHeight" Value="0" />
                            </Style>
                        </GridView.ItemContainerStyle>
                        <GridView.ContextFlyout>
                            <MenuFlyout>
                                <MenuFlyoutItem x:Uid="SaveToPCFlyoutItem" Text="Save to PC" Click="SaveEntryMenuFlyoutItem_Click">
                                    <MenuFlyoutItem.Icon>
                                        <FontIcon Glyph="&#xE78C;" />
                                    </MenuFlyoutItem.Icon>
                                </MenuFlyoutItem>
                                <MenuFlyoutSeparator />
                                <MenuFlyoutSubItem x:Uid="AddFromPCFlyoutItem" Text="Add from PC">
                                    <MenuFlyoutSubItem.Icon>
                                        <FontIcon Glyph="&#xE898;" />
                                    </MenuFlyoutSubItem.Icon>
                                    <MenuFlyoutItem x:Uid="AddFromPCAddFilesFlyoutItem" Text="Add Files" Click="AddFileFromPCMenuFlyoutItem_Click">
                                        <MenuFlyoutItem.Icon>
                                            <FontIcon Glyph="&#xE8E5;" />
                                        </MenuFlyoutItem.Icon>
                                    </MenuFlyoutItem>
                                    <MenuFlyoutItem x:Uid="AddFromPCAddFolderFlyoutItem" Text="Add Folder" Click="AddFolderFromPCMenuFlyoutItem_Click">
                                        <MenuFlyoutItem.Icon>
                                            <FontIcon Glyph="&#xE8DA;" />
                                        </MenuFlyoutItem.Icon>
                                    </MenuFlyoutItem>
                                </MenuFlyoutSubItem>
                                <MenuFlyoutItem x:Uid="CreateFolderFlyoutItem" Text="New Folder" Click="CreateFolderMenuFlyoutItem_Click">
                                    <MenuFlyoutItem.Icon>
                                        <FontIcon Glyph="&#xE8F4;" />
                                    </MenuFlyoutItem.Icon>
                                </MenuFlyoutItem>
                                <MenuFlyoutSeparator />
                                <MenuFlyoutItem x:Uid="DeleteEntryFlyoutItem" Text="Delete" Click="DeleteEntryMenuFlyoutItem_Click">
                                    <MenuFlyoutItem.Icon>
                                        <FontIcon Glyph="&#xE74D;" />
                                    </MenuFlyoutItem.Icon>
                                </MenuFlyoutItem>
                            </MenuFlyout>
                        </GridView.ContextFlyout>
                    </GridView>
                </Grid>
            </Border>
        </SplitView>
        <ContentDialog x:Name="dialogCreateFolder" x:Uid="CreateFolderDialog" PrimaryButtonText="Create" IsPrimaryButtonEnabled="True" CloseButtonText="Cancel" Title="New Folder Name:" DefaultButton="Primary">
            <Grid Background="Transparent">
                <Grid.RowDefinitions>
                    <RowDefinition Height="auto" />
                    <RowDefinition Height="auto" />
                </Grid.RowDefinitions>
                <TextBox x:Name="textBoxNewFolderName" x:Uid="NewFolderNameTextBox" PlaceholderText="New Folder" VerticalContentAlignment="Center" VerticalAlignment="Center" TextChanged="TextBoxNewFolder_TextChanged" />
                <TextBlock x:Name="textBlockInvalidNewFolderName" x:Uid="InvalidNewFolderNameTextBlock" Grid.Row="1" Text="The entered name is invalid." Foreground="Red" FontWeight="SemiBold" TextWrapping="Wrap" Margin="0,8,0,0" Visibility="Collapsed" />
            </Grid>
        </ContentDialog>
        <ContentDialog x:Name="dialogConfirmDelete" x:Uid="ConfirmDeleteDialog" PrimaryButtonText="Delete" IsPrimaryButtonEnabled="True" CloseButtonText="Cancel" Title="Once deleted, this action cannot be undone!" DefaultButton="None">
            <Grid Background="Transparent">
                <TextBlock x:Uid="DeletionWarningTextBlock" Text="Warning: Deleting system files or folders can cause irreversible issues with your device." Foreground="Red" TextWrapping="Wrap" />
            </Grid>
        </ContentDialog>
        <ContentDialog x:Name="dialogConfirmOverwrite" x:Uid="ConfirmOverwriteDialog" PrimaryButtonText="Overwrite" IsPrimaryButtonEnabled="True" CloseButtonText="Cancel" Title="Overwrite existing files?" DefaultButton="None">
            <Grid Background="Transparent">
                <TextBlock x:Uid="OverwriteWarningTextBlock" Text="Warning: One or more files already exist with the same name. It will not be possible to recover these if overwritten." Foreground="Red" TextWrapping="Wrap" />
            </Grid>
        </ContentDialog>
    </Grid>
</featurebase:FeaturePage>
