<!-- Fallback template for full size web Algo including Dcard, Rich algo and Appified algo -->
<!-- All style dependencies are inlined into this template -->
    <ResourceDictionary 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="Web.Fallback">
    <ResourceDictionary.ThemeDictionaries>
        <ResourceDictionary x:Key="Default">
            <SolidColorBrush x:Key="Local.ImagePlaceholderBackgroundBrush"
                             Color="#3B9B9B9B" />
            <SolidColorBrush x:Key="Local.ImagePlaceholderBorderBrush"
                             Color="#DDDDDD" />
        </ResourceDictionary>
        <ResourceDictionary x:Key="HighContrast">
            <SolidColorBrush x:Key="Local.ImagePlaceholderBackgroundBrush"
                             Color="{ThemeResource ImmersiveLightBackgroundColor}" />
            <SolidColorBrush x:Key="Local.ImagePlaceholderBorderBrush"
                             Color="{ThemeResource ImmersiveLightDisabledTextColor}" />
        </ResourceDictionary>
    </ResourceDictionary.ThemeDictionaries>

    <tm:StringVector x:Key="Local.AutomationId">
        <x:String>@Web.Fallback__</x:String>
        <x:String>Extended:automation.Extended:Id</x:String>
    </tm:StringVector>

    <Style x:Key="Local.ImagePlaceholderRectangleStyle"
           TargetType="Rectangle">
        <Setter Property="Fill"
                Value="{x:Null}" />
        <Setter Property="Stroke"
                Value="{ThemeResource Local.ImagePlaceholderBorderBrush}" />
        <Setter Property="StrokeThickness"
                Value="1" />
    </Style>
        
    <Style x:Key="ResultGridViewItemStyle"
           TargetType="GridViewItem">
        <Setter Property="HorizontalAlignment"
                Value="Stretch" />
        <Setter Property="VerticalAlignment"
                Value="Stretch" />
        <Setter Property="HorizontalContentAlignment"
                Value="Stretch" />
        <Setter Property="VerticalContentAlignment"
                Value="Stretch" />
        <Setter Property="TabNavigation"
                Value="Local" />
        <Setter Property="IsTabStop"
                Value="True" />
        <Setter Property="IsTapEnabled"
                Value="True" />
        <Setter Property="IsRightTapEnabled"
                Value="True" />
        <Setter Property="IsHoldingEnabled"
                Value="True" />
        <Setter Property="Margin"
                Value="0" />
        <Setter Property="Padding"
                Value="0" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="GridViewItem">
                    <GridViewItemPresenter ContentTransitions="{TemplateBinding ContentTransitions}"
                                           Margin="{TemplateBinding Padding}"
                                           ContentMargin="4"
                                           PointerOverBackgroundMargin="1"
                                           SelectionCheckMarkVisualEnabled="True"
                                           CheckHintBrush="{ThemeResource ImmersiveLightPrimaryTextBrush}"
                                           CheckSelectingBrush="{ThemeResource ImmersiveLightPrimaryTextBrush}"
                                           CheckBrush="{ThemeResource ImmersiveLightSelectionPrimaryTextBrush}"
                                           DragBackground="{x:Null}"
                                           DragForeground="{x:Null}"
                                           FocusBorderBrush="{ThemeResource ImmersiveControlLightFocusRectBrush}"
                                           PlaceholderBackground="{x:Null}"
                                           PointerOverBackground="{ThemeResource ImmersiveLightHoverBackgroundBrush}"
                                           SelectedBorderThickness="{TemplateBinding BorderThickness}"
                                           SelectedBackground="{ThemeResource ImmersiveLightSelectionBackgroundBrush}"
                                           SelectedForeground="{ThemeResource ImmersiveLightPrimaryTextBrush}"
                                           SelectedPointerOverBackground="{ThemeResource ImmersiveLightHoverBackgroundBrush}"
                                           SelectedPointerOverBorderBrush="{ThemeResource ImmersiveLightSelectionBackgroundBrush}"
                                           DisabledOpacity="1"
                                           DragOpacity="1"
                                           ReorderHintOffset="0"
                                           HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                           VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" />
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="TopLevelGridViewItemStyle"
           TargetType="GridViewItem"
           BasedOn="{StaticResource ResultGridViewItemStyle}">
        <Setter Property="Background"
                Value="{CustomResource SERPAccent5ImmersiveLightBackground}" />
        <Setter Property="BorderThickness"
                Value="4" />
        <Setter Property="tm:SetterBinding.Setters">
            <Setter.Value>
                <SetterBaseCollection>
                    <Setter Property="AutomationProperties.AutomationId">
                        <Setter.Value>
                            <tm:SetterBinding Converter="{CustomResource StringPropertyConcatenator}"
                                              ConverterParameter="{StaticResource Local.AutomationId}" />
                        </Setter.Value>
                    </Setter>
                </SetterBaseCollection>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="TopLevelDataTemplateRootStyle"
           TargetType="Panel">
        <Setter Property="HorizontalAlignment"
                Value="Stretch" />
        <Setter Property="VerticalAlignment"
                Value="Stretch" />
        <Setter Property="Margin"
                Value="12" />
    </Style>

    <!-- Group of 5 DataTemplate maps to [[ext:viewModes]] -->
    <DataTemplate x:Key="SerpFallbackTemplate.Horizontal">
        <Grid Style="{StaticResource TopLevelDataTemplateRootStyle}">
            <Grid.RowDefinitions>
                <RowDefinition Height="200" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <!-- Page Preview -->
            <Grid Background="{ThemeResource Local.ImagePlaceholderBackgroundBrush}"
                  Grid.Row="0">
                <Image Stretch="UniformToFill"
                       tm:ImagePerfTracker.OriginalSource="{Binding Extended:pagePreview.Extended:image.System_ConnectedSearch_ImageUrl}"
                       AutomationProperties.AutomationId="PagePreviewImage" />
                <Rectangle Style="{StaticResource Local.ImagePlaceholderRectangleStyle}" />
            </Grid>
            <!-- Title -->
            <TextBlock tm:RichText.Text="{Binding System_ItemNameDisplay}"
                       Grid.Row="1"
                       Margin="0, 20, 0, 5"
                       MaxLines="3"
                       TextWrapping="Wrap"
                       TextTrimming="WordEllipsis"
                       Style="{CustomResource TextStyle_MediumSmall_SemiLight}"
                       AutomationProperties.AutomationId="Title" />
            <!-- Display URL -->
            <TextBlock Grid.Row="2"
                       Margin="0, 0, 0, 5"
                       tm:RichText.Text="{Binding Extended:metadata.Extended:attribution.System_Search_Contents}"
                       MaxLines="2"
                       TextWrapping="NoWrap"
                       TextTrimming="WordEllipsis"
                       Foreground="{ThemeResource ImmersiveLightHighlightBrush}"
                       Style="{CustomResource TextStyle_Normal_Regular}"
                       AutomationProperties.AutomationId="DisplayUrl" />
            <!-- Snippet -->
            <TextBlock tm:RichText.Text="{Binding System_Search_AutoSummary}"
                       AutomationProperties.AutomationId="Snippet"
                       Grid.Row="3"
                       TextWrapping="Wrap"
                       TextTrimming="WordEllipsis"
                       Foreground="#FF777777"
                       Style="{CustomResource TextStyle_Normal_Regular}" />
        </Grid>
    </DataTemplate>

    <DataTemplate x:Key="SerpFallbackTemplate.Vertical">
        <Grid Style="{StaticResource TopLevelDataTemplateRootStyle}">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <!-- Title -->
            <TextBlock tm:RichText.Text="{Binding System_ItemNameDisplay}"
                       Grid.Row="0"
                       Margin="0, 0, 0, 5"
                       MaxLines="3"
                       TextWrapping="Wrap"
                       TextTrimming="WordEllipsis"
                       Style="{CustomResource TextStyle_MediumSmall_SemiLight}"
                       AutomationProperties.AutomationId="Title" />
            <!-- Display URL -->
            <TextBlock Grid.Row="1"
                       Margin="0, 0, 0, 16"
                       tm:RichText.Text="{Binding Extended:metadata.Extended:attribution.System_Search_Contents}"
                       MaxLines="1"
                       TextWrapping="NoWrap"
                       TextTrimming="WordEllipsis"
                       Foreground="{ThemeResource ImmersiveLightHighlightBrush}"
                       Style="{CustomResource TextStyle_Normal_Regular}"
                       AutomationProperties.AutomationId="DisplayUrl" />
            <Grid Grid.Row="2">
                <Grid.RowDefinitions>
                    <RowDefinition Height="160" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="310" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <!-- Page Preview -->
                <Grid Grid.Row="0"
                      Grid.Column="0"
                      Grid.RowSpan="2"
                      Height="160"
                      Margin="0, 0, 20, 0"
                      Background="{ThemeResource Local.ImagePlaceholderBackgroundBrush}">
                        <Image Stretch="UniformToFill"
                               tm:ImagePerfTracker.OriginalSource="{Binding Extended:pagePreview.Extended:image.System_ConnectedSearch_ImageUrl}"
                               AutomationProperties.AutomationId="PagePreviewImage" />
                        <Rectangle Style="{StaticResource Local.ImagePlaceholderRectangleStyle}" />
                </Grid>
                <!-- Snippet -->
                <TextBlock tm:RichText.Text="{Binding System_Search_AutoSummary}"
                           AutomationProperties.AutomationId="Snippet"
                           Grid.Row="0"
                           Grid.Column="1"
                           TextWrapping="Wrap"
                           TextTrimming="WordEllipsis"
                           Foreground="#FF777777"
                           Style="{CustomResource TextStyle_Normal_Regular}" />
            </Grid>
        </Grid>
    </DataTemplate>

    <DataTemplate x:Key="SerpFallbackTemplate.Generic">
        <Grid Style="{StaticResource TopLevelDataTemplateRootStyle}">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <!-- Title -->
            <TextBlock tm:RichText.Text="{Binding System_ItemNameDisplay}"
                       Grid.Row="0"
                       Margin="0, 0, 0, 5"
                       MaxLines="3"
                       TextWrapping="Wrap"
                       TextTrimming="WordEllipsis"
                       Style="{CustomResource TextStyle_MediumSmall_SemiLight}"
                       AutomationProperties.AutomationId="Title" />
            <!-- Display URL -->
            <TextBlock Grid.Row="1"
                       Margin="0, 0, 0, 5"
                       tm:RichText.Text="{Binding Extended:metadata.Extended:attribution.System_Search_Contents}"
                       MaxLines="2"
                       TextWrapping="NoWrap"
                       TextTrimming="WordEllipsis"
                       Foreground="{ThemeResource ImmersiveLightHighlightBrush}"
                       Style="{CustomResource TextStyle_Normal_Regular}"
                       AutomationProperties.AutomationId="DisplayUrl" />
            <!-- Snippet -->
            <TextBlock tm:RichText.Text="{Binding System_Search_AutoSummary}"
                       AutomationProperties.AutomationId="Snippet"
                       Grid.Row="2"
                       TextWrapping="Wrap"
                       TextTrimming="WordEllipsis"
                       Foreground="#FF777777"
                       Style="{CustomResource TextStyle_Normal_Regular}" />
        </Grid>
    </DataTemplate>

    <Style x:Key="SerpFallbackGridViewItemHorizontal"
           TargetType="GridViewItem"
           BasedOn="{StaticResource TopLevelGridViewItemStyle}">
        <Setter Property="ContentTemplate"
                Value="{StaticResource SerpFallbackTemplate.Horizontal}" />
        <Setter Property="Margin"
                Value="0, 0, 0, 20" />
    </Style>

    <Style x:Key="SerpFallbackGridViewItemVertical"
           TargetType="GridViewItem"
           BasedOn="{StaticResource TopLevelGridViewItemStyle}">
        <Setter Property="ContentTemplate"
                Value="{StaticResource SerpFallbackTemplate.Vertical}" />
        <Setter Property="Margin"
                Value="0, 0, 0, 20" />
    </Style>

    <Style x:Key="SerpFallbackGridViewItem"
           TargetType="GridViewItem"
           BasedOn="{StaticResource TopLevelGridViewItemStyle}">
        <Setter Property="ContentTemplate"
                Value="{StaticResource SerpFallbackTemplate.Generic}" />
        <Setter Property="Margin"
                Value="0, 0, 0, 20" />
    </Style>

    <Style x:Key="Horizontal"
           TargetType="GridViewItem"
           BasedOn="{StaticResource SerpFallbackGridViewItemHorizontal}">
        <Setter Property="VariableSizedWrapGrid.ColumnSpan"
                Value="1" />
        <Setter Property="VariableSizedWrapGrid.RowSpan"
                Value="2" />
    </Style>
    <Style x:Key="HorizontalLarge"
           TargetType="GridViewItem"
           BasedOn="{StaticResource SerpFallbackGridViewItemHorizontal}">
        <Setter Property="VariableSizedWrapGrid.ColumnSpan"
                Value="1" />
        <Setter Property="VariableSizedWrapGrid.RowSpan"
                Value="3" />
    </Style>
    <Style x:Key="Vertical"
           TargetType="GridViewItem"
           BasedOn="{StaticResource SerpFallbackGridViewItem}">
        <Setter Property="VariableSizedWrapGrid.ColumnSpan"
                Value="1" />
        <Setter Property="VariableSizedWrapGrid.RowSpan"
                Value="12" />
    </Style>
    <Style x:Key="VerticalLarge"
           TargetType="GridViewItem"
           BasedOn="{StaticResource SerpFallbackGridViewItemVertical}">
        <Setter Property="VariableSizedWrapGrid.ColumnSpan"
                Value="1" />
        <Setter Property="VariableSizedWrapGrid.RowSpan"
                Value="15" />
    </Style>
    <Style x:Key="VerticalNarrow"
           TargetType="GridViewItem"
           BasedOn="{StaticResource SerpFallbackGridViewItem}">
        <Setter Property="VariableSizedWrapGrid.ColumnSpan"
                Value="1" />
        <Setter Property="VariableSizedWrapGrid.RowSpan"
                Value="16" />
    </Style>
</ResourceDictionary>