<!-- 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_Landscape_8_1_RP">
    <Grid Style="{CustomResource Resources.Shared.SuppressedTopLevelDataTemplateRootStyle}">
        <Grid.Resources>
            <DataTemplate x:Key="Local.SingleVideoTemplateL">
                <Grid Margin="6, 0">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <Grid Grid.Column="0"
                          Height="100"
                          Width="133">
                        <Border 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, 6, 0, 1"
                          VerticalAlignment="Top"
                          Grid.Column="1">
                        <Grid.RowDefinitions>
                            <RowDefinition />
                            <RowDefinition />
                        </Grid.RowDefinitions>
                        <TextBlock Style="{CustomResource Resources.Shared.PrimaryNormalTextStyle}"
                                   MaxLines="3"
                                   tm:RichText.Text="{Binding Extended:desc}"
                                   AutomationProperties.AutomationId="desc"
                                   Grid.Row="0" />
                        <TextBlock Style="{CustomResource Resources.Shared.LinkTextStyle}"
                                   MaxLines="1"
                                   tm:RichText.Text="{Binding Extended:source}"
                                   AutomationProperties.AutomationId="source"
                                   Grid.Row="1" />

                    </Grid>
                </Grid>
            </DataTemplate>
        </Grid.Resources>

        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <sc:ResultGridView x:Name="VideoGridView"
                           ItemTemplate="{StaticResource Local.SingleVideoTemplateL}"
                           ItemsSource="{Binding Extended:videos.Extended:video}"
                           Style="{CustomResource Resources.Shared.HorizontalModeNestedGridViewStyle}"
                           Margin="-4, 0, 0, 0"
                           Grid.Row="0">
            <GridView.ItemContainerStyle>
                <Style TargetType="GridViewItem"
                       BasedOn="{CustomResource Resources.Shared.NestedGridViewItemStyle}">
                    <Setter Property="tm:SetterBinding.Setters">
                        <Setter.Value>
                            <SetterBaseCollection>
                                <Setter Property="AutomationProperties.Name">
                                    <Setter.Value>
                                        <tm:SetterBinding Path="Extended:desc" />
                                    </Setter.Value>
                                </Setter>
                            </SetterBaseCollection>
                        </Setter.Value>
                    </Setter>
                </Style>
            </GridView.ItemContainerStyle>
            <GridView.ItemsPanel>
                <ItemsPanelTemplate>
                    <VariableSizedWrapGrid Orientation="Horizontal"
                                           ItemWidth="380"
                                           ItemHeight="120"
                                           MaximumRowsOrColumns="1" />
                </ItemsPanelTemplate>
            </GridView.ItemsPanel>
        </sc:ResultGridView>

        <Button Command="{Binding System_ConnectedSearch_ActivateCommand}"
                Margin="0, 6, 0, 0"
                Padding="10, 6"
                AutomationProperties.AutomationId="Title"
                Style="{CustomResource Resources.Shared.ResultButtonStyle}"
                Grid.Row="1">
            <TextBlock MaxLines="1"
                       Style="{CustomResource Resources.Shared.LinkTextStyle}"
                       tm:RichText.Text="{Binding Extended:seeMore.Extended:text}" />
        </Button>
    </Grid>
</DataTemplate>