<messaging:MessagingFeaturePage
    x:Class="was.touchcopy.features.messaging.whatsapp.WhatsAppPage"
    xmlns:featurebase="using:was.touchcopy.features"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:messaging="using:was.touchcopy.features.messaging" 
    xmlns:commoncontrols="using:was.touchcopy.features.controls"
    xmlns:local="using:was.touchcopy.features.messaging.whatsapp"
    xmlns:messagingUX="using:was.touchcopy.features.messaging.ux"
    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:WhatsAppPage}"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Border Style="{ThemeResource PageHeaderBorderStyle}" Background="{ThemeResource AppBarBackgroundThemeBrush}">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <messagingUX:MessagingAppBarControl Grid.Column="1" x:Name="messagingAppBarControl" CancelOperation="CopyProgressUserControl_OnCancelTapped" SavePdf="AppBarButtonSavePDF_Click" SaveHtml="AppBarButtonSaveWeb_Click" SavePlainText="AppBarButtonSavePlainText_Click" SaveCsv="AppBarButtonSaveCsv_Click" SaveAttachments="AppBarButtonSaveAttachments_Click" ViewAttachments="AppBarButtonViewAttachments_Click" Print="AppBarButtonPrint_Click" FilterDates="AppBarButtonFilterDates_Click" />
                <TextBlock Text="{Binding PageTitle }" Style="{ThemeResource PageHeaderTitleStyle}"/>
            </Grid>
        </Border>

        <SplitView Grid.Row="1" OpenPaneLength="300" Style="{ThemeResource FeatureSplitViewStyle}">
            <SplitView.Pane>
                <Grid Margin="0,10,0,0" >
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="auto"/>
                    </Grid.ColumnDefinitions>
                    <TextBox x:Name="textBoxConversationFilter" x:Uid="textBoxConversationFilter" Margin="10,5" PlaceholderText="XX Search WhatsApp Contacts" 
                             TextChanged="TextBoxConversationFilter_TextChanged" />
                    <ListView Grid.Row="1" x:Name="listViewConversations" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
                          SelectionChanged="ListViewConversations_SelectionChanged" ScrollViewer.HorizontalScrollBarVisibility="Auto" Margin="0,0,4,0"
                          SelectionMode="Extended" IsItemClickEnabled="True" ItemsSource="{Binding ConversationGroups.View}">
                        <ListView.GroupStyle>
                            <GroupStyle HidesIfEmpty="True">
                                <GroupStyle.HeaderTemplate>
                                    <DataTemplate>
                                        <TextBlock Text="{Binding Header}" Margin="0,5,0,0" />
                                    </DataTemplate>
                                </GroupStyle.HeaderTemplate>
                            </GroupStyle>
                        </ListView.GroupStyle>
                        <ListView.ItemTemplate>
                            <DataTemplate x:DataType="messaging:MessageConversation">
                                <Grid Margin="0,2">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="auto"/>
                                        <ColumnDefinition Width="*"/>
                                        <ColumnDefinition Width="auto"/>
                                    </Grid.ColumnDefinitions>
                                    <PersonPicture DisplayName="{x:Bind Title}" PreferSmallImage="True" ProfilePicture="{x:Bind HeaderBitmapImageTask.Result, Mode=OneWay}" Height="40" Margin="0,0,5,0"/>
                                    <TextBlock HorizontalAlignment="Left" Grid.Column="1" TextAlignment="Left" Text="{x:Bind Title}" VerticalAlignment="Center"  
                                               TextTrimming="CharacterEllipsis" ToolTipService.ToolTip="{x:Bind Title}" Margin="5,0,0,5" />
                                </Grid>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                        <ListView.ContextFlyout>
                            <MenuFlyout>
                                <MenuFlyoutItem x:Name="menuFlyoutItemSortByName" x:Uid="FlyoutItemSortByName" Text="XX Sort by Name" Click="_menuFlyoutItemSortByName_Click">
                                    <MenuFlyoutItem.Icon>
                                        <FontIcon Glyph="&#xE779;" />
                                    </MenuFlyoutItem.Icon>
                                </MenuFlyoutItem>
                                <MenuFlyoutItem x:Name="menuFlyoutItemSortByLastUpdated" x:Uid="FlyoutItemSortByLastUpdated" Text="XX Sort by Last Updated" Click="_menuFlyoutItemSortByLastUpdated_Click">
                                    <MenuFlyoutItem.Icon>
                                        <FontIcon Glyph="&#xE787;" />
                                    </MenuFlyoutItem.Icon>
                                </MenuFlyoutItem>
                            </MenuFlyout>
                        </ListView.ContextFlyout>
                    </ListView>
                    <commoncontrols:ResizeSplitterHandle Grid.RowSpan="2" Grid.Column="1"/>
                </Grid>
            </SplitView.Pane>
            <Grid Margin="0,0,0,0" x:Name="gridContent">
                <messagingUX:MessagingThreadContentPage x:Name="messagingThreadPage" AppBarControl="{x:Bind messagingAppBarControl}"/>
            </Grid>
        </SplitView>
        <Grid Grid.RowSpan="2" x:Name="gridFailedToLoadMessages" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Visibility="Collapsed">
            <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
                <TextBlock x:Uid="TextBlockNoWhatsAppMessageFound" Margin="36,36,36,0" Grid.ColumnSpan="2" Text="XX No WhatsApp messages found..." Style="{ThemeResource TitleTextBlockStyle}" HorizontalAlignment="Center" />
                <Border x:Name="cardEndToEndEncryption" Margin="36" Padding="16" Background="{ThemeResource CardBackgroundFillColorDefault}" BorderBrush="{ThemeResource CardStrokeColorDefault}" BorderThickness="{ThemeResource FlyoutBorderThemeThickness}" CornerRadius="{ThemeResource OverlayCornerRadius}" Opacity="0" Translation="0,-20,0">
                    <Grid ColumnSpacing="12">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="*" MaxWidth="680" />
                        </Grid.ColumnDefinitions>
                        <FontIcon Glyph="&#xe705;" FontSize="40" VerticalAlignment="Top"/>
                        <StackPanel Grid.Column="1" Spacing="4">
                            <TextBlock x:Uid="TextBlockEndToEndEncryptionTitle" Style="{ThemeResource BodyStrongTextBlockStyle}" Text="XX WhatsApp Backup Encryption" />
                            <TextBlock x:Name="textBlockEndToEndEncryptionLineOne" x:Uid="TextBlockEndToEndEncryptionLineOne" Style="{ThemeResource CaptionTextBlockStyle}" Text="XX {}{PRODUCTNAME} is unable to access WhatsApp chats if 'End-to-end encrypted backup' is enabled within WhatsApp." />
                            <TextBlock x:Uid="TextBlockEndToEndEncryptionLineTwo" Style="{ThemeResource CaptionTextBlockStyle}" Text="XX You can disable this within WhatsApp on your device by going to 'Settings' > 'Chats' > 'Chat backup'." />
                            <HyperlinkButton x:Uid="HyperlinkButtonEndToEndEncryption" Margin="-12,20,0,0" Content="XX Find out more..." NavigateUri="https://www.wideanglesoftware.com/support/touchcopy/how-do-i-copy-whatsapp-messages-from-my-iphone-to-my-pc-mac.php#troubleshooting" />
                        </StackPanel>
                    </Grid>
                    <Border.TranslationTransition>
                        <Vector3Transition Duration="0:0:0.5" />
                    </Border.TranslationTransition>
                    <Border.OpacityTransition>
                        <ScalarTransition Duration="0:0:0.5" />
                    </Border.OpacityTransition>
                </Border>
            </StackPanel>
        </Grid>
        <!-- WebView for use when printing -->
        <commoncontrols:WebViewPrintUserControl x:Name="webViewPrintUserControl" Grid.RowSpan="2" Visibility="Collapsed" />
    </Grid>
</messaging:MessagingFeaturePage>
