<!-- This template is used for Video Answer that shows up with other web algo results. 
     It binds to title, Children, and Extended:video properties. -->

<DataTemplate xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:tm="using:SearchUI.TemplateManager"
              xmlns:sc="using:SearchUI.Controls"
              x:Key="Multimedia.VideoAnswer_Snap_8_1_RTM">
    <Grid Style="{CustomResource Resources.Shared.SuppressedTopLevelDataTemplateRootStyle}">
        <Grid.Resources>
            <DataTemplate x:Key="Local.SingleVideoTemplateS">
                <Grid Margin="6">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="133" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <Grid Grid.Column="0">
                        <Border Height="100"
                                Width="133"
                                Style="{CustomResource Resources.Shared.ImagePlaceholderBorderStyle}"
                                BorderThickness="0">
                            <Image Source="{Binding Extended:thumbnail.Extended:src}" 
                                   Style="{CustomResource Resources.Shared.BaseImageStyle}" />
                        </Border>
                        <!-- 20% black overlaid above thumbnail -->
                        <Rectangle Fill="Black"
                                   Opacity="0.2" />
                        <TextBlock Padding="10, 0, 0, 5"
                                   Style="{CustomResource Resources.Shared.HeroPrimaryTextStyle}"
                                   Foreground="White"
                                   HorizontalAlignment="Left"
                                   VerticalAlignment="Bottom"
                                   Text="{Binding Extended:duration}"
                                   Visibility="{Binding Converter={CustomResource NullOrEmptyToVisibility}, ConverterParameter=Extended:duration}" />
                        <TextBlock Style="{CustomResource Resources.Shared.VideoPlayButtonTextStyle}" />
                    </Grid>

                    <Grid Margin="10, 4, 0, 0"
                            VerticalAlignment="Top"
                            Grid.Column="1">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>
                        <TextBlock Style="{CustomResource Resources.Shared.SerpSecondaryTextStyle}"
                                   MaxLines="2"
                                   Text="{Binding Extended:desc}"
                                   AutomationProperties.AutomationId="desc"
                                   Grid.Row="0" />
                        <TextBlock Style="{CustomResource Resources.Shared.LinkTextStyle}"
                                   MaxLines="1"
                                   Text="{Binding Extended:source}"
                                   AutomationProperties.AutomationId="source"
                                   Grid.Row="1" />
                    </Grid>
                </Grid>
            </DataTemplate>
        </Grid.Resources>

        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <Button Command="{Binding System_ConnectedSearch_ActivateCommand}"
                Margin="0, -6"
                Padding="10, 6"
                Style="{CustomResource Resources.Shared.ResultButtonStyle}"
                Grid.Row="0"
                AutomationProperties.AutomationId="Title">
            <!-- BUGBUG : 606980 Remove hardcoded title width -->
            <TextBlock MaxLines="1"
                       Style="{CustomResource Resources.Shared.SerpPrimaryTextStyle}"
                       tm:RichText.Text="{Binding Extended:text.Extended:title}"
                       Width="280" />
        </Button>

        <sc:ResultGridView ItemTemplate="{StaticResource Local.SingleVideoTemplateS}"
                           OriginalItemsSource="{Binding Extended:videos.Extended:video}"
                           Style="{CustomResource Resources.Shared.VerticalModeNestedGridViewStyle}"
                           Margin="-4, 0, 0, 0"
                           Grid.Row="1"
                           MaxItemCount="2">
            <GridView.ItemsPanel>
                <ItemsPanelTemplate>
                    <VariableSizedWrapGrid Orientation="Horizontal"
                                           ItemWidth="300"
                                           ItemHeight="120"
                                           MaximumRowsOrColumns="1" />
                </ItemsPanelTemplate>
            </GridView.ItemsPanel>
        </sc:ResultGridView>
    </Grid>
</DataTemplate>