<DataTemplate xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:tm="using:SearchUI.TemplateManager"
              x:Key="Multimedia.VideoGridResult.Fallback">
    <ContentControl Name="Home"
                    HorizontalContentAlignment="Stretch"
                    VerticalContentAlignment="Stretch"
                    Content="{Binding}">
        <ContentControl.Resources>

            <!-- Play icon (30x30) -->
            <Style x:Key="VideoPlayButtonTextStyle"
                   TargetType="TextBlock">
                <Setter Property="Text"
                        Value="&#xE17E;&#xE102;" />
                <Setter Property="Margin"
                        Value="0, 0, 11, 10" />
                <Setter Property="Foreground"
                        Value="White" />
                <Setter Property="HorizontalAlignment"
                        Value="Right" />
                <Setter Property="VerticalAlignment"
                        Value="Bottom" />
                <Setter Property="FontFamily"
                        Value="Segoe UI Symbol" />
                <Setter Property="FontSize"
                        Value="14" />
            </Style>

            <DataTemplate x:Key="Multimedia.VideoGridResult.Full">
                <Grid AutomationProperties.AutomationId="VideoResultContainer.Full">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="{Binding Path=Extended:staticThumbnail.Extended:width, FallbackValue=213}" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <Grid VerticalAlignment="Top"
                          Background="{ThemeResource ImmersiveLightPlaceholderBackgroundBrush}"
                          Height="{Binding Extended:staticThumbnail.Extended:height, FallbackValue=160}"
                          AutomationProperties.AutomationId="ThumbnailContainer">
                        <Image Source="{Binding Path=Extended:staticThumbnail.Extended:src}"
                               Stretch="UniformToFill" />
                        <!-- 20% black overlay above thumbnail -->
                        <Rectangle Fill="Black"
                                   Opacity="0.2" />
                        <!--Duration-->
                        <TextBlock Style="{CustomResource TextStyle_Normal_SemiBold}"
                                   HorizontalAlignment="Left"
                                   VerticalAlignment="Bottom"
                                   Foreground="White"
                                   Padding="10, 0, 0, 5"
                                   Text="{Binding Extended:duration.System_Search_Contents}"
                                   Visibility="{Binding RelativeSource={RelativeSource Mode=Self}, Path=Text, Converter={CustomResource NullOrEmptyToVisibility}}"
                                   AutomationProperties.AutomationId="Duration" />
                        <!--30X30 shared play icon-->
                        <TextBlock Style="{StaticResource VideoPlayButtonTextStyle}" />
                    </Grid>
                    <Grid Margin="20, 0"
                      Grid.Column="1"
                      AutomationProperties.AutomationId="MetadataContainer">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <TextBlock tm:RichText.Text="{Binding System_ItemNameDisplay}"
                                   Margin="0, 0, 0, 10"
                                   Foreground="{ThemeResource ImmersiveLightPrimaryTextBrush}"
                                   Style="{CustomResource TextStyle_MediumSmall_SemiLight}"
                                   TextTrimming="WordEllipsis"
                                   TextWrapping="Wrap"
                                   MaxLines="2"
                                   HorizontalAlignment="Left"
                                   AutomationProperties.AutomationId="Title"
                                   Visibility="{Binding RelativeSource={RelativeSource Mode=Self}, Path=tm:RichText.Text, Converter={CustomResource NullOrEmptyToVisibility}}" />
                        <TextBlock Grid.Row="1"
                                   Margin="0, 0, 0, 5"
                                   Foreground="{ThemeResource ImmersiveLightPrimaryTextBrush}"
                                   Style="{CustomResource TextStyle_Normal_SemiLight}"
                                   TextTrimming="WordEllipsis"
                                   TextWrapping="Wrap"
                                   HorizontalAlignment="Left"
                                   MaxLines="2"
                                   Text="{Binding System_Search_AutoSummary}"
                                   Visibility="{Binding RelativeSource={RelativeSource Mode=Self}, Path=Text, Converter={CustomResource NullOrEmptyToVisibility}}"
                                   AutomationProperties.AutomationId="Description" />
                        <TextBlock Grid.Row="2"
                                   Opacity="0.6"
                                   Style="{CustomResource TextStyle_Normal_SemiLight}"
                                   TextTrimming="WordEllipsis"
                                   TextWrapping="Wrap"
                                   MaxLines="1"
                                   HorizontalAlignment="Left"
                                   Text="{Binding Extended:sourceTitle.System_Search_Contents}"
                                   Visibility="{Binding RelativeSource={RelativeSource Mode=Self}, Path=Text, Converter={CustomResource NullOrEmptyToVisibility}}"
                                   AutomationProperties.AutomationId="Source" />
                    </Grid>
                </Grid>
            </DataTemplate>
            <DataTemplate x:Key="Multimedia.VideoGridResult.Snap">
                <Grid AutomationProperties.AutomationId="VideoResultContainer.Snap">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="133" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <Grid VerticalAlignment="Top"
                          Background="{ThemeResource ImmersiveLightPlaceholderBackgroundBrush}"
                          AutomationProperties.AutomationId="ThumbnailContainer">
                        <Image Source="{Binding Path=Extended:staticThumbnail.Extended:src}"
                               Height="100"
                               Width="133"
                               Stretch="UniformToFill" />
                        <!-- 20% black overlaid above thumbnail -->
                        <Rectangle Fill="Black"
                                   Opacity="0.2" />
                        <!--Duration-->
                        <TextBlock Style="{CustomResource TextStyle_Normal_SemiBold}"
                                   HorizontalAlignment="Left"
                                   VerticalAlignment="Bottom"
                                   Foreground="White"
                                   Padding="10, 0, 0, 5"
                                   Text="{Binding Extended:duration.System_Search_Contents}"
                                   Visibility="{Binding RelativeSource={RelativeSource Mode=Self}, Path=Text, Converter={CustomResource NullOrEmptyToVisibility}}"
                                   AutomationProperties.AutomationId="Duration" />
                        <!--30X30 shared play icon-->
                        <TextBlock Style="{StaticResource VideoPlayButtonTextStyle}" />
                    </Grid>
                    <Grid Margin="10, 4, 0, 0"
                          Grid.Column="1"
                          AutomationProperties.AutomationId="MetadataContainer">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <TextBlock tm:RichText.Text="{Binding System_ItemNameDisplay}"
                                   Style="{CustomResource TextStyle_Normal_SemiLight}"
                                   TextTrimming="WordEllipsis"
                                   TextWrapping="Wrap"
                                   MaxLines="2"
                                   HorizontalAlignment="Left"
                                   AutomationProperties.AutomationId="Title"
                                   Visibility="{Binding RelativeSource={RelativeSource Mode=Self}, Path=tm:RichText.Text, Converter={CustomResource NullOrEmptyToVisibility}}" />
                        <TextBlock Grid.Row="1"
                                   Margin="0, 5"
                                   Style="{CustomResource TextStyle_Normal_SemiLight}"
                                   Opacity="0.6"
                                   TextTrimming="WordEllipsis"
                                   TextWrapping="Wrap"
                                   MaxLines="1"
                                   Text="{Binding Extended:sourceTitle.System_Search_Contents}"
                                   Visibility="{Binding RelativeSource={RelativeSource Mode=Self}, Path=Text, Converter={CustomResource NullOrEmptyToVisibility}}"
                                   AutomationProperties.AutomationId="Source" />
                    </Grid>
                </Grid>
            </DataTemplate>
        </ContentControl.Resources>
        <tm:DisplayModes.HorizontalStoryboard>
            <Storyboard>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Home"
                                               Storyboard.TargetProperty="ContentTemplate">
                    <DiscreteObjectKeyFrame KeyTime="0"
                                            Value="{StaticResource Multimedia.VideoGridResult.Full}" />
                </ObjectAnimationUsingKeyFrames>
            </Storyboard>
        </tm:DisplayModes.HorizontalStoryboard>
        <tm:DisplayModes.HorizontalLargeStoryboard>
            <Storyboard>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Home"
                                               Storyboard.TargetProperty="ContentTemplate">
                    <DiscreteObjectKeyFrame KeyTime="0"
                                            Value="{StaticResource Multimedia.VideoGridResult.Full}" />
                </ObjectAnimationUsingKeyFrames>
            </Storyboard>
        </tm:DisplayModes.HorizontalLargeStoryboard>
        <tm:DisplayModes.VerticalStoryboard>
            <Storyboard>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Home"
                                               Storyboard.TargetProperty="ContentTemplate">
                    <DiscreteObjectKeyFrame KeyTime="0"
                                            Value="{StaticResource Multimedia.VideoGridResult.Full}" />
                </ObjectAnimationUsingKeyFrames>
            </Storyboard>
        </tm:DisplayModes.VerticalStoryboard>
        <tm:DisplayModes.VerticalLargeStoryboard>
            <Storyboard>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Home"
                                               Storyboard.TargetProperty="ContentTemplate">
                    <DiscreteObjectKeyFrame KeyTime="0"
                                            Value="{StaticResource Multimedia.VideoGridResult.Full}" />
                </ObjectAnimationUsingKeyFrames>
            </Storyboard>
        </tm:DisplayModes.VerticalLargeStoryboard>
        <tm:DisplayModes.VerticalNarrowStoryboard>
            <Storyboard>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Home"
                                               Storyboard.TargetProperty="ContentTemplate">
                    <DiscreteObjectKeyFrame KeyTime="0"
                                            Value="{StaticResource Multimedia.VideoGridResult.Snap}" />
                </ObjectAnimationUsingKeyFrames>
            </Storyboard>
        </tm:DisplayModes.VerticalNarrowStoryboard>
    </ContentControl>
</DataTemplate>