<!-- Hero image module. -->
<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="Multimedia.ImageHeroAnswer_8_1_RP">

    <ResourceDictionary.ThemeDictionaries>
        <ResourceDictionary x:Key="Default">
            <!-- Black, 60% opaque (#99) -->
            <SolidColorBrush x:Key="Local.SeeMoreBackgroundBrush"
                             Color="#99000000" />
        </ResourceDictionary>
        <ResourceDictionary x:Key="HighContrast">
            <SolidColorBrush x:Key="Local.SeeMoreBackgroundBrush"
                             Color="{ThemeResource ImmersiveSaturatedBackgroundColor}"
                             Opacity="0.6" />
        </ResourceDictionary>
    </ResourceDictionary.ThemeDictionaries>

    <!-- Collage in horizontal layout -->
    <DataTemplate x:Key="Local.HorizontalCollage">
        <ContentControl DataContext="{Binding Extended:images.Extended:horizontal}"
                        Style="{CustomResource Resources.Shared.ImageCollage}"
                        IsTabStop="False" />
    </DataTemplate>

    <!-- Collage in horizontal large layout -->
    <DataTemplate x:Key="Local.HorizontalLargeCollage">
        <ContentControl DataContext="{Binding Extended:images.Extended:horizontalLarge}"
                        Style="{CustomResource Resources.Shared.ImageCollage}"
                        IsTabStop="False" />
    </DataTemplate>

    <!-- Collage in vertical layout -->
    <DataTemplate x:Key="Local.VerticalCollage">
        <ContentControl DataContext="{Binding Extended:images.Extended:vertical}"
                        Style="{CustomResource Resources.Shared.ImageCollage}"
                        IsTabStop="False" />
    </DataTemplate>

    <!-- Collage in vertical large layout -->
    <DataTemplate x:Key="Local.VerticalLargeCollage">
        <ContentControl DataContext="{Binding Extended:images.Extended:verticalLarge}"
                        Style="{CustomResource Resources.Shared.ImageCollage}"
                        IsTabStop="False" />
    </DataTemplate>

    <!-- Collage in vertical narrow layout -->
    <DataTemplate x:Key="Local.VerticalNarrowCollage">
        <ContentControl DataContext="{Binding Extended:images.Extended:verticalNarrow}"
                        Style="{CustomResource Resources.Shared.ImageCollage}"
                        IsTabStop="False" />
    </DataTemplate>

    <!-- Switch case converter to determine the horizontal alignment of the see more label -->
    <tm:SwitchCaseConverter x:Key="Local.SeeMoreLabelAlignmentSwitch"
                            Default="Left">
        <tm:SwitchCase Case="bookend"
                       Value="Right" />
        <!-- Default: Case="dominant" Value="Left" -->
    </tm:SwitchCaseConverter>

    <!-- Collage decorator used in both horizontal and horizontal large layouts -->
    <ControlTemplate x:Key="Local.CommonHorizontalCollage">
        <Button Style="{CustomResource Resources.Shared.SaturatedResultButtonStyle}"
                Command="{Binding System_ConnectedSearch_ActivateCommand}"
                AutomationProperties.Name="{Binding Extended:accessibility.Extended:text}">
            <Grid>

                <!-- Collage in horizontal layouts -->
                <ContentPresenter />

                <!-- See more label -->
                <Border HorizontalAlignment="{Binding Extended:position.Extended:value, Converter={StaticResource Local.SeeMoreLabelAlignmentSwitch}}"
                        VerticalAlignment="Bottom"
                        Margin="25"
                        Background="{ThemeResource Local.SeeMoreBackgroundBrush}">
                    <TextBlock Text="{Binding Extended:seeMore.Extended:text}"
                               Style="{CustomResource TextStyle_Small_Regular_Saturated}"
                               LineHeight="19"
                               Margin="5, 0" />
                </Border>
            </Grid>
        </Button>
    </ControlTemplate>

    <!-- Converter which sets the visibility of the image answer title -->
    <!-- Note: the title is only visible when the module is not in full-bleed mode and when it is in bookend position -->
    <tm:SwitchCaseConverter x:Key="Local.TitleVisiblitySelector" 
                            Default="Visible">
        <tm:SwitchCase Case="dominant" Value="Collapsed" />
    </tm:SwitchCaseConverter>

    <!-- Converter setting the width of the normal-size image collage, in horizontal layouts -->
    <!-- Width is 300 but if the module is at bookend position, margins of 30 need to be added on each side -->
    <tm:SwitchCaseConverter x:Key="Local.CollageWidthSelector" 
                            Default="360">
        <tm:SwitchCase Case="dominant" Value="300" />
    </tm:SwitchCaseConverter>

    <!-- Converter setting the margin on each side of the normal-size image collage, in horizontal layouts -->
    <tm:SwitchCaseConverter x:Key="Local.CollageMarginSelector" 
                            Default="30">
        <tm:SwitchCase Case="dominant" Value="0" />
    </tm:SwitchCaseConverter>

    <!-- Normal size image module for horizontal layouts -->
    <ControlTemplate x:Key="Local.NormalHorizontal">
        <!-- the top margin is set by templated parent Tag property: the value depends on whether the screen size is horizontal or horizontal large  -->
        <Grid Width="{Binding Extended:position.Extended:value, Converter={StaticResource Local.CollageWidthSelector}}"
              Margin="{Binding Tag, RelativeSource={RelativeSource TemplatedParent}}">
            <Grid.RowDefinitions>
                <RowDefinition Height="40" />
                <RowDefinition />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="{Binding Extended:position.Extended:value, Converter={StaticResource Local.CollageMarginSelector}}" />
                <ColumnDefinition />
                <ColumnDefinition Width="{Binding Extended:position.Extended:value, Converter={StaticResource Local.CollageMarginSelector}}" />
            </Grid.ColumnDefinitions>

            <!-- Title (to be displayed in bookend position) -->
            <Button Grid.Column="1"
                    Command="{Binding System_ConnectedSearch_ActivateCommand}"
                    VerticalAlignment="Top"
                    Style="{CustomResource Resources.Shared.SaturatedResultButtonStyle}"
                    Padding="9, 3"
                    Margin="-11, 0, 0, 0"
                    Visibility="{Binding Extended:position.Extended:value, Converter={StaticResource Local.TitleVisiblitySelector}}">
                <StackPanel HorizontalAlignment="Left"
                            Orientation="Horizontal">
                    <TextBlock TextTrimming="CharacterEllipsis"
                               TextWrapping="Wrap"
                               MaxWidth="220"
                               Style="{CustomResource Resources.Shared.HeroPrimaryTextStyle}"
                               tm:RichText.Text="{Binding Extended:text.Extended:title}" />
                    <TextBlock tm:RichText.Text="{Binding Extended:text.Extended:directionIcon}"
                               Style="{CustomResource Resources.Shared.HeroPrimaryTextStyle}"
                               FontFamily="Segoe UI Symbol"
                               Margin="7, 0, 0, 0" />
                </StackPanel>
            </Button>

            <!-- Horizontal layout collage -->
            <ContentControl Grid.Row="1"
                            Grid.Column="1"
                            Content="{Binding}"
                            Template="{StaticResource Local.CommonHorizontalCollage}"
                            ContentTemplate="{Binding ContentTemplate, RelativeSource={RelativeSource TemplatedParent}}"
                            IsTabStop="False"/>
            
        </Grid>
    </ControlTemplate>

    <!-- Switch case converter for horizontal layouts, to render the module in either full-bleed size or in normal size -->
    <tm:SwitchCaseConverter x:Key="Local.HorizontalFullBleedSwitch"
                            Default="{StaticResource Local.CommonHorizontalCollage}">
        <!-- Normal size case for horizontal layouts -->
        <tm:SwitchCase Case="false"
                       Value="{StaticResource Local.NormalHorizontal}" />

        <!-- Full-bleed case for horizontal layouts -->
        <!-- Default: Case="true" Value="{StaticResource Local.NormalHorizontal} "-->
    </tm:SwitchCaseConverter>

    <!-- Vertical, vertical large, vertical narrow layouts -->
    <ControlTemplate x:Key="Local.CommonVerticalTemplate">
        <Button Style="{CustomResource Resources.Shared.SaturatedResultButtonStyle}"
                Command="{Binding System_ConnectedSearch_ActivateCommand}"
                AutomationProperties.Name="{Binding Extended:accessibility.Extended:text}">
            <Grid>

                <!-- Collage in vertical layouts -->
                <ContentPresenter />

                <!-- See more label -->
                <Border HorizontalAlignment="Left"
                        VerticalAlignment="Bottom"
                        Margin="25"
                        Background="{ThemeResource Local.SeeMoreBackgroundBrush}">
                    <TextBlock Text="{Binding Extended:seeMore.Extended:text}"
                               Style="{CustomResource TextStyle_Small_Regular_Saturated}"
                               LineHeight="19"
                               Margin="5, 0" />
                </Border>
            </Grid>
        </Button>
    </ControlTemplate>

    <Style x:Key="Horizontal"
           TargetType="ContentControl">
        <Setter Property="tm:SetterBinding.Setters">
            <Setter.Value>
                <SetterBaseCollection>
                    <Setter Property="Template">
                        <Setter.Value>
                            <tm:SetterBinding Path="Extended:images.Extended:horizontal.Extended:isFullBleed"
                                              Converter="{StaticResource Local.HorizontalFullBleedSwitch}" />
                        </Setter.Value>
                    </Setter>
                </SetterBaseCollection>
            </Setter.Value>
        </Setter>
        <Setter Property="ContentTemplate"
                Value="{StaticResource Local.HorizontalCollage}" />
        <!-- 100 top margin if the module is not full-bleed -->
        <Setter Property="Tag"
                Value="0, 100, 0, 0" />
    </Style>
    <Style x:Key="HorizontalLarge"
           TargetType="ContentControl"
           BasedOn="{StaticResource Horizontal}">
        <Setter Property="tm:SetterBinding.Setters">
            <Setter.Value>
                <SetterBaseCollection>
                    <Setter Property="Template">
                        <Setter.Value>
                            <tm:SetterBinding Path="Extended:images.Extended:horizontalLarge.Extended:isFullBleed"
                                              Converter="{StaticResource Local.HorizontalFullBleedSwitch}" />
                        </Setter.Value>
                    </Setter>
                </SetterBaseCollection>
            </Setter.Value>
        </Setter>
        <Setter Property="ContentTemplate"
                Value="{StaticResource Local.HorizontalLargeCollage}" />
        <!-- 240 top margin if the module is not full-bleed -->
        <Setter Property="Tag"
                Value="0, 240, 0, 0" />
    </Style>
    <Style x:Key="Vertical"
           TargetType="ContentControl">
        <Setter Property="Template"
                Value="{StaticResource Local.CommonVerticalTemplate}" />
        <Setter Property="ContentTemplate"
                Value="{StaticResource Local.VerticalCollage}" />
        <Setter Property="Margin"
                Value="50, 0, 0, 0" />
    </Style>
    <Style x:Key="VerticalLarge"
           TargetType="ContentControl"
           BasedOn="{StaticResource Vertical}">
        <Setter Property="ContentTemplate"
                Value="{StaticResource Local.VerticalLargeCollage}" />
        <Setter Property="Margin"
                Value="80, 0, 0, 0" />
    </Style>
    <Style x:Key="VerticalNarrow"
           TargetType="ContentControl"
           BasedOn="{StaticResource Vertical}">
        <Setter Property="ContentTemplate"
                Value="{StaticResource Local.VerticalNarrowCollage}" />
        <Setter Property="Margin"
                Value="30, 0, 0, 0" />
    </Style>
</ResourceDictionary>