<!-- Template for hero embedded video answers. -->
<DataTemplate xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:sc="using:SearchUI.Controls"
              xmlns:tm="using:SearchUI.TemplateManager"
              x:Key="Multimedia.VideoHeroEmbeddedAnswer_2x2_8_1_RTM">

    <ContentControl Style="{CustomResource Resources.Shared.HeroModuleStyle}">

        <sc:ResultGridView x:Name="List"
                           OriginalItemsSource="{Binding Extended:videoEmbedded.Extended:videos.Extended:video}"
                           Style="{CustomResource Resources.Shared.SaturatedNestedGridViewStyle}"
                           Margin="-10, -10, -10, -12"
                           MaxItemCount="2"
                           ScrollViewer.VerticalScrollMode="{Binding Source={CustomResource ResultsCommonViewSource}, Path=CurrentDisplayMode, Converter={CustomResource Resources.Shared.VerticalScrollModeConverter}}"
                           ScrollViewer.HorizontalScrollMode="{Binding Source={CustomResource ResultsCommonViewSource}, Path=CurrentDisplayMode, Converter={CustomResource Resources.Shared.HorizontalScrollModeConverter}}">

            <sc:ResultGridView.ItemContainerStyle>
                <Style TargetType="sc:ResultGridViewItem"
                       BasedOn="{CustomResource Resources.Shared.SaturatedNestedGridViewItemStyle}">
                    <Setter Property="Margin"
                            Value="0"/>
                    <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>
            </sc:ResultGridView.ItemContainerStyle>

            <sc:ResultGridView.ItemTemplate>
                <DataTemplate>
                    <Grid Width="260"
                          Margin="6">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="10"/>
                            <ColumnDefinition/>
                        </Grid.ColumnDefinitions>

                        <!-- The thumbnail has a fallback gray background if the image fails to load -->

                        <Grid Grid.Column="0" >

                            <!-- Thumbnail -->
                            <Border Height="100"
                                    Width="133"
                                    Grid.Column="0"
                                    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" />

                            <!-- Duration -->
                            <TextBlock Text="{Binding Extended:duration}"
                                       Style="{CustomResource Resources.Shared.HeroPrimaryTextStyle}"
                                       Foreground="White"
                                       Margin="10, 0, 0, 5"
                                       HorizontalAlignment="Left"
                                       VerticalAlignment="Bottom"
                                       Visibility="{Binding Converter={CustomResource NullOrEmptyToVisibility}, ConverterParameter=Extended:duration}" />

                            <!-- Play icon (30x30) -->
                            <TextBlock Style="{CustomResource Resources.Shared.VideoPlayButtonTextStyle}" />
                        </Grid>

                        <Grid Grid.Column="2"
                              VerticalAlignment="Top">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="5"/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>

                            <!-- Description -->
                            <TextBlock Grid.Row="1"
                                       Style="{CustomResource Resources.Shared.HeroPrimaryTextStyle}"
                                       TextTrimming="WordEllipsis"
                                       TextWrapping="Wrap"
                                       LineHeight="20"
                                       MaxLines="2"
                                       Text="{Binding Extended:desc}"/>

                            <!-- Source -->
                            <TextBlock Grid.Row="2"
                                       Style="{CustomResource Resources.Shared.HeroSecondaryTextStyle}"
                                       TextTrimming="WordEllipsis"
                                       TextWrapping="Wrap"
                                       LineHeight="20"
                                       MaxLines="2"
                                       Text="{Binding Extended:source}"/>
                        </Grid>
                    </Grid>
                </DataTemplate>
            </sc:ResultGridView.ItemTemplate>
        </sc:ResultGridView>
    </ContentControl>
</DataTemplate>