<Page x:Name="Page"
    x:Class="ForzaUI.A_LiveryVinylSelect"
    xmlns:local="clr-namespace:ForzaUI"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    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"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    mc:Ignorable="d"
    Style="{StaticResource A_Style_Page_Generic}"
    DataContext="{Binding RelativeSource={RelativeSource Self}}">

    <Page.Resources>
        <ResourceDictionary>
            <System:Double x:Key="A_Double_VinylItemWidth">164</System:Double>
            <System:Double x:Key="A_Double_VinylItemHeight">164</System:Double>

            <Style x:Key="A_Style_FzMaterial_LiveryShape" TargetType="local:FZMaterial">
                <Setter Property="Width" Value="70"/>
                <Setter Property="Height" Value="70"/>
                <Setter Property="IsHitTestVisible" Value="False"/>
                <Style.Triggers>
                    <DataTrigger Binding="{Binding IsDecal}" Value="True">
                        <Setter Property="Width" Value="100"/>
                        <Setter Property="Height" Value="100"/>
                    </DataTrigger>
                </Style.Triggers>
            </Style>

            <SolidColorBrush x:Key="PART_VinylModelColor" Color="White"/>

            <ControlTemplate x:Key="A_ControlTemplate_Spinner">
                <ProgressBar x:Name="Spinner"
                             IsIndeterminate="True"
                             Style="{StaticResource A_Style_ProgressBar_WaitSpinner}"
                             Height="56" />
            </ControlTemplate>
            
            <local:LinearTransformConverter x:Key="A_LinearTransformConverter_FontVinylXTranslate" Scale="-1"/>
            
            <DataTemplate x:Key="A_DataTemplate_LiveryVinylItem">
                <Grid local:ZPanel.DisableClipping="{Binding (Selector.IsSelected), RelativeSource={RelativeSource AncestorType=ListBoxItem}}">
                    <local:FZMaterial x:Name="FzMaterial_LiveryShape1" Style="{StaticResource A_Style_FzMaterial_LiveryShape}"  Visibility="{Binding IsStorefrontItem, Converter={StaticResource A_FZBooleanToVisibilityConverter_Inverse}}">
                        <local:FZMaterial.RenderTransform>
                                <TranslateTransform X="{Binding XTranslate, Converter={StaticResource A_LinearTransformConverter_FontVinylXTranslate}}"/>
                        </local:FZMaterial.RenderTransform>
                        <local:FZMaterial.Effect>
                            <local:LinearToSRGBEffect>
                                <local:LinearToSRGBEffect.Input>
                                    <ImageBrush ImageSource="{Binding LiveryImages[0]}"/>
                                </local:LinearToSRGBEffect.Input>
                            </local:LinearToSRGBEffect>
                        </local:FZMaterial.Effect>
                        </local:FZMaterial>
                            <local:FZMaterial x:Name="FzMaterial_LiveryShape2" Style="{StaticResource A_Style_FzMaterial_LiveryShape}"  Visibility="{Binding IsStorefrontItem, Converter={StaticResource A_FZBooleanToVisibilityConverter_Inverse}}">
                            <local:FZMaterial.RenderTransform>
                                <TranslateTransform X="{Binding XTranslate}"/>
                                </local:FZMaterial.RenderTransform>
                        <local:FZMaterial.Effect>
                            <local:LinearToSRGBEffect>
                                <local:LinearToSRGBEffect.Input>
                                    <ImageBrush ImageSource="{Binding LiveryImages[1]}"/>
                                </local:LinearToSRGBEffect.Input>
                            </local:LinearToSRGBEffect>
                        </local:FZMaterial.Effect>
                    </local:FZMaterial>
                    <Grid Visibility="{Binding IsStorefrontItem, Converter={StaticResource A_FZBooleanToVisibilityConverter}}"
                        IsHitTestVisible="False">
                        <ContentControl DataContext="{Binding}" Template="{StaticResource A_ControlTemplate_Spinner}" Visibility="{Binding IsReady, Converter={StaticResource A_FZBooleanToVisibilityConverter_Inverse}}" />
                        <local:FZMaterial x:Name="FzMaterial_LiveryShape_UGC" Width="145" Height="145" HorizontalAlignment="Center" VerticalAlignment="Center"
                                        Visibility="{Binding IsReady, Converter={StaticResource A_FZBooleanToVisibilityConverter}}">
                            <local:FZMaterial.Effect>
                                <local:LinearToSRGBEffect>
                                    <local:LinearToSRGBEffect.Input>
                                        <ImageBrush ImageSource="{Binding LiveryImage}"/> 
                                    </local:LinearToSRGBEffect.Input>
                                </local:LinearToSRGBEffect>
                            </local:FZMaterial.Effect>
                        </local:FZMaterial>
                    </Grid>
                    <FZMaterial x:Name="Lock"
                                Visibility="{Binding IsLocked, Converter={StaticResource A_Converter_BoolToVis}}"
                                ImageSource="/ForzaUI;component/Textures/Anthem/Icons/Pad_Lock.png"
                                Stretch="Uniform"
                                Color="{StaticResource H_Color_Primary_White}"
                                Width="25"
                                Height="25"
                                Margin="5"
                                HorizontalAlignment="Left"
                                VerticalAlignment="Top"/>
                    <local:FZMaterial x:Name="FavoritedIcon"
                                      Width="23" Height="23"
                                      Color="{StaticResource H_Color_Primary_Pink}"
                                      Visibility="{Binding IsFavorite, Converter={StaticResource A_FZBooleanToVisibilityConverter}, FallbackValue=Collapsed}"
                                      ImageSource="/ForzaUI;component/Textures/Data_Bound/CreativeHub/FollowedHeart.png"
                                      HorizontalAlignment="Right"
                                      VerticalAlignment="Bottom"
                                      Margin="6"/>
                </Grid>
            </DataTemplate>

            <Style x:Key="A_Style_ContentControl_LiverySelect_ContainerBackground" TargetType="ContentControl" BasedOn="{StaticResource H_Style_ContentControl_ContainerBackground}">
                <Setter Property="DynamicData.Data">
                    <Setter.Value>
                        <DynamicDataSource>
                            <DynamicDataItem 
                                Name="DarkItemBackgroundStyle"
                                DataType="Style">
                                <DynamicDataItem.Value>
                                    <Style TargetType="FZMaterial" BasedOn="{StaticResource H_Style_Container_GlassHighBlur_Description}">
                                        <Setter Property="Preset" Value="{StaticResource H_GlassRoundtangle_8px}" />
                                    </Style>
                                </DynamicDataItem.Value>
                            </DynamicDataItem>
 
                        </DynamicDataSource>
                        
                    </Setter.Value>
                </Setter>
            </Style>
            <Style x:Key="A_Style_ContentControl_Carousel_ContainerStyle" 
                   TargetType="ListBoxItem" BasedOn="{StaticResource H_Style_ContentControl_Carousel_ContainerStyle}">
                <Setter Property="Width" Value="160"/>
                <Setter Property="Height" Value="160"/> 
                <Setter Property="DynamicData.Data">
                    <Setter.Value>
                        <DynamicDataSource>
                            <DynamicDataItem
                                Name="MouseRolloverCornerRadius"
                                DataType="CornerRadius"
                                Value="8" />
                            <DynamicDataItem 
                                Name="ItemBackgroundContainerControlStyle"
                                DataType="Style"
                                Value="{StaticResource A_Style_ContentControl_LiverySelect_ContainerBackground}" />
                        </DynamicDataSource>
                    </Setter.Value>
                </Setter>
            </Style>

            <Style x:Key="A_Style_FrameworkElement_CategoryContainer"
                   TargetType="FrameworkElement">
                <Setter Property="Visibility" Value="{Binding ShowTabs, Converter={StaticResource A_FZBooleanToVisibilityConverter}}" />
                <Setter Property="Height" Value="48" />
            </Style>

            <Style x:Key="A_Style_FZTextBlock_CreatorInfoLabel"
                   TargetType="local:FZTextBlock"
                   BasedOn="{StaticResource A_Style_FZTextBlock_HorizonA}">
                <Setter Property="Color" Value="{StaticResource A_Color_Body_Text}" />
                <Setter Property="Opacity" Value="0.1" />
                <Setter Property="CapHeight" Value="16" />
                <Setter Property="VerticalAlignment" Value="Center" />
            </Style>

            <Style x:Key="A_Style_FZTextBlock_FileName"
                   TargetType="local:FZTextBlock"
                   BasedOn="{StaticResource A_Style_FZTextBlock_HorizonB}">
                <Setter Property="HorizontalAlignment" Value="Left" />
                <Setter Property="Color" Value="{StaticResource A_Color_Body_Text}" />
                <Setter Property="CapHeight" Value="30" />
                <Setter Property="Margin" Value="0,35,0,35" />
            </Style>

            <Style x:Key="A_Style_FZTextBlock_CreatorInfoValue"
                   TargetType="local:FZTextBlock"
                   BasedOn="{StaticResource A_Style_FZTextBlock_HorizonB}">
                <Setter Property="HorizontalAlignment" Value="Right" />
                <Setter Property="Color" Value="{StaticResource A_Color_Body_Text}" />
                <Setter Property="CapHeight" Value="16" />
                <Setter Property="Margin" Value="0,8,0,8" />
            </Style>
            <Style
                x:Key="A_Style_FZMaterial_RowSeparator"
                TargetType="{Type FZMaterial}">
                <Setter
                    Property="Color"
                    Value="{StaticResource H_Color_Primary_White}" />
                <Setter
                    Property="Height"
                    Value="1" />
                <Setter
                    Property="Opacity"
                    Value="0.1" />
                <Setter Property="Grid.ColumnSpan" Value="2" />
            </Style>

            <System:Int32 x:Key="A_Int32_Forty">40</System:Int32>
            <local:MultiConverter x:Key="A_Converter_VisibleIfGreaterThanForty">
                <local:MultiConverterEntry Converter="{StaticResource A_CompareConverter}" Parameter="{StaticResource A_Int32_Forty}"/>
                <local:MultiConverterEntry Converter="{StaticResource A_Converter_VisibleIfGreaterThan}"/>
            </local:MultiConverter>
        </ResourceDictionary>
    </Page.Resources>

    <local:UIPageTransitionManager.TransitionManager>
        <local:UIPageTransitionManager Preset="{StaticResource A_UIPageTransitionManagerPreset_Menu}"/>
    </local:UIPageTransitionManager.TransitionManager>

    <Grid x:Name="PART_LayoutRoot">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="LiveryVinylInfoStateGroup">
                <VisualState x:Name="PART_InfoAvailableState">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="InfoPanel">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="MaxWidth" Storyboard.TargetName="ParentStackPanel">
                            <DiscreteDoubleKeyFrame KeyTime="0" Value="1602"/>
                        </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="PART_InfoUnavailableState"/>
            </VisualStateGroup>
            <VisualStateGroup x:Name="LiveryVisualStateGroup">
                <VisualState x:Name="PART_VinylSelectVisualState"/>
                <VisualState x:Name="PART_DecalSelectVisualState">
                    <Storyboard>
                        <ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="MainContainer">
                            <EasingThicknessKeyFrame KeyTime="0" Value="8,20,8,0"/>
                        </ThicknessAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        
        <!-- Background Blur -->
       <Control Style="{StaticResource A_Style_Control_ScreenBackground}" />

        <!-- Bars -->
        <ContentControl x:Name="BottomBar" Style="{StaticResource A_Style_ButtonBar}">
            <ContentControl Name="PART_DefaultHelpPanel" Focusable="False" 
                        Style="{StaticResource A_Style_ContentControl_DefaultButtonBar}" />
        </ContentControl>

        <Border Style="{StaticResource A_Style_Border_ScenePadding}" >
            <Grid x:Name="MainContainer"  Margin="10,0,8,-21"> 

                <StackPanel x:Name="ParentStackPanel"
                            Orientation="Vertical"
                            MaxWidth="1638"
                            VerticalAlignment="Bottom">
                    <StackPanel Orientation="Horizontal" Style="{StaticResource A_Style_FrameworkElement_DefaultTransition_0}" >
                        <ContentControl Content="{Binding CurrentScreenTitle}"
                                Style="{StaticResource A_Style_ContentControl_ScreenTitleBlock}" 
                                local:BindingProxy.A="/ForzaUI;component/Textures/Anthem/Icons/Titles/Layers.png"
                                Focusable="False" Tag="{Binding CurrentScreenLocation}" />
                    </StackPanel>

                    <Decorator Style="{StaticResource A_Style_FrameworkElement_CategoryContainer}" 
                               Visibility="{Binding Visibility, ElementName=PART_CategoryList}">
                        <Decorator x:Name="Decorator_CategoryRibbon"
                              Margin="0,0,0,16"
                              VerticalAlignment="Top"
                              HorizontalAlignment="Left"
                              Style="{StaticResource A_Style_FrameworkElement_DefaultTransition_1}">
                            <FZTabButtonsSelector
                                x:Name="PART_CategoryList"
                                Style="{StaticResource H_Style_TabBar}"
                                ItemsSource="{Binding MenuItems}"
                                Width="1600" />
                        </Decorator>
                    </Decorator>
                    
                    <DockPanel Style="{StaticResource A_Style_FrameworkElement_DefaultTransition_1}">
                        <ContentControl x:Name="InfoPanel"
                                   Visibility="Collapsed"
                                        Template="{StaticResource A_ControlTemplate_UserContent_SidePanel}" 
                                        Style="{StaticResource A_Style_ControlTemplate_UserContent_SidePanel_FourRowsCarousel}"
                                        DataContext="{Binding SelectedItem, ElementName=PART_ItemList}"
                                        VerticalAlignment="Top"
                                        Margin="0,0,9,0">
                            <StackPanel x:Name="PopularityInfo_Panel"
                                    Orientation="Vertical"
                                   VerticalAlignment="Top"
                                    Margin="12,0">
                                <Decorator Height="44">
                                    <local:FZTextBlock Text="{Binding Filename}"
                                                                VerticalAlignment="Center"
                                                       Style="{StaticResource A_Style_FZTextBlock_InfoLabel}" />
                                </Decorator>
                                <FZMaterial Style="{StaticResource H_Style_StatDivider_InfoPanel}" />
                                <HeaderedContentControl Style="{StaticResource H_Style_UserContent_SidePanelItemFollower}"
                                                    Header="{Loc Storefront.IDS_LabelCreatorNotFollowed }"
                                                    Content="/ForzaUI;component/Textures/Data_Bound/CreativeHub/FollowedHeart.png"/>
                                <FZMaterial Style="{StaticResource H_Style_StatDivider_InfoPanel}" />
                                <HeaderedContentControl Style="{StaticResource H_Style_UserContent_SidePanelItemMultilineWithHeader}"
                                                    Header="{Loc Storefront.IDS_LabelDate}"
                                                    Content="{Binding DateCreated, FallbackValue=-}"/>
                                <FZMaterial Style="{StaticResource H_Style_StatDivider_InfoPanel}" />
                            </StackPanel>
                        </ContentControl>


                        <Grid x:Name="ItemContainer"
                              Style="{StaticResource A_Style_FrameworkElement_DefaultTransition_1}"
                              DockPanel.Dock="Left"
                              VerticalAlignment="Top"
                              Height="780">
                            <local:WrapListBox x:Name="PART_ItemList"
                                               Template="{StaticResource H_ControlTemplate_Carousel_Default }"
                                               Tag="{Binding SelectedItem.LiveryCategoryType, ElementName=PART_CategoryList}"
                                               HorizontalAlignment="Left"
                                               PageSize="0"
                                               Height="696"
                                               VerticalAlignment="Top"
                                               ItemWidth="{StaticResource A_Double_VinylItemWidth}"
                                               ItemHeight="{StaticResource A_Double_VinylItemHeight}"
                                               ItemsSource="{Binding VinylItems}"
                                               AllowMouseWheelScrolling="False"
                                               OverrideAcrossNavigation="True"
                                               ItemTemplate="{StaticResource A_DataTemplate_LiveryVinylItem}"
                                               ItemContainerStyle="{StaticResource A_Style_ContentControl_Carousel_ContainerStyle}"
                                               Panel.ZIndex="1" >
                            </local:WrapListBox>

                            <ScrollBar Style="{StaticResource A_Style_ScrollBar_Default}"
                                       Visibility="{Binding Items.Count, ElementName=PART_ItemList, Converter={StaticResource A_Converter_VisibleIfGreaterThanForty}, FallbackValue=Collapsed}"
                                       Orientation="Horizontal"
                                       VerticalAlignment="Top"
                                       Margin="0,660,0,0"
                                       Minimum="{Binding ScrollWindowMin, ElementName=PART_ItemList}"
                                       Maximum="{Binding ScrollWindowMax, ElementName=PART_ItemList}"
                                       Value="{Binding ScrollWindowValue, ElementName=PART_ItemList, Mode=TwoWay}"
                                       ViewportSize="{Binding ScrollWindowSize, ElementName=PART_ItemList}" />
                        </Grid>
                    </DockPanel>
                </StackPanel>
            </Grid>
        </Border>
    </Grid>
</Page>