<!-- Page used to display conversation messages.
     A common format for all sources of messaging.
     Displays a conversation header and a list of messages. -->
<Page
    x:Class="was.touchcopy.features.messaging.ux.MessagingThreadContentPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:was.touchcopy.features.messaging.ux"
    xmlns:converters="using:was.touchcopy.features.messaging.converters"
    xmlns:commonConverters="using:was.touchcopy.features.converters"
    xmlns:commonControls="using:was.touchcopy.features.controls"
    xmlns:featurebase="using:was.touchcopy.features"
    xmlns:messaging="using:was.touchcopy.features.messaging"
    xmlns:commondialogs="using:was.touchcopy.features.dialogs"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:data="using:was.touchcopy.features.messaging"   
    d:DataContext="{d:DesignInstance Type=local:MessagingThreadContentPage}"
    mc:Ignorable="d" 
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Page.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="ms-appx:///was.touchcopy.features.messaging/ux/MessageContentImageDataTemplate.xaml"/>
                <ResourceDictionary Source="ms-appx:///was.touchcopy.features.messaging/ux/MessageContentImagePlaceholderDataTemplate.xaml"/>
                <ResourceDictionary Source="ms-appx:///was.touchcopy.features.messaging/ux/MessageContentTextDataTemplate.xaml"/>
                <ResourceDictionary Source="ms-appx:///was.touchcopy.features.messaging/ux/MessageContentAudioV3DataTemplate.xaml"/>
                <ResourceDictionary Source="ms-appx:///was.touchcopy.features.messaging/ux/MessageContentVideoDataTemplate.xaml"/>
                <ResourceDictionary Source="ms-appx:///was.touchcopy.features.messaging/ux/MessageContentVideoPlaceholderDataTemplate.xaml"/>
                <ResourceDictionary Source="ms-appx:///was.touchcopy.features.messaging/ux/MessageContentContactDataTemplate.xaml"/>
                <ResourceDictionary Source="ms-appx:///was.touchcopy.features.messaging/ux/MessageContentDebugDataTemplate.xaml"/>
                <ResourceDictionary Source="ms-appx:///was.touchcopy.features.messaging/ux/MessageContentApplicationDataTemplate.xaml"/>
                <ResourceDictionary Source="ms-appx:///was.touchcopy.features.messaging/ux/MessageContentContactDataTemplate.xaml"/>
                <ResourceDictionary Source="ms-appx:///was.touchcopy.features.messaging/ux/MessageContentLocationDataTemplate.xaml"/>
                <ResourceDictionary Source="ms-appx:///was.touchcopy.features.messaging/ux/MessageContentInternetDataTemplate.xaml"/>
                <ResourceDictionary Source="ms-appx:///was.touchcopy.features.messaging/ux/MessageContentStickerDataTemplate.xaml"/>
                <ResourceDictionary Source="ms-appx:///was.touchcopy.features.messaging/ux/MessageContentSticonTextDataTemplate.xaml"/>
                <ResourceDictionary Source="ms-appx:///was.touchcopy.features.messaging/ux/MessageContentWACallDataTemplate.xaml" />
                <ResourceDictionary Source="ms-appx:///was.touchcopy.features.messaging/ux/MessageContentPollDataTemplate.xaml"/>
                <ResourceDictionary>
                    <converters:MessageDetailToHorizontalAlignmentConverter x:Key="MessageDetailToHorizontalAlignmentConverter"/>
                    <converters:MessageDetailToMessageHeaderTextConverter x:Key="MessageDetailToMessageHeaderTextConverter"/>
                    <converters:MessageDetailToForegroundConverter x:Key="MessageDetailToForegroundConverter"/>
                    <converters:MessageTextToFontSizeConverter x:Key="MessageTextToFontSizeConverter" />
                    <converters:MessageDetailToReadTextBlockTextConverter x:Key="MessageDetailToReadTextBlockTextConverter"/>
                    <converters:MessageDetailToVisibilityConverter x:Key="MessageDetailToVisibilityConverter"/>
                    <converters:BoolToFontWeightConverter x:Key="BoolToFontWeightConverter"/>
                    <converters:MessageDetailToPersonPictureVisibilityConverter x:Key="MessageDetailToPersonPictureVisibilityConverter"/>
                    <converters:DateFilterOptionsToTextConverter x:Key="DateFilterOptionsToTextConverter"/>
                    <converters:MessageDetailReactionsVisibilityConverter x:Key="MessageDetailReactionsVisibilityConverter"/>
                    <converters:MessageDetailToThicknessConverter x:Key="MessageDetailToThicknessConverter"/>
                    <converters:MessageDetailToJoinedContentConverter x:Key="MessageDetailToJoinedContentConverter" />
                    <converters:MessagesToContainedContentApplicationsConverter x:Key="MessagesToContainedContentApplicationsConverter" />
                    <converters:MessagesToImageBackupFilesConverter x:Key="MessagesToImageBackupFilesConverter" />
                    <converters:MessagesToVideoBackupFilesConverter x:Key="MessagesToVideoBackupFilesConverter" />
                    <converters:MessagesToHasImagesVisibilityConverter x:Key="MessagesToHasImagesVisibilityConverter" />
                    <converters:MessagesToHasVideosVisibilityConverter x:Key="MessagesToHasVideosVisibilityConverter" />
                    <converters:MessagesToHasFilesVisibilityConverter x:Key="MessagesToHasFilesVisibilityConverter" />
                    <converters:InlineMessageThreadToHorizontalAlignmentConverter x:Key="InlineMessageThreadToHorizontalAlignmentConverter" />
                    <converters:InlineMessageThreadToSenderDetailConverter x:Key="InlineMessageThreadToSenderDetailConverter" />
                    <converters:InlineReplyCountToTextConverter x:Key="InlineReplyCountToTextConverter" />
                    <converters:MessageDirectionToTextAlignmentConverter x:Key="MessageDirectionToTextAlignmentConverter" />
                    <converters:InlineMessageThreadToPreviewTextConverter x:Key="InlineMessageThreadToPreviewTextConverter" />
                    <converters:MessageContentToDebugVisibilityConverter x:Key="MessageContentToDebugVisibilityConverter" />
                    <converters:MessageReplyToNameTextConverter x:Key="MessageReplyToNameTextConverter" />
                    <converters:ReplyToAttachmentTypeToGlyphConverter x:Key="ReplyToAttachmentTypeToGlyphConverter" />
                    <converters:MessageReplyToDescriptionTextConverter x:Key="MessageReplyToDescriptionTextConverter" />
                    <converters:MessageDetailsToMarginConverter x:Key="MessageDetailsToMarginConverter" />
                    <commonConverters:ValueToVisibilityConverter x:Key="ValueToVisibilityConverter"/>
                    <commonConverters:ColorToSolidColorBrushConverter x:Key="ColorToSolidColorBrushConverter"/>
                    <commonConverters:CollectionToHasItemsBoolConverter x:Key="CollectionToHasItemsBoolConverter" />
                    <local:MessageContentTemplateSelector  x:Key="MessageContentTemplateSelector"
                        MessageContentImageDataTemplate="{StaticResource MessageContentImageDataTemplate}" 
                        MessageContentImagePlaceholderDataTemplate="{StaticResource MessageContentImagePlaceholderDataTemplate}"
                        MessageContentTextDataTemplate="{StaticResource MessageContentTextDataTemplate}"
                        MessageContentAudioV3DataTemplate="{StaticResource MessageContentAudioV3DataTemplate}"
                        MessageContentVideoDataTemplate="{StaticResource MessageContentVideoDataTemplate}"
                        MessageContentVideoPlaceholderDataTemplate="{StaticResource MessageContentVideoPlaceholderDataTemplate}"
                        MessageContentContactDataTemplate="{StaticResource MessageContentContactDataTemplate}"
                        MessageContentDebugDataTemplate="{StaticResource MessageContentDebugDataTeplate}"
                        MessageContentApplicationDataTemplate="{StaticResource MessageContentApplicationDataTemplate}"
                        MessageContentLocationDataTemplate="{StaticResource MessageContentLocationDataTemplate}"
                        MessageContentInternetDataTemplate="{StaticResource MessageContentInternetDataTemplate}"
                        MessageContentStickerDataTemplate="{StaticResource MessageContentStickerDataTemplate}"
                        MessageContentSticonTextDataTemplate="{StaticResource MessageContentSticonTextDataTemplate}"
                        MessageContentWACallDataTemplate="{StaticResource MessageContentWACallDataTemplate}"
                        MessageContentPollDataTemplate="{StaticResource MessageContentPollDataTemplate}"/>
                </ResourceDictionary>

                <local:MessageContentImageDataTemplate 
                    OnRequestSaveImageFromMessageContent="_messageContentImageDataTemplate_OnRequestSaveImageFromMessageContent"
                    OnRequestPreviewImageInMessageContent="_messageContentImageDataTemplate_OnRequestPreviewImageInMessageContent"/>
                <local:MessageContentImagePlaceholderDataTemplate
                    OnRequestSaveImageFromMessageContent="_messageContentImageDataTemplate_OnRequestSaveImageFromMessageContent"
                    OnRequestPreviewImageInMessageContent="_messageContentImageDataTemplate_OnRequestPreviewImageInMessageContent" />
                <local:MessageContentVideoDataTemplate
                    OnRequestSaveVideoFromMessageContent="_messageContentVideoDataTemplate_OnRequestSaveVideoFromMessageContent"
                    OnRequestPreviewVideoInMessageContent="_messageContentVideoDataTemplate_OnRequestPreviewVideoInMessageContent"/>
                <local:MessageContentVideoPlaceholderDataTemplate
                    OnRequestSaveVideoFromMessageContent="_messageContentVideoDataTemplate_OnRequestSaveVideoFromMessageContent"
                    OnRequestPreviewVideoInMessageContent="_messageContentVideoDataTemplate_OnRequestPreviewVideoInMessageContent" />
                <local:MessageContentAudioV3DataTemplate
                    OnRequestSaveAudioFromMessageContent="_messageContentAudioDataTemplate_OnRequestSaveAudioFromMessageContent" />
                <local:MessageContentContactDataTemplate OnOpenContact="_messageContentContactDataTemplate_OnOpenContact"/>
                <local:MessageContentApplicationDataTemplate
                    OnRequestSaveAttachmentFromMessageContent="_messageContentApplicationDataTemplate_OnRequestSaveAttachmentFromMessageContent"/>
                <local:MessageContentStickerDataTemplate />
                <local:MessageContentPollDataTemplate />
    
            </ResourceDictionary.MergedDictionaries>
            <Style TargetType="TextBlock" x:Key="TextBlockDebug">
                <Setter Property="FontSize" Value="10"/>
                <Setter Property="Foreground" Value="Red"/>
                <Setter Property="Opacity" Value="0.5"/>
                <Setter Property="IsTextSelectionEnabled" Value="True"/>
            </Style>
        </ResourceDictionary>
    </Page.Resources>
    <Grid>
        <Grid x:Name="borderNoConversationSelected">
            <Border Style="{ThemeResource FeatureContentPageBorder}" Background="{ThemeResource CardBackgroundFillColorDefaultBrush}" Padding="0">
                <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" >
                    <FontIcon Glyph="&#xE8BD;" FontSize="50"/>
                    <TextBlock x:Uid="TextBlockSelectAConversation" Text="XX Select a conversation to view messages" Padding="0,20,0,0" Style="{ThemeResource SubtitleTextBlockStyle}" 
           HorizontalAlignment="Center" Margin="0,0,0,10"/>
                </StackPanel>
            </Border>
        </Grid>
        <Grid x:Name="gridConversationSelected" Visibility="Collapsed">
            <Grid.RowDefinitions>
                <RowDefinition Height="auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <SelectorBar x:Name="selectorBarView" HorizontalContentAlignment="Right" Padding="0" Margin="0"
                     Background="{ThemeResource WindowCaptionBackground}" SelectionChanged="_selectorBarView_SelectionChanged" >
                <SelectorBarItem x:Name="SelectorItemConversation" x:Uid="SelectorItemConversation" Text="XX Conversation" IsSelected="True" />
                <SelectorBarItem x:Name="SelectorItemImages" x:Uid="SelectorItemImages" Text="XX Images"/>
                <SelectorBarItem x:Name="SelectorItemFiles" x:Uid="SelectorItemFiles" Text="XX Files"/>
            </SelectorBar>
            <Grid Grid.Row="1" x:Name="gridContentDisplay" >
                <Border x:Name="borderMessages" Style="{ThemeResource FeatureContentPageBorder}"  Padding="0"  CornerRadius="8">
                    <Grid x:Name="gridContent" Background="{ThemeResource CardBackgroundFillColorDefaultBrush}">
                        <Image Source="{Binding BackgroundImage, Mode=OneWay}" Stretch="UniformToFill" Opacity="0.3"/>
                        <ScrollViewer x:Name="messageScrollViewer"  HorizontalScrollMode="Disabled" IsVerticalRailEnabled="False" 
                                      IsDeferredScrollingEnabled="True" HorizontalAlignment="Stretch"  Padding="30,0">
                            <Grid >
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="auto"/>
                                    <RowDefinition Height="*"/>
                                </Grid.RowDefinitions>

                                <!-- Header Layout -->
                                <Grid Padding="0,10" VerticalAlignment="Top">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="*"/>
                                        <ColumnDefinition Width="auto"/>
                                        <ColumnDefinition Width="auto"/>
                                    </Grid.ColumnDefinitions>
                                    <StackPanel Orientation="Horizontal" >
                                        <PersonPicture x:Name="PersonPictureConveration" DisplayName="{Binding Conversation.Title}" PreferSmallImage="True" 
                                                 ProfilePicture="{Binding HeaderBitmapImageTask.Result}" Height="70" VerticalAlignment="Center" Margin="0,0,15,0"/>
                                        <StackPanel>
                                            <!-- Conversation Title -->
                                            <TextBlock>
                                                 <Run Text="{Binding Conversation.ProviderType}"/>
                                                 <Run x:Uid="textBlockRunConversationWith" Text="xx conversation with..."/>
                                            </TextBlock>
                                            <TextBlock Text="{Binding Conversation.Title}" FontWeight="Bold" FontSize="24"/>
                                            <TextBlock Visibility="{Binding Converter={StaticResource MessageContentToDebugVisibilityConverter}}" Text="{Binding Conversation.ConversationId}" Style="{StaticResource TextBlockDebug}"/> 
                                            <!-- View members button and flyout -->
                                            <Button x:Uid="buttonViewParticipants" Content="XX View Members" Padding="3" BorderBrush="Transparent" BorderThickness="0"
                                                    Background="Transparent" Foreground="{ThemeResource SystemControlHyperlinkTextBrush}"
                                                    Visibility="{Binding Conversation.IsTitleGroupName, Converter={StaticResource ValueToVisibilityConverter}}">
                                                <Button.Flyout>
                                                    <Flyout Placement="Bottom">
                                                        <Flyout.FlyoutPresenterStyle>
                                                            <Style TargetType="FlyoutPresenter">
                                                                <Setter Property="MaxHeight" Value="300"/>
                                                                <Setter Property="Padding" Value="5,5,20,5"/>
                                                                <Setter Property="Background" Value="{ThemeResource AcrylicBackgroundFillColorDefaultBrush}"/>
                                                                <Setter Property="BorderBrush" Value="{ThemeResource ComboBoxPopupBorderThemeBrush}"/>
                                                                <Setter Property="BorderThickness" Value="2"/>
                                                                <Setter Property="CornerRadius" Value="{ThemeResource ComboBoxDropDownButtonBackgroundCornerRadius}"/>
                                                            </Style>
                                                        </Flyout.FlyoutPresenterStyle>

                                                        <ItemsRepeater ItemsSource="{Binding Conversation.Participants, Mode=OneWay}">
                                                            <ItemsRepeater.Layout>
                                                                <StackLayout Orientation="Vertical" Spacing="4" />
                                                            </ItemsRepeater.Layout>
                                                            <DataTemplate>
                                                                <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
                                                                    <PersonPicture  DisplayName="{Binding Name}" ProfilePicture="{Binding HeaderBitmapImageTask.Result}" PreferSmallImage="True" Height="36" Margin="0,0,7,0" VerticalAlignment="Center" />
                                                                    <TextBlock Text="{Binding Name}" VerticalAlignment="Center" />
                                                                </StackPanel>
                                                            </DataTemplate>
                                                        </ItemsRepeater>
                                                    </Flyout>
                                                </Button.Flyout>
                                            </Button>
                                        </StackPanel>
                                    </StackPanel>
                                    <!-- Date Filtering Layout -->
                                    <StackPanel Orientation="Horizontal" Grid.Column="1" x:Name="stackPanelDateFiltered" Visibility="Collapsed" HorizontalAlignment="Right" Margin="20,0,0,0">
                                        <StackPanel  VerticalAlignment="Center" >
                                            <TextBlock x:Uid="TextBlockMessagesFilteredByDate" Text="XX Messages filtered by date" FontWeight="Black"/>
                                            <TextBlock Text="{Binding DateFilter, Converter={StaticResource DateFilterOptionsToTextConverter}}" HorizontalAlignment="Right"/>
                                        </StackPanel>
                                        <Button x:Uid="buttonClearDateFilter" Style="{StaticResource AccentButtonStyle}" x:Name="buttonClearDateFilter" 
                                                Content="XX Clear Filter"  Margin="10,0,0,0" Click="_buttonClearDateFilter_Click"/>
                                    </StackPanel>
                                </Grid>
                                <Line X1="0" Y1="0" Y2="0" X2="{Binding ElementName=gridContent, Path=ActualWidth}" Grid.Row="1" Stroke="{ThemeResource ControlStrokeColorSecondary }"  StrokeThickness="1"/>
                                <!-- Conversation with no messages grid -->
                                <Grid  Grid.Row="2" x:Name="gridNoMessages" Visibility="{x:Bind Messages, Mode=OneWay, Converter={StaticResource CollectionToHasItemsBoolConverter}, ConverterParameter='invert'}">
                                    <TextBlock x:Name="textBlockNoMessagesFound" HorizontalAlignment="Center" VerticalAlignment="Center" Style="{ThemeResource HeaderTextBlockStyle}" FontSize="18" />
                                </Grid>
                                <!-- Item Repeater to display all messages -->
                                <ItemsRepeater x:Name="itemRepeater" Grid.Row="1" ItemsSource="{x:Bind Messages, Mode=OneWay}" >
                                    <ItemsRepeater.Layout>
                                        <StackLayout Orientation="Vertical" Spacing="0" />
                                    </ItemsRepeater.Layout>
                                    <ItemsRepeater.ItemTemplate>

                                        <DataTemplate>

                                            <!-- Message Layout -->
                                            <Grid>
                                                <Grid.Resources>
                                                    <SolidColorBrush x:Key="Foreground"  Color="Green"/>
                                                </Grid.Resources>

                                                <Grid.RowDefinitions>
                                                    <RowDefinition Height="auto" />
                                                    <RowDefinition Height="auto" />
                                                    <RowDefinition Height="*" />
                                                </Grid.RowDefinitions>
                                                <Grid Visibility="{Binding PreviewOptions.DisplayInlineReplyHeader, Converter={StaticResource ValueToVisibilityConverter}}">
                                                <TextBlock Text="{Binding InlineMessageThread, Converter={StaticResource InlineMessageThreadToSenderDetailConverter}}" Visibility="{Binding Text, RelativeSource={RelativeSource Mode=Self}, Converter={StaticResource ValueToVisibilityConverter}}" Style="{ThemeResource CaptionTextBlockStyle}" FontSize="10" MaxLines="1" Margin="4,5,0,0" HorizontalAlignment="{Binding InlineMessageThread, Converter={StaticResource InlineMessageThreadToHorizontalAlignmentConverter}}" />
                                                </Grid>
                                                <Border Grid.Row="1" BorderThickness="1" BorderBrush="{ThemeResource AccentFillColorDefaultBrush}" VerticalAlignment="Top" 
                                                        HorizontalAlignment="{Binding InlineMessageThread, Converter={StaticResource InlineMessageThreadToHorizontalAlignmentConverter}}" Padding="4,2,4,2" Margin="0,2,0,0" CornerRadius="5"
                                                        Visibility="{Binding PreviewOptions.DisplayInlineReplyHeader, Converter={StaticResource ValueToVisibilityConverter}}">
                                                    <TextBlock Text="{Binding InlineMessageThread, Converter={StaticResource InlineMessageThreadToPreviewTextConverter}}" FontSize="11" 
                                                               TextWrapping="NoWrap" TextTrimming="CharacterEllipsis" MaxLines="1"/>
                                                </Border>
                                                <Border Grid.Row="2" Width="5" Background="LightGray" VerticalAlignment="Stretch" Margin="5,0,5,0" 
                                                        HorizontalAlignment="{Binding InlineMessageThread, Converter={StaticResource InlineMessageThreadToHorizontalAlignmentConverter}}" 
                                                        Visibility="{Binding InlineMessageThread, Converter={StaticResource ValueToVisibilityConverter}}" />

                                                <!-- Message Header -->
                                                <Grid Grid.Row="2" HorizontalAlignment="{Binding Converter={StaticResource MessageDetailToHorizontalAlignmentConverter}}" Margin="0,0,0,10" >
                                                    <Grid.ColumnDefinitions>
                                                        <ColumnDefinition Width="auto"/>
                                                        <ColumnDefinition Width="auto"/>
                                                        <ColumnDefinition Width="*"/>
                                                        <ColumnDefinition Width="auto"/>
                                                    </Grid.ColumnDefinitions>
                                                    <PersonPicture DisplayName="{Binding Participant.Name}" PreferSmallImage="True" Height="36" Margin="0,30,7,0" VerticalAlignment="Top"
                                                        Visibility="{Binding Converter={StaticResource MessageDetailToPersonPictureVisibilityConverter}}"/>
                                                    <StackPanel  Grid.Column="2" Margin="0,10,0,0" >
                                                        <TextBlock Text="{Binding Converter={StaticResource MessageDetailToMessageHeaderTextConverter}}" Style="{ThemeResource CaptionTextBlockStyle}" 
                                                                   HorizontalAlignment="{Binding Mode=OneWay, Converter={StaticResource MessageDetailToHorizontalAlignmentConverter}}"  
                                                                   Visibility="{Binding Converter={StaticResource MessageDetailToVisibilityConverter}}" Margin="{Binding Mode=OneWay, Converter={StaticResource MessageDetailsToMarginConverter}}"/>

                                                        <Border Grid.Column="1" d:DataContext="{d:DesignInstance Type=data:MessageDetail}" Background="{Binding BubbleColor, Converter={StaticResource ColorToSolidColorBrushConverter}}" CornerRadius="6">
                                                            <Grid>
                                                                <Rectangle Visibility="{Binding IsScheduledMessage, Converter={StaticResource ValueToVisibilityConverter}}" Stroke="{Binding BubbleBorderColor, Converter={StaticResource ColorToSolidColorBrushConverter}}" 
                                                                           StrokeThickness="1" StrokeDashArray="4 4" RadiusX="6" RadiusY="6" />
                                                                <StackPanel VerticalAlignment="Center" Padding="{Binding Converter={StaticResource MessageDetailToThicknessConverter}}" >

                                                                    <!-- Message deleted StackPanel -->
                                                                    <StackPanel Orientation="Horizontal" Margin="0,0,0,7" Visibility="{Binding DateDeleted, Converter={StaticResource ValueToVisibilityConverter}}">
                                                                        <StackPanel.Resources>
                                                                            <Style TargetType="TextBlock">
                                                                                <Setter Property="FontWeight" Value="SemiBold"/>
                                                                                <Setter Property="Foreground" Value="White"/>
                                                                            </Style>
                                                                        </StackPanel.Resources>
                                                                        <FontIcon Glyph="&#xE74D;" FontWeight="SemiBold" Margin="0,0,5,7" Foreground="White" VerticalAlignment="Center"/>
                                                                        <TextBlock Grid.Column="1" x:Uid="TextBlockMessageDeletedOn" Text="XX Message was deleted on "/>
                                                                        <TextBlock Text="{Binding DateDeleted}" Foreground="White" Margin="3,0,0,0" />
                                                                    </StackPanel>

                                                                    <!-- Message ReplyTo -->
                                                                    <Border Visibility="{Binding ReplyTo, Converter={StaticResource ValueToVisibilityConverter}}" Background="{ThemeResource CardBackgroundFillColorDefault}" 
                                                                            Padding="8" BorderThickness="4,0,0,0" BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}" Margin="0,0,0,8">
                                                                        <StackPanel DataContext="{Binding ReplyTo}">
                                                                            <TextBlock Style="{ThemeResource BodyStrongTextBlockStyle}" Text="{Binding Converter={StaticResource MessageReplyToNameTextConverter}}" />
                                                                            <TextBlock Style="{ThemeResource CaptionTextBlockStyle}">
                                                                     <Run FontFamily="{ThemeResource SymbolThemeFontFamily}" Text="{Binding AttachmentType, Converter={StaticResource ReplyToAttachmentTypeToGlyphConverter}}"/>
                                                                                <Run Text="{Binding Converter={StaticResource MessageReplyToDescriptionTextConverter}}"/>
                                                                            </TextBlock>
                                                                        </StackPanel>
                                                                    </Border>
                                                                    
                                                                    <TextBlock Text="{Binding Subject}" FontWeight="SemiBold"  TextWrapping="Wrap" Foreground="{Binding Converter={StaticResource MessageDetailToForegroundConverter}}" 
                                                                        Visibility="{Binding Text, RelativeSource={RelativeSource Mode=Self}, Converter={StaticResource ValueToVisibilityConverter}}"/>

                                                                    <TextBlock Text="{Binding MessageText}" TextWrapping="Wrap" FontSize="{Binding Text, RelativeSource={RelativeSource Mode=Self}, Converter={StaticResource MessageTextToFontSizeConverter}}"
                                                                        FontWeight="{Binding IsDateSeperator, Converter={StaticResource BoolToFontWeightConverter}}"
                                                                        Foreground="{Binding Converter={StaticResource MessageDetailToForegroundConverter}}" 
                                                                        Visibility="{Binding Text, RelativeSource={RelativeSource Mode=Self}, Converter={StaticResource ValueToVisibilityConverter}}"
                                                                        Padding="0,1"/>

                                                                    <!-- Message Unsent Info -->
                                                                    <StackPanel Visibility="{Binding DateUnsent, Converter={StaticResource ValueToVisibilityConverter} }">
                                                                        <StackPanel Orientation="Horizontal">
                                                                            <SymbolIcon Symbol="Undo" Margin="0,0,10,0" />
                                                                            <TextBlock x:Uid="textBlockMessageUnsent" Text="XX Message Unsent" FontWeight="SemiBold" Foreground="Black"/>
                                                                        </StackPanel>
                                                                        <StackPanel Orientation="Horizontal" Margin="0,7,0,0" >
                                                                            <TextBlock x:Uid="textBlockMessageUnsentOnDate" Text="XX Message was unsent on" Foreground="Black" />
                                                                            <TextBlock Text="{Binding DateUnsent}" Foreground="Black" Margin="3,0,0,0"/>
                                                                        </StackPanel>
                                                                    </StackPanel>

                                                                    <!-- Actul Message Content goes in this listview -->
                                                                    <ListView x:Name="listViewMessageContentCategories" SelectionMode="None" Margin="0" Padding="0"
                                                                       ItemsSource="{Binding Converter={StaticResource MessageDetailToJoinedContentConverter}, Mode=OneWay}"
                                                                       ItemTemplateSelector="{StaticResource MessageContentTemplateSelector}"/>

                                                                </StackPanel>
                                                            </Grid>
                                                        </Border>
                                                        <Grid>
                                                            <TextBlock x:Uid="textBlockEdited" Text="Edited" Style="{ThemeResource CaptionTextBlockStyle}" HorizontalAlignment="Left" 
                                            FontWeight="SemiBold" Margin="7,0,0,0" Visibility="{Binding DateEdited, Converter={StaticResource ValueToVisibilityConverter}}" />
                                                            <TextBlock Text="{Binding Converter={StaticResource MessageDetailToReadTextBlockTextConverter}}"   
                                                                FontSize="10px" Margin="0,0,9,0" HorizontalAlignment="Right" 
                                                                Style="{ThemeResource CaptionTextBlockStyle}"  
                                                                Visibility="{Binding Text, RelativeSource={RelativeSource Mode=Self}, Converter={StaticResource ValueToVisibilityConverter}}"/>
                                                        </Grid>
                                                        <TextBlock Visibility="{Binding Converter={StaticResource MessageContentToDebugVisibilityConverter}}" Style="{StaticResource TextBlockDebug}" Text="{Binding Guid}" HorizontalAlignment="Right" Padding="0,0,8,0"/>
                                                        <TextBlock Text="{Binding InlineReplyCount, Converter={StaticResource InlineReplyCountToTextConverter}}" FontSize="10" Padding="12,0,10,0" 
                                                                   Foreground="{ThemeResource HyperlinkForegroundThemeBrush}" TextAlignment="{Binding Direction, Converter={StaticResource MessageDirectionToTextAlignmentConverter}}" 
                                                                   Visibility="{Binding InlineReplyCount, Converter={StaticResource ValueToVisibilityConverter}}" />
                                                    </StackPanel>
                                                    <local:MessageReactionUserControl MessageDetail="{Binding Mode=OneWay}" VerticalAlignment="Top" />
                                                </Grid>
                                            </Grid>
                                        </DataTemplate>
                                    </ItemsRepeater.ItemTemplate>
                                </ItemsRepeater>
                            </Grid>
                        </ScrollViewer>
                    </Grid>
                </Border>

                <Border x:Name="borderImages" Visibility="Collapsed" Style="{ThemeResource FeatureContentPageBorder}" Padding="0" >
                    <Grid Background="{ThemeResource CardBackgroundFillColorDefaultBrush}">
                        <commonControls:BackupFileImageGrid x:Name="imageGrid" Margin="10" Visibility="{x:Bind Messages, Converter={StaticResource MessagesToHasImagesVisibilityConverter}, Mode=OneWay}"
                                                            Items="{x:Bind Messages, Converter={StaticResource MessagesToImageBackupFilesConverter}, Mode=OneWay}" ViewRequested="_imageGrid_ViewRequested" SaveRequested="_imageGrid_SaveRequested" />
                        <Grid Visibility="{x:Bind Messages, Converter={StaticResource MessagesToHasImagesVisibilityConverter}, ConverterParameter='invert', Mode=OneWay}">
                            
                            <StackPanel Orientation="Vertical" VerticalAlignment="Center" Spacing="5">
                                <TextBlock TextAlignment="Center" Text="{x:Bind Conversation.Title, Mode=OneWay}" Opacity="0.7" Style="{ThemeResource BodyStrongTextBlockStyle}" />
                                <TextBlock x:Uid="TextBlockNoImagesInConversation" Text="XX No images in conversation..." Style="{ThemeResource SubheaderTextBlockStyle}" FontSize="22"  
                                           TextAlignment="Center" Visibility="{x:Bind DateFilter, Mode=OneWay, Converter={StaticResource ValueToVisibilityConverter}, ConverterParameter='invert'}" />
                                <StackPanel VerticalAlignment="Center" Visibility="{x:Bind DateFilter, Mode=OneWay, Converter={StaticResource ValueToVisibilityConverter}}">
                                    <TextBlock x:Uid="TextBlockNoImagesInRange" Text="XX No images in date range..." Style="{ThemeResource SubheaderTextBlockStyle}" FontSize="22" TextAlignment="Center"  />
                                    <Button x:Uid="ButtonClearImageDateFilter" Style="{StaticResource AccentButtonStyle}" Content="XX Clear Filter" Margin="0,20,0,0" HorizontalAlignment="Center" Click="_buttonClearDateFilter_Click"/>
                                </StackPanel>
                            </StackPanel>
                        </Grid>
                    </Grid>
                </Border>

                <Border x:Name="borderFiles" Visibility="Collapsed" Style="{ThemeResource FeatureContentPageBorder}" Padding="0">
                    <Grid Background="{ThemeResource CardBackgroundFillColorDefaultBrush}">
                        <Grid Visibility="{x:Bind Messages, Converter={StaticResource MessagesToHasFilesVisibilityConverter}, Mode=OneWay}">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="auto" />
                                <RowDefinition Height="*" />
                            </Grid.RowDefinitions>
                            <Border 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*" />
                                    </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="TextBlockNameColumnHeader" Tag="0" Text="XX Name" />
                                    </Border>
                                    <Border Grid.Column="2" BorderThickness="0,0,1,0" BorderBrush="{ThemeResource AppBarBorderThemeBrush}">
                                        <TextBlock x:Uid="TextBlockDateColumnHeader" Tag="1" Text="XX Date" />
                                    </Border>
                                    <TextBlock x:Uid="TextBlockSizeColumnHeader" Grid.Column="3" Tag="2" Text="XX Size" />
                                </Grid>
                            </Border>
                            <ListView Grid.Row="2" x:Name="listViewFiles" ItemsSource="{x:Bind Messages, Converter={StaticResource MessagesToContainedContentApplicationsConverter}, Mode=OneWay}" SelectionMode="Extended" RightTapped="_listViewFiles_RightTapped">
                                <ListView.ItemTemplate>
                                    <DataTemplate x:DataType="data:MessageContentApplication">
                                        <Grid ColumnSpacing="4">
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition Width="32" />
                                                <ColumnDefinition Width="3*" />
                                                <ColumnDefinition Width="2*" />
                                                <ColumnDefinition Width="1*" />
                                            </Grid.ColumnDefinitions>
                                            <Image Source="{Binding Icon}" MaxWidth="24" MaxHeight="24" VerticalAlignment="Center" HorizontalAlignment="Center" />
                                            <TextBlock Grid.Column="1" Text="{Binding FileName}" VerticalAlignment="Center" TextTrimming="CharacterEllipsis" />
                                            <TextBlock Grid.Column="2" Text="{Binding Date}" VerticalAlignment="Center" TextTrimming="CharacterEllipsis" />
                                            <TextBlock Grid.Column="3" Text="{Binding FormattedFileSize}" VerticalAlignment="Center" />
                                        </Grid>
                                    </DataTemplate>
                                </ListView.ItemTemplate>
                                <ListView.ContextFlyout>
                                    <MenuFlyout>
                                        <MenuFlyoutItem x:Uid="MenuFlyoutItemSaveToPC" Text="XX Save to PC" Click="_menuFlyoutItemSaveFile_Click">
                                            <MenuFlyoutItem.Icon>
                                                <FontIcon Glyph="&#xE78C;" />
                                            </MenuFlyoutItem.Icon>
                                        </MenuFlyoutItem>
                                    </MenuFlyout>
                                </ListView.ContextFlyout>
                            </ListView>
                        </Grid>
                        <Grid Visibility="{x:Bind Messages, Converter={StaticResource MessagesToHasFilesVisibilityConverter}, ConverterParameter='invert', Mode=OneWay}">
                            <StackPanel Orientation="Vertical" VerticalAlignment="Center" Spacing="5">
                                <TextBlock TextAlignment="Center" Text="{x:Bind Conversation.Title, Mode=OneWay}" Opacity="0.7" Style="{ThemeResource BodyStrongTextBlockStyle}" />
                                <TextBlock x:Uid="TextBlockNoFilesInConversation" Text="XX No files in conversation..." Style="{ThemeResource SubheaderTextBlockStyle}" FontSize="22"  
                   TextAlignment="Center" Visibility="{x:Bind DateFilter, Mode=OneWay, Converter={StaticResource ValueToVisibilityConverter}, ConverterParameter='invert'}" />
                                <StackPanel VerticalAlignment="Center" Visibility="{x:Bind DateFilter, Mode=OneWay, Converter={StaticResource ValueToVisibilityConverter}}">
                                    <TextBlock x:Uid="TextBlockNoFilesInRange" Text="XX No files in date range..." Style="{ThemeResource SubheaderTextBlockStyle}" FontSize="22" TextAlignment="Center"  />
                                    <Button x:Uid="ButtonClearFilesDateFilter" Style="{StaticResource AccentButtonStyle}" Content="XX Clear Filter" Margin="0,20,0,0" HorizontalAlignment="Center" Click="_buttonClearDateFilter_Click"/>
                                </StackPanel>
                            </StackPanel>
                        </Grid>
                    </Grid>
                </Border>
            </Grid>
        </Grid>

      
        
        <!-- Dialogs and other display over content controls -->
        <commondialogs:DateFilterContentDialog x:Name="dialogDateFilter" />
        <featurebase:ImagePreviewPage x:Name="imagePreviewPage" Visibility="Collapsed" Padding="30"/>
        <featurebase:ContactsContentPage x:Name="contactsContentsPage" Visibility="Collapsed" IsCloseButtonVisible="True" Background="{ThemeResource AppBarBackgroundThemeBrush}" />
    </Grid>

</Page>
