<Page xmlns:local="clr-namespace:ForzaUI"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      xmlns:System="clr-namespace:System;assembly=mscorlib"
      x:Class="ForzaUI.A_ContentHighlightSheet"
      mc:Ignorable="d"
      Style="{StaticResource A_Style_Page_Generic}"
      DataContext="{Binding RelativeSource={RelativeSource Self}}"
      Margin="0">
    <Page.Resources>
        <ResourceDictionary>

            <Color x:Key="A_Color_Car_Pack">#FFFFFFFF</Color>

            <!---TEXT Styles-->
            <!--Seasonal Events Control. Use uppercase because converter used puts all text in uppercase-->
            <Style x:Key="A_Style_FZRun_BOLD" TargetType="local:FZRun">
                <Setter Property="FontFamily" Value="Horizon_A" />
            </Style>
            <Style x:Key="A_Style_FZRun_HorizonC_BOLD" TargetType="local:FZRun">
                <Setter Property="FontFamily" Value="Horizon_C" />
            </Style>
            <MappingConverter x:Key="A_MappingConverter_Subtitle_Bold">
                <MappingConverterEntry Key="{NoCase BOLD}" Value="{StaticResource A_Style_FZRun_BOLD}" />
            </MappingConverter>

            <MappingConverter x:Key="A_MappingConverter_Subtitle_HorizonC_Bold">
                <MappingConverterEntry Key="{NoCase BOLD}" Value="{StaticResource A_Style_FZRun_HorizonC_BOLD}" />
            </MappingConverter>
            
            <Style x:Key="A_Style_FZTextBlock_ContentHighlightSheetText" TargetType="local:FZTextBlock" BasedOn="{StaticResource A_Style_FZTextBlock_HorizonA}">
                <Setter Property="Color" Value="{StaticResource A_Color_White}"/>
                <Setter Property="FontSize" Value="24"/>
            </Style>

            <Style x:Key="A_Style_FZTextBlock_ContentHighlightSheet_Subtitle_Base" TargetType="local:FZTextBlock" BasedOn="{StaticResource A_Style_FZTextBlock_ContentHighlightSheetText}">
                <Setter Property="TextAlignment" Value="Center"/>
                <Setter Property="MarkupConverter" Value="A_MappingConverter_Subtitle_Bold"/>
                <Setter Property="CapHeight" Value="76"/>
                <Setter Property="LineStackingStrategy" Value="BlockLineHeight"/>
                <Setter Property="LineHeight" Value="86"/>
                <Setter Property="FontFamily" Value="Horizon_A"/>
                <Setter Property="MaxHeight" Value="150"/>
                <Setter Property="TextWrapping" Value="Wrap"/>
            </Style>

            <Style x:Key="A_Style_FZTextBlock_ContentHighlightSheet_Subtitle_Default" TargetType="local:FZTextBlock" BasedOn="{StaticResource A_Style_FZTextBlock_ContentHighlightSheet_Subtitle_Base}">
                <Setter Property="Text" Value="{Binding ScreenTitle, Converter={StaticResource A_StringToUpper}}"/>
                <Setter Property="CapHeight" Value="36"/>
                <Setter Property="LineHeight" Value="50"/>
                <Setter Property="Text" Value="{Binding DLCAvailability}"/>
                <Setter Property="Color" Value="{StaticResource H_Color_Primary_Yellow}" />
            </Style>

            <Style x:Key="A_Style_FZTextBlock_ContentHighlightSheet_Title_Base" TargetType="local:FZTextBlock" BasedOn="{StaticResource A_Style_FZTextBlock_ContentHighlightSheetText}">
                <Setter Property="TextAlignment" Value="Center"/>
                <Setter Property="CapHeight" Value="36"/>
                <Setter Property="FontFamily" Value="Horizon_B"/>
                <Setter Property="Visibility" Value="Collapsed"/>
                <Setter Property="Margin" Value="0,12,0,0"/>
            </Style>

            <Style x:Key="A_Style_FZTextBlock_ContentHighlightSheet_Title_Large" TargetType="local:FZTextBlock" BasedOn="{StaticResource A_Style_FZTextBlock_ContentHighlightSheet_Title_Base}">
                <Setter Property="FontFamily" Value="Horizon_A"/>
                <Setter Property="CapHeight" Value="85"/>
            </Style>
            <Style x:Key="A_Style_FZTextBlock_ContentHighlightSheet_Title_Colored" TargetType="local:FZTextBlock" BasedOn="{StaticResource A_Style_FZTextBlock_ContentHighlightSheet_Title_Large}">
                <Setter Property="Visibility" Value="Visible"/>
                <Setter Property="Text" Value="{Binding ScreenTitle}"/>
                <Style.Triggers>
                    <DataTrigger Binding="{Binding OverrideSheetPrimaryColor, Converter={StaticResource A_Converter_TrueIfNotNull}}" Value="{StaticResource A_Boolean_True}">
                        <Setter Property="Color" Value="{Binding OverrideSheetPrimaryColor}"/>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
            
            <Style x:Key="A_Style_FZTextBlock_ContentHighlightSheet_Description" TargetType="local:FZTextBlock" BasedOn="{StaticResource A_Style_FZTextBlock_ContentHighlightSheetText}">
                <Setter Property="FontSize" Value="22"/>
                <Setter Property="FontFamily" Value="Horizon_D"/>
                <Setter Property="TextAlignment" Value="Left"/>
                <Setter Property="TextWrapping" Value="Wrap"/>
                <Setter Property="MaxHeight" Value="124"/>
                <Setter Property="MarkupConverter" Value="A_MappingConverter_Subtitle_HorizonC_Bold"/>
                <Setter Property="Text" Value="{Binding ScreenDescription}"/>
                <Setter Property="Margin" Value="0,0,78,0"/>
            </Style>
            
            <!-- Material Styles-->
            <Style x:Key="A_Style_FZMaterial_ColorBar" TargetType="local:FZMaterial">
                <Setter Property="Visibility" Value="Visible"/>
                <Setter Property="Color" Value="{StaticResource A_Color_Car_Pack}"/>
                <Style.Triggers>
                    <DataTrigger Binding="{Binding OverrideSheetPrimaryColor, Converter={StaticResource A_Converter_TrueIfNotNull}}" Value="{StaticResource A_Boolean_True}">
                        <Setter Property="Color" Value="{Binding OverrideSheetPrimaryColor}"/>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
            
            <Style x:Key="A_Style_Text_HighlightItem" TargetType="{x:Type local:FZTextBlock}">
                <Setter Property="Color" Value="{StaticResource H_Color_Primary_White}" />
                <Setter Property="FontSize" Value="40" />
                <Setter Property="FontFamily" Value="Horizon_B" />
                <Setter Property="MaxWidth" Value="330" />
                <Setter Property="MaxHeight" Value="50" />
            </Style>

            <Style x:Key="A_Style_TagText" TargetType="{x:Type local:FZTextBlock}">
                <Setter Property="VerticalAlignment" Value="Center" />
                <Setter Property="HorizontalAlignment" Value="Center" />
                <Setter Property="Color" Value="{StaticResource H_Color_Primary_White}" />
                <Setter Property="FontSize" Value="90" />
                <Setter Property="Height" Value="14" />
            </Style>

            <Style x:Key="A_Style_Spacing_BetweenTags" TargetType="Decorator">
                <Setter Property="Height" Value="0" />
                <Style.Triggers>
                    <MultiDataTrigger>
                        <MultiDataTrigger.Conditions>
                            <Condition Binding="{Binding IsExclusive}" Value="True" />
                            <Condition Binding="{Binding HasRarity}" Value="True" />
                        </MultiDataTrigger.Conditions>
                        <Setter Property="Height" Value="8" />
                    </MultiDataTrigger>
                </Style.Triggers>
            </Style>

           
            <FZMaterialPresetGlassRoundtangle x:Key="A_FZMaterialPresetGlassRoundtangle_BackgroundBlur"
                                              BlurAmount="Low"
                                              CornerRadius="3,3,3,3" />

            <Style x:Key="A_Style_FZMaterial_ItemBackground" TargetType="{Type local:FZMaterial}">
                <Style.Resources>
                    <ResourceDictionary> 
                        <FZMaterialPresetRoundtangle x:Key="A_FZMaterialPresetRoundtangle_WithGradient"
                                                     GradientColorA="#EE341735"
                                                     GradientColorB="#00000000"
                                                     GradientAngle="0" />
                    </ResourceDictionary>
                </Style.Resources> 
                <Setter Property="Preset" Value="{StaticResource A_FZMaterialPresetRoundtangle_WithGradient}" />
                <Setter Property="VerticalAlignment" Value="Stretch" /> 
                <Setter Property="HorizontalAlignment" Value="Stretch" /> 
            </Style>

            <!-- how each highlightItem is displayed -->
            <DataTemplate DataType="{x:Type local:HighlightItem}"> 
                 <Decorator Margin="0,0,40,15" >
                    <Grid x:Name="HighlightItemGrid">
                        <local:FZMaterial x:Name="HighlightItemBackgroundBlur"
                                          Preset="{StaticResource A_FZMaterialPresetGlassRoundtangle_BackgroundBlur}" 
                                          Color="#00FFFFFF">
                            <local:FZMaterial.OpacityMask>
                                <LinearGradientBrush StartPoint="0, 0"
                                                     EndPoint="0, 0.6">
                                    <GradientStop Color="#00000000"
                                                  Offset="0.2" />
                                    <GradientStop Color="#FF000000"
                                                  Offset="1" />
                                </LinearGradientBrush>
                            </local:FZMaterial.OpacityMask>
                        </local:FZMaterial>
                        <local:FZMaterial x:Name="HighlightItemBackground" 
                                          Style="{StaticResource A_Style_FZMaterial_ItemBackground}" />
                        <Decorator x:Name="IconContainer"
                                   VerticalAlignment="Center"
                                   Margin="0,0,0,120">
                            <FZMaterial x:Name="HighlightItemIcon"
                                        VerticalAlignment="Center"
                                        HorizontalAlignment="Center"
                                        Margin="-80,0,0,0"
                                        Height="280"
                                        Width="280"
                                        Stretch="None"
                                        ImageSource="{Binding Thumbnail}"/>
                        </Decorator>
                        
                        <Decorator x:Name="TextContainer"
                                   LayoutTransform="{StaticResource A_Transform_Italic}"
                                   VerticalAlignment="Bottom"
                                   HorizontalAlignment="Left"
                                   Margin="27,0,0,25">
                            <StackPanel VerticalAlignment="Bottom" HorizontalAlignment="Left" >
                                <local:FZTextBlock x:Name="TextLine2"
                                                   Style="{StaticResource A_Style_Text_HighlightItem}"
                                                   Text="{Binding TextLine2}"
                                                   HorizontalAlignment="Left"/>
                                <Decorator Height="8"/>
                                <local:FZTextBlock x:Name="TextLine1"
                                                   Style="{StaticResource A_Style_Text_HighlightItem}"
                                                   Text="{Binding TextLine1}"
                                                   FontFamily="Horizon_A"
                                                   HorizontalAlignment="Left"/>
                            </StackPanel>
                        </Decorator>

                        <StackPanel x:Name="Tags" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,0,-5,0">
                            <Grid x:Name="ExclusiveTag"
                                  Visibility="{Binding IsExclusive, Converter= {StaticResource A_FZBooleanToVisibilityConverter}}"
                                  Width="121"
                                  Height="33"
                                  VerticalAlignment="Bottom">
                                <local:FZMaterial x:Name="ExclusiveTagGlow"
                                                  Style="{StaticResource A_Style_FZMaterial_ExclusiveGlow}"/>
                                <local:FZMaterial x:Name="ExclusiveTagBackground"
                                                  Color="{StaticResource H_Color_Primary_Yellow}"/>
                                <local:FZTextBlock x:Name="ExclusiveTagText"
                                                   Style="{StaticResource A_Style_TagText}"
                                                   Margin="15,8,10,8"
                                                   LayoutTransform="{StaticResource A_Transform_Italic}"
                                                   Color="{StaticResource H_Color_Primary_Purple}"
                                                   Text="{local:Loc Main.IDS_Reward_Exclusive}"/>
                            </Grid>
                            <Decorator Style="{StaticResource A_Style_Spacing_BetweenTags}"/>
                            <Grid x:Name="RarityTag"
                                  Visibility="{Binding HasRarity, Converter={StaticResource A_FZBooleanToVisibilityConverter}}"
                                  Width="121"
                                  Height="33"
                                  VerticalAlignment="Bottom">
                                <local:FZMaterial x:Name="RarityTagBackground"
                                            Width="121"
                                            Height="33"
                                            HorizontalAlignment="Left"
                                            Color="{Binding Rarity, Converter={StaticResource A_Converter_RarityToColor}}"/>
                                <local:FZTextBlock x:Name="RarityTagText"
                                                   Style="{StaticResource A_Style_TagText}"
                                                   Margin="8,6,8,6"
                                                   Text="{Binding Rarity, Converter={StaticResource A_Converter_RarityToNameString}}"/>
                            </Grid>
                        </StackPanel>
                    </Grid>
                </Decorator>
            </DataTemplate>

            <!-- Container Style-->
            <Style x:Key="A_Style_ListBoxItem_ContentHighlightSheetMenu" TargetType="ListBoxItem">
                <Setter Property="Focusable" Value="False" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ListBoxItem">
                                <ContentPresenter />
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

            <!-- Create custom Scroll viewer to support arrows around our scrolling. -->
            <Style TargetType="local:FZMaterial" x:Key="A_Style_FZMaterial_Arrow_Visibility_Base">
                <Setter Property="Opacity" Value="1"/>
                <Setter Property="Width" Value="18"/>
                <Setter Property="Height" Value="9"/>
                <Setter Property="Data" Value="{StaticResource A_Geometry_SpinnerArrow}" />
            </Style>
            <Style x:Key="A_Style_FZMaterial_Arrow_Top" TargetType="local:FZMaterial" BasedOn="{StaticResource A_Style_FZMaterial_Arrow_Visibility_Base}">
                <Setter Property="RenderTransform">
                    <Setter.Value>
                        <ScaleTransform ScaleY="-1" />
                    </Setter.Value>
                </Setter>
                <Style.Triggers>
                    <DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:FZScrollViewer}}, Path=(local:FZScrollViewer.IsAtTop)}" Value="True">
                        <Setter Property="Opacity" Value="0.5"/>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
            <Style x:Key="A_Style_FZMaterial_Arrow_Bottom" TargetType="local:FZMaterial" BasedOn="{StaticResource A_Style_FZMaterial_Arrow_Visibility_Base}">
                <Style.Triggers>
                    <DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:FZScrollViewer}}, Path=(local:FZScrollViewer.IsAtBottom)}" Value="True">
                        <Setter Property="Opacity" Value="0.5"/>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
            <ControlTemplate x:Key="A_Style_ContentHighlightSheet_FZScrollViewer" TargetType="{x:Type local:FZScrollViewer}">
                <Grid>
                    <ContentControl Style="{StaticResource A_ContentControl_HorizontalFadeViewer}">
                            <ScrollContentPresenter HorizontalAlignment="Stretch" CanContentScroll="True"/>
                    </ContentControl>
                    <ScrollBar x:Name="PART_VerticalScrollBar"
                            Background="{StaticResource A_Brush_ScrollBarBackground}"
                            Foreground="{StaticResource A_Brush_ScrollBarForeground}"
                            HorizontalAlignment="Right"
                            Minimum="0" 
                            Maximum="{TemplateBinding ScrollableHeight}" 
                            ViewportSize="{TemplateBinding ViewportHeight}" 
                            Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource Mode=TemplatedParent}}" 
                            Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" 
                            Margin="0, 0, -25, 0"
                            Style="{StaticResource A_Style_ScrollBar_Default}"/>
                </Grid>
            </ControlTemplate>

            <Style x:Key="A_Style_Listbox_SellingItems" TargetType="local:CommonListBox">
                <Setter Property="MaxHeight" Value="654"/>
                <Setter Property="HorizontalAlignment" Value="Stretch"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="local:CommonListBox">
                            <Grid ClipToBounds="False">
                                <local:FZScrollViewer
                                                Template="{StaticResource A_Style_ContentHighlightSheet_FZScrollViewer}"
                                                VerticalScrollBarVisibility="Auto"
                                                HorizontalAlignment="Left"
                                                CanContentScroll="True"
                                                KeepSelectionOnScreen="False" Margin="0,3">
                                    <WrapPanel Orientation="Horizontal" IsItemsHost="True" 
                                                    Margin="40,0,40,0" 
                                                    ItemHeight="315"
                                                    ItemWidth="410" 
                                                    HorizontalAlignment="Left"
                                                    Focusable="False"/>
                                </local:FZScrollViewer>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
                <Setter Property="ItemContainerStyle" Value="{StaticResource A_Style_ListBoxItem_ContentHighlightSheetMenu}"/>
                <Style.Triggers>
                    <DataTrigger Binding="{Binding Path=Items.Count}" Value="0">
                        <Setter Property="Visibility" Value="Collapsed" />
                    </DataTrigger>
                </Style.Triggers>
            </Style>

            <MappingConverter x:Key="A_LangStrToContentHighlightSubtitleMargin" Default="0">
                <MappingConverterEntry Key="CHS" Value="0,0,0,20"/>
                <MappingConverterEntry Key="JP" Value="0,0,0,16"/>
                <MappingConverterEntry Key="CHT" Value="0,0,0,20"/>
                <MappingConverterEntry Key="KO" Value="0,0,0,16"/>
            </MappingConverter>

            <Style x:Key="A_Style_Decorator_ContentHighlight_Subtitle" TargetType="Decorator">
                <Setter Property="Visibility" Value="Visible"/>
                <Setter Property="MaxWidth" Value="740"/>
                <Setter Property="Margin" Value="{Binding LangStr, Source={StaticResource PART_UISceneContext}, Converter={StaticResource A_LangStrToContentHighlightSubtitleMargin}}"/>
            </Style>
            <Style x:Key="A_Style_Decorator_ContentHighlight_Title" TargetType="Decorator" BasedOn="{StaticResource A_Style_Decorator_ContentHighlight_Subtitle}">
                <Setter Property="Margin" Value="5,0,0,0"/>
            </Style>
        </ResourceDictionary>
    </Page.Resources>

    <local:UIPageTransitionManager.TransitionManager>
        <local:UIPageTransitionManager Preset="{StaticResource A_UIPageTransitionManagerPreset_Menu}"/>
    </local:UIPageTransitionManager.TransitionManager>
    <Grid>
        <Grid x:Name="PART_LayoutRoot" Style="{StaticResource A_Style_FrameworkElement_LayoutRoot}">
            <Border ClipToBounds="false">
                <Grid Style="{StaticResource A_Style_FrameworkElement_DefaultTransition_0}"
                  ClipToBounds="false">

                    <!--Background Image/video-->
                    <local:FZMaterial ImageSource="{Binding ScreenBackground}" Stretch="UniformToFill" 
                                  Visibility="{Binding Downloaded, RelativeSource={RelativeSource Self}, Converter={StaticResource A_FZBooleanToVisibilityConverter}}" />

                    <!--Text and image Content resting layer -->
                    <Grid>
                        <Decorator>
                            <Grid>
                                <Grid>
                                    <local:FZMaterialGlassCapture />
                                    <StackPanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
                                        
                                        <StackPanel  x:Name="ContentInfo" Orientation="Vertical" HorizontalAlignment="Left" DockPanel.Dock="Top" Margin="105,60,0,0">
                                            <StackPanel Orientation="Vertical">
                                                <StackPanel Orientation="Vertical" HorizontalAlignment="Left" MaxHeight="180">
                                                    <Decorator x:Name="Title" Style="{StaticResource A_Style_Decorator_ContentHighlight_Title}">
                                                        <local:FZTextBlock HorizontalAlignment="Left" VerticalAlignment="Top" Style="{StaticResource A_Style_FZTextBlock_ContentHighlightSheet_Title_Colored}"
                                                                           local:ScreenReader.Line="{Binding Text, RelativeSource={RelativeSource Self}}"
                                                                           local:ScreenReader.Event="OnLoad"
                                                                           local:ScreenReader.LineType="ScreenSubtitle" />
                                                    </Decorator>
                                                    <Decorator x:Name="DLCAvailability" Margin="0,16,0,0" Style="{StaticResource A_Style_Decorator_ContentHighlight_Subtitle}">
                                                        <local:FZTextBlock HorizontalAlignment="Left" Style="{StaticResource A_Style_FZTextBlock_ContentHighlightSheet_Subtitle_Default}"
                                                                            local:ScreenReader.Line="{Binding (Text), RelativeSource={RelativeSource Self}, Converter={StaticResource A_Converter_TrimInlineMarkup}}"
                                                                            local:ScreenReader.Event="OnLoad"
                                                                            local:ScreenReader.LineType="ScreenTitle" />
                                                    </Decorator>
                                                </StackPanel>
                                            </StackPanel>
                                            <Decorator x:Name="ContentDescription" Margin="0,21,0,36"  Width="1000"  VerticalAlignment="Top" HorizontalAlignment="Left" DockPanel.Dock="Top">
                                                <local:FZTextBlock VerticalAlignment="Top" TextWrapping="Wrap"
                                                            Style="{StaticResource A_Style_FZTextBlock_ContentHighlightSheet_Description}"
                                                            local:ScreenReader.Line="{Binding (Text), RelativeSource={RelativeSource Self}, Converter={StaticResource A_Converter_TrimInlineMarkup}}"
                                                            local:ScreenReader.Event="OnLoad"
                                                            local:ScreenReader.LineType="ScreenDescription" />
                                            </Decorator>
                                        </StackPanel>
                                        <Decorator x:Name="HighlightItemsPresenter"
                                                   DockPanel.Dock="Bottom" 
                                                   VerticalAlignment="Top"
                                                   HorizontalAlignment="Stretch"
                                                   Margin="120,0,0,48">
                                            <StackPanel Orientation="Vertical" x:Name="ItemsDisplayer" VerticalAlignment="Stretch" >
                                                <local:CommonListBox x:Name="PART_CommonListBox_ContentHighlightSheetList"
                                                 ItemsSource="{Binding Items}"
                                                 HorizontalAlignment="Stretch"
                                                 Style="{StaticResource A_Style_Listbox_SellingItems}"/>
                                            </StackPanel>
                                        </Decorator>
                                    </StackPanel>
                                </Grid>
                            </Grid>
                        </Decorator>
                    </Grid>
                </Grid>
            </Border>
        </Grid>
        <Decorator Style="{StaticResource A_Style_FrameworkElement_DefaultTransition_0}">
            <ContentControl x:Name="BottomBar" Style="{StaticResource A_Style_ButtonBar}">
                <ContentControl x:Name="PART_DefaultHelpPanel"
                                local:ControllerButtonPanel.BDescription="{local:Loc HelpButtons.IDS_Back}"
                        Style="{StaticResource A_Style_ContentControl_DefaultButtonBar}"/>
            </ContentControl>
        </Decorator>
    </Grid>
</Page>
