<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.ImageDetails">

  <Grid x:Name="FlipImageTopGrid"
        Background="Transparent">

    <Grid.Resources>
      <Style x:Key="FlipImageOverlayStyle"
             TargetType="ContentControl">
        <Setter Property="Template">
          <Setter.Value>
            <ControlTemplate TargetType="ContentControl">
              <ContentPresenter x:Name="FlipImageOverlay" />
            </ControlTemplate>
          </Setter.Value>
        </Setter>
      </Style>
    </Grid.Resources>

    <ScrollViewer ZoomMode="Enabled"
                  HorizontalAlignment="Stretch"
                  VerticalAlignment="Stretch"
                  MinZoomFactor="1.0"
                  VerticalScrollBarVisibility="Hidden"
                  HorizontalScrollBarVisibility="Hidden">
      <Image x:Name="FlipImage"
             Source="{Binding Extended:largeThumbnail.Extended:src}"
             Width="{Binding Extended:image.Extended:width}"
             Height="{Binding Extended:image.Extended:height}" />
    </ScrollViewer>

    <ContentControl x:Name="FlipImageOverlay"
                    Style="{StaticResource FlipImageOverlayStyle}"
                    Height="150"
                    VerticalAlignment="Bottom"
                    Margin="0,0,0,24"
                    MinWidth="{Binding ElementName=FlipImageTopGrid, Path=ActualWidth}"
                    Opacity="{Binding ElementName=ImageDetailsView, Path=DataContext.FlipImageOverlayOpacity}"
                    IsHitTestVisible="{Binding ElementName=ImageDetailsView, Path=DataContext.FlipImageOverlayHitTest}">

      <Grid Background="Black"
            Opacity="0.75">

        <ContentControl x:Name="OverlayContent"
                        HorizontalContentAlignment="Stretch"
                        VerticalContentAlignment="Top"
                        Content="{Binding}">

          <ContentControl.Resources>
            <DataTemplate x:Key="FlipImageOverlay.Full">
              <Grid VerticalAlignment="Top">
                <Grid.ColumnDefinitions>
                  <ColumnDefinition Width="230*" />
                  <ColumnDefinition Width="520*" />
                  <ColumnDefinition MinWidth="320" Width="466*" />
                  <ColumnDefinition Width="150*" />
                </Grid.ColumnDefinitions>

                <StackPanel Margin="0,18,44,0"
                            Grid.Column="1"
                            HorizontalAlignment="Left"
                            VerticalAlignment="Top"
                            Orientation="Vertical">
                  <TextBlock Text="{Binding System_ItemNameDisplay}"
                             TextWrapping="Wrap"
                             TextTrimming="WordEllipsis"
                             Style="{CustomResource TextStyle_Medium_SemiLight}"
                             Foreground="#FFF"
                             MaxHeight="74"
                             AutomationProperties.AutomationId="Title.Multimedia.ImageDetails" />
                  <TextBlock Text="{Binding Extended:source.Extended:metadata}"
                             Margin="0,14,0,0"
                             TextTrimming="WordEllipsis"
                             Style="{CustomResource TextStyle_Normal_SemiLight}"
                             Opacity="0.6"
                             Foreground="#FFF"
                             AutomationProperties.AutomationId="Metadata.Multimedia.ImageDetails" />
                </StackPanel>

                <Button Grid.Column="2"
                        BorderThickness="1"
                        BorderBrush="{x:Null}"
                        Margin="-8, 13, 0, 0"
                        Padding="0"
                        VerticalAlignment="Top"
                        HorizontalAlignment="Left"
                        Command="{Binding System_ConnectedSearch_ActivateCommand}"
                        IsTapEnabled="False"
                        IsTabStop="{Binding ElementName=ImageDetailsView, Path=DataContext.FlipImageOverlayHitTest}"
                        AutomationProperties.Name="{Binding Extended:source.Extended:displayUrl}"
                        AutomationProperties.AutomationId="SourceButton.Multimedia.ImageDetails">
                  <Grid HorizontalAlignment="Left" VerticalAlignment="Top">
                    <Grid.ColumnDefinitions>
                      <ColumnDefinition Width="170" />
                      <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                
                    <Image Margin="4,4,0,4"
                           VerticalAlignment="Top"
                           Width="170"
                           Height="80"
                           Stretch="UniformToFill"
                           IsTapEnabled="False"
                           Source="{Binding Extended:snapshotUrl.Extended:src}"
                           AutomationProperties.AutomationId="SourceSnapshot.Multimedia.ImageDetails" />
                    <Grid HorizontalAlignment="Left"
                          Grid.Column="1"
                          Margin="15,26,4,0"
                          VerticalAlignment="Top">

                      <Grid.RowDefinitions>
                        <RowDefinition />
                        <RowDefinition />
                      </Grid.RowDefinitions>

                      <TextBlock x:Uid="ms-resource://windows.ui.search/resources/ImageSourcePage"
                                 Style="{CustomResource TextStyle_Normal_SemiLight}"
                                 Opacity="0.6"
                                 Foreground="#FFF" />
                      <TextBlock Text="{Binding Extended:source.Extended:displayUrl}"
                                 Grid.Row="1"
                                 Style="{CustomResource TextStyle_Normal_SemiLight}"
                                 Margin="0,5,0,0"
                                 TextWrapping="NoWrap"
                                 TextTrimming="WordEllipsis"
                                 Foreground="#008186"
                                 AutomationProperties.AutomationId="SourceUrl.Multimedia.ImageDetails" />
                    </Grid>
                  </Grid>
                </Button>
              </Grid>
            </DataTemplate>
            <DataTemplate x:Key="FlipImageOverlay.Snap">
              <StackPanel Margin="20,16,20,0"
                          HorizontalAlignment="Left"
                          VerticalAlignment="Top"
                          Orientation="Vertical">
                <TextBlock Text="{Binding System_ItemNameDisplay}"
                           TextWrapping="NoWrap"
                           TextTrimming="WordEllipsis"
                           Style="{CustomResource TextStyle_Medium_SemiLight}"
                           Foreground="#FFF"
                           Height="36"
                           AutomationProperties.AutomationId="Title.Multimedia.ImageDetails" />
                <TextBlock Text="{Binding Extended:source.Extended:metadata}"
                           Style="{CustomResource TextStyle_Normal_SemiLight}"
                           TextTrimming="WordEllipsis"
                           Opacity="0.6"
                           Foreground="#FFF"
                           AutomationProperties.AutomationId="Metadata.Multimedia.ImageDetails" />

                <Button Margin="-8,6,0,0"
                        BorderThickness="1"
                        BorderBrush="{x:Null}"
                        Padding="0"
                        Command="{Binding System_ConnectedSearch_ActivateCommand}"
                        IsTabStop="{Binding ElementName=ImageDetailsView, Path=DataContext.FlipImageOverlayHitTest}"
                        IsTapEnabled="False"
                        AutomationProperties.Name="{Binding Extended:source.Extended:displayUrl}"
                        AutomationProperties.AutomationId="SourceButton.Multimedia.ImageDetails">
                  <StackPanel Margin="4">
                    <TextBlock x:Uid="ms-resource://windows.ui.search/resources/ImageSourcePage"
                               Style="{CustomResource TextStyle_Normal_SemiLight}"
                               Opacity="0.6"
                               Foreground="#FFF" />
                    <TextBlock Text="{Binding Extended:source.Extended:displayUrl}"
                               TextTrimming="WordEllipsis"
                               HorizontalAlignment="Left"
                               Style="{CustomResource TextStyle_Normal_SemiLight}"
                               Foreground="#008186"
                               AutomationProperties.AutomationId="SourceUrl.Multimedia.ImageDetails" />
                  </StackPanel>
                </Button>
              </StackPanel>
            </DataTemplate>
          </ContentControl.Resources>

          <tm:DisplayModes.HorizontalStoryboard>
            <Storyboard>
              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverlayContent"
                                             Storyboard.TargetProperty="ContentTemplate">
                <DiscreteObjectKeyFrame KeyTime="0"
                                        Value="{StaticResource FlipImageOverlay.Full}" />
              </ObjectAnimationUsingKeyFrames>
            </Storyboard>
          </tm:DisplayModes.HorizontalStoryboard>
          <tm:DisplayModes.HorizontalLargeStoryboard>
            <Storyboard>
              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverlayContent"
                                             Storyboard.TargetProperty="ContentTemplate">
                <DiscreteObjectKeyFrame KeyTime="0"
                                        Value="{StaticResource FlipImageOverlay.Full}" />
              </ObjectAnimationUsingKeyFrames>
            </Storyboard>
          </tm:DisplayModes.HorizontalLargeStoryboard>
          <tm:DisplayModes.VerticalStoryboard>
            <Storyboard>
              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverlayContent"
                                             Storyboard.TargetProperty="ContentTemplate">
                <DiscreteObjectKeyFrame KeyTime="0"
                                        Value="{StaticResource FlipImageOverlay.Full}" />
              </ObjectAnimationUsingKeyFrames>
            </Storyboard>
          </tm:DisplayModes.VerticalStoryboard>
          <tm:DisplayModes.VerticalLargeStoryboard>
            <Storyboard>
              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverlayContent"
                                             Storyboard.TargetProperty="ContentTemplate">
                <DiscreteObjectKeyFrame KeyTime="0"
                                        Value="{StaticResource FlipImageOverlay.Full}" />
              </ObjectAnimationUsingKeyFrames>
            </Storyboard>
          </tm:DisplayModes.VerticalLargeStoryboard>
          <tm:DisplayModes.VerticalNarrowStoryboard>
            <Storyboard>
              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverlayContent"
                                             Storyboard.TargetProperty="ContentTemplate">
                <DiscreteObjectKeyFrame KeyTime="0"
                                        Value="{StaticResource FlipImageOverlay.Snap}" />
              </ObjectAnimationUsingKeyFrames>
            </Storyboard>
          </tm:DisplayModes.VerticalNarrowStoryboard>
        </ContentControl>
      </Grid>
    </ContentControl>
  </Grid>
</DataTemplate>