<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"
      xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing"
      mc:Ignorable="d"
      Style="{StaticResource A_Style_Page_Generic}"
      x:Class="ForzaUI.Scenes.Anthem.RecommendedDesigns"
      DataContext="{Binding RelativeSource={RelativeSource Self}}">

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

    <Page.Resources>
        <ResourceDictionary>
            <Color x:Key="A_Color_StarEmptyBackground">#66F7F7F7</Color>
            <Color x:Key="A_Color_StarFullBackground">#FFF200</Color>

            <Style x:Key="H_Style_SidePanelItemWithHeader" TargetType="{Type HeaderedContentControl}">
                <Setter Property="Height" Value="44" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{Type HeaderedContentControl}">
                            <UniformGrid Columns="2" Margin="2">
                                <ContentPresenter ContentSource="Header"/>
                                <ContentPresenter ContentSource="Content"/>
                            </UniformGrid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
                <Setter Property="HeaderTemplate">
                    <Setter.Value>
                        <DataTemplate>
                            <FZTextBlock
                                Style="{StaticResource A_Style_FZTextBlock_InfoLabel}"
                                Text="{Binding}" />
                        </DataTemplate>
                    </Setter.Value>
                </Setter>
                <Setter Property="ContentTemplate">
                    <Setter.Value>
                        <DataTemplate>
                            <FZTextBlock
                                HorizontalAlignment="Right"
                                Style="{StaticResource A_Style_FZTextBlock_InfoValue}"
                                Text="{Binding}" />
                        </DataTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
            
            <ControlTemplate x:Key="A_ControlTemplate_LiveryStatIcon">
                <local:FZMaterial x:Name="IconBG"
                                  Color="{StaticResource H_Color_Primary_Black}"
                                  Preset="{StaticResource H_Roundtangle_Outer_1px}"
                                  Width="30"
                                  Height="30"
                                  Margin="4">
                    <local:FZMaterial x:Name="Icon"
                                      Width="23"
                                      Height="23"
                                      ImageSource="{Binding Content, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ContentControl}}}">
                    </local:FZMaterial>
                </local:FZMaterial>
            </ControlTemplate>

            <DataTemplate x:Key="A_DataTemplate_Carousel_RecommendedDesignItem">
                <DataTemplate.Resources>
                    <Style x:Key="H_Style_PrimaryText"
                           TargetType="local:FZTextBlock"
                           BasedOn="{StaticResource A_Style_FZTextBlock_HorizonA}">
                        <Setter Property="CapHeight"
                                Value="22" />
                        <Setter Property="Color"
                                Value="{StaticResource H_Color_Primary_Black}" />
                        <Setter Property="TextAlignment"
                                Value="Center" />
                        <Setter Property="ClipToBounds"
                                Value="False"/>
                        <Setter Property="Stretch"
                                Value="None"/>
                        <Setter Property="Margin"
                                Value="0,4,0,4" />
                        <Setter Property="TextTrimming"
                                Value="CharacterEllipsis" />
                        <Setter Property="AutoScroll"
                                Value="{StaticResource A_AutoScrollSettings_CarSelectTitle}"/>
                        <Setter Property="AutoScroll.AllowScrolling"
                                Value="False"/>
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding Path=(Selector.IsSelected), RelativeSource={RelativeSource FindAncestor, AncestorType=ListBoxItem}}" Value="True">
                                <Setter Property="AutoScroll.AllowScrolling" Value="True"/>
                                <Setter Property="TextTrimming" Value="None" />
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>

                    <Style x:Key="H_Style_SecondaryText"
                           TargetType="local:FZTextBlock"
                           BasedOn="{StaticResource A_Style_FZTextBlock_HorizonB}">
                        <Setter Property="CapHeight"
                                Value="18" />
                        <Setter Property="Color"
                                Value="{StaticResource H_Color_Primary_Black}" />
                        <Setter Property="TextAlignment"
                                Value="Center" />
                        <Setter Property="Opacity"
                                Value="0.5" />
                        <Setter Property="ClipToBounds"
                                Value="False"/>
                        <Setter Property="Stretch"
                                Value="None"/>
                        <Setter Property="Margin"
                                Value="0,4,0,4" />
                        <Setter Property="TextTrimming"
                                Value="CharacterEllipsis" />
                        <Setter Property="AutoScroll"
                                Value="{StaticResource A_AutoScrollSettings_CarSelectTitle}"/>
                        <Setter Property="AutoScroll.AllowScrolling"
                                Value="False"/>
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding Path=(Selector.IsSelected), RelativeSource={RelativeSource FindAncestor, AncestorType=ListBoxItem}}" Value="True">
                                <Setter Property="AutoScroll.AllowScrolling" Value="True"/>
                                <Setter Property="TextTrimming" Value="None" />
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>

                    <Style x:Key="H_Style_DesignContent" TargetType="Grid">
                        <Setter Property="Visibility" Value="Collapsed" />
                        <Style.Triggers>
                            <MultiDataTrigger>
                                <MultiDataTrigger.Conditions>
                                    <Condition Binding="{Binding IsNewItem}" Value="False" />
                                    <Condition Binding="{Binding IsManufacturingColorOption}" Value="False" />
                                </MultiDataTrigger.Conditions>
                                <Setter Property="Visibility" Value="Visible" />
                            </MultiDataTrigger>
                        </Style.Triggers>
                    </Style>
                </DataTemplate.Resources>

                <Grid>
                    <Grid Style="{StaticResource H_Style_DesignContent}">
                        <DockPanel
                            Visibility="{Binding IsReady, Converter={StaticResource A_FZBooleanToVisibilityConverter}, FallbackValue=Visible}"
                            Margin="8,12">
                            <Decorator Margin="0,-4,0,-4" ClipToBounds="True" DockPanel.Dock="Top">
                                <FZTextBlock
                                    Style="{StaticResource H_Style_PrimaryText}"
                                    Text="{Binding DisplayName, Converter={StaticResource A_StringToUpper}, FallbackValue=-}" />
                            </Decorator>
                            <FrameworkElement Height="6" DockPanel.Dock="Top" />

                            <Decorator Margin="0,-4,0,-4" ClipToBounds="True" DockPanel.Dock="Top">
                                <FZTextBlock
                                    Style="{StaticResource H_Style_SecondaryText}"
                                    Text="{Binding UserProfile.FormattedGamertag, FallbackValue=-}" />
                            </Decorator>
                            <Grid>
                                <FZMaterial 
                                        ImageSource="{Binding LargeThumbnail}"
                                        Stretch="Uniform"
                                        Margin="0,6"/>
                                <FZMaterial 
                                        ImageSource="{Binding Thumbnail}"
                                        Visibility="{Binding LargeThumbnail, Converter={StaticResource A_FZBooleanToVisibilityConverter_Inverse}, FallbackValue=Visible}"
                                        Stretch="Uniform"
                                        Margin="0,6"/>
                            </Grid>
                        </DockPanel>
                        <StackPanel x:Name="IconContainer"
                                    HorizontalAlignment="Right"
                                    VerticalAlignment="Bottom"
                                    Orientation="Horizontal"
                                    Margin="4">
                            <ContentControl x:Name="FavoirtedIcon"
                                            Template="{StaticResource A_ControlTemplate_LiveryStatIcon}"
                                            Visibility="{Binding IsFavorite, Converter={StaticResource A_FZBooleanToVisibilityConverter}, FallbackValue=Collapsed}"
                                            Content="/ForzaUI;component/Textures/Data_Bound/CreativeHub/FollowedHeart.png"/>
                            <ContentControl x:Name="CurrentCarIcon"
                                            Template="{StaticResource A_ControlTemplate_LiveryStatIcon}"
                                            Visibility="{Binding IsCurrent, Converter={StaticResource A_FZBooleanToVisibilityConverter}, FallbackValue=Collapsed}"
                                            Content="/ForzaUI;component/Textures/Anthem/A_Current.png"/>
                        </StackPanel>
                        <ProgressBar x:Name="Loading"
                                     IsIndeterminate="True"
                                     Style="{StaticResource A_Style_ProgressBar_WaitSpinnerDark}"
                                     Visibility="{Binding IsReady, Converter={StaticResource A_FZBooleanToVisibilityConverter_Inverse}, FallbackValue=Collapsed}"
                                     HorizontalAlignment="Center"
                                     VerticalAlignment="Center" />
                    </Grid>
                    <Grid
                        Visibility="{Binding IsManufacturingColorOption, Converter={StaticResource A_FZBooleanToVisibilityConverter}, FallbackValue=Collapsed}">
                        <DockPanel Margin="8,12">
                            <FZMaterial
                                Margin="0,0,0, 30"
                                ImageSource="game:\Media\UI\Textures\Data_Bound\Anthem\Paintshop\Manufacturer_Colours.png"
                                Stretch="None"
                                Color="{StaticResource H_Color_Primary_Black}"
                                DockPanel.Dock="Bottom"/>
                            <Decorator Margin="0,-4,0,-4" ClipToBounds="True" DockPanel.Dock="Top">
                                <FZTextBlock
                                Style="{StaticResource H_Style_PrimaryText}"
                                Text="{Loc ScreenTitles.IDS_ManufacturingColorOption}"/>
                            </Decorator>
                        </DockPanel>
                    </Grid>
                    <StackPanel
                        Visibility="{Binding IsNewItem, Converter={FZBooleanToVisibilityConverter}, FallbackValue=Collapsed}"
                        Orientation="Vertical"
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center">
                        <FZMaterial
                            ImageSource="game:\Media\UI\Textures\Data_Bound\ui_symbols\Save_Icon.png"
                            Width="110"
                            Height="144"
                            Margin="0,0,0,51"
                            Color="{StaticResource H_Color_Primary_Black}"/>
                        <Decorator Margin="0,-4,0,-4" ClipToBounds="True">
                            <FZTextBlock
                                Style="{StaticResource H_Style_PrimaryText}"
                                Text="{Loc Livery.IDS_SaveDesign}"/>
                        </Decorator>
                    </StackPanel>
                </Grid>
            </DataTemplate>
        </ResourceDictionary>
    </Page.Resources>

    <Grid x:Name="PART_LayoutRoot">
        <!-- Background Blur -->
       <Control Style="{StaticResource A_Style_Control_ScreenBackground}" />

        <local:PlayerBarControl x:Name="TopBar"
                                Style="{StaticResource A_Style_PlayerBarControl_WithTokens}" />

        <ContentControl x:Name="BottomBar"
                        Style="{StaticResource A_Style_ButtonBar}">
            <local:ControllerButtonPanel x:Name="PART_HelpPanel"
                                         HorizontalAlignment="Left"
                                         VerticalAlignment="Bottom"
                                         Background="{x:Null}">
                <local:ControllerButtonControl Button="A"
                                               Description="{local:Loc HelpButtons.IDS_Download}"
                                               Visibility="{Binding DesignCollectionDataSource.IsDownloading, Converter={StaticResource A_Converter_BoolToVis}}" />
                <local:ControllerButtonControl Button="B"
                                               Description="{local:Loc HelpButtons.IDS_Back}" />
                <local:ControllerButtonControl Button="X"
                                               Description="{local:Loc HelpButtons.IDS_DesignOptions}" />
                <local:ControllerButtonControl Button="Y"
                                               Visibility="{Binding DesignCollectionDataSource.IsDownloading, Converter={StaticResource A_Converter_BoolToVis}}" />
                <local:ControllerButtonControl Button="Back"
                                               Description="{local:Loc HelpButtons.IDS_Search}" />
                <local:ControllerButtonControl Button="R3"
                                               Visibility="{Binding CanShowShareCode, Converter={StaticResource A_Converter_BoolToVis}}"
                                               Description="{local:Loc HelpButtons.IDS_ViewShareCode}" />
            </local:ControllerButtonPanel>
        </ContentControl>

        <Border Style="{StaticResource A_Style_Border_ScenePadding_Opus}">
            <StackPanel Style="{StaticResource A_Style_FrameworkElement_DefaultTransition_0}"
                        VerticalAlignment="Center"
                        HorizontalAlignment="Center"
                        Margin="0,16,0,0">
                <StackPanel Margin="15,0,0,0">
                    <ContentControl 
                        x:Name="ContentControl_SceneTitle"
                        Content="{Binding Title}"
                        local:BindingProxy.A="/ForzaUI;component/Textures/Anthem/Icons/Titles/Painting.png"
                        Style="{StaticResource A_Style_ContentControl_ScreenTitleBlock}"
                        HorizontalAlignment="Left" />

                    <FZTabButtonsSelector
                        x:Name="PART_DesignCategoryList"
                        ItemsSource="{Binding DesignCategories, RelativeSource={RelativeSource AncestorType=Page}}"
                        Style="{StaticResource H_Style_TabBar}"
                        SelectedItem="{Binding SelectedCategory}"
                        HorizontalAlignment="Left"/>

                </StackPanel>
                <Grid Margin="15,0,0,0">
                    <local:WrapListBox Style="{StaticResource H_Style_FullScreenCarousel}"
                                       ItemTemplate="{StaticResource A_DataTemplate_Carousel_RecommendedDesignItem}"
                                       ItemsSource="{Binding DesignCollectionDataSource, RelativeSource={RelativeSource AncestorType=Page}}"
                                       SelectionLimitTop="310"
                                       Margin="-18,0,0,0"
                                       x:Name="PART_ItemList" />
                    <ContentControl Template="{StaticResource A_ControlTemplate_UserContent_SidePanel}" 
                                    Style="{StaticResource A_Style_ControlTemplate_UserContent_SidePanel_ThreeRowsCarousel}"
                                    DataContext="{Binding SelectedItem, ElementName=PART_ItemList}"
                                    VerticalAlignment="Top">
                        <StackPanel x:Name="PopularityInfo_Panel"
                                    Orientation="Vertical"
                                    VerticalAlignment="Top"
                                    Margin="12,0"
                                    DataContext="{Binding SelectedItem, ElementName=PART_ItemList}"
                                    Visibility="{Binding IsManufacturingColorOption, Converter={StaticResource A_FZBooleanToVisibilityConverter_Inverse}, FallbackValue=Visible}">
                            <HeaderedContentControl Header="{Loc Storefront.IDS_Rank}"
                                                    Style="{StaticResource H_Style_UserContent_SidePanelItemWithHeader}"
                                                    Content="{Binding CreatorRank, Converter={NumUnitConverter FractionDigits=0}, FallbackValue=-}"/>
                            <FZMaterial Style="{StaticResource H_Style_StatDivider_InfoPanel}"/>
                            <HeaderedContentControl Style="{StaticResource H_Style_UserContent_SidePanelItemWithHeader}"
                                                    Header="{Loc Storefront.IDS_Downloads}"
                                                    Content="{Binding DownloadCount, Converter={NumUnitConverter FractionDigits=0}, FallbackValue=-}"/>
                            <FZMaterial Style="{StaticResource H_Style_StatDivider_InfoPanel}" />
                            <HeaderedContentControl Style="{StaticResource H_Style_UserContent_SidePanelItemWithHeader}"
                                                    Header="{Loc Storefront.IDS_Likes}"
                                                    Content="{Binding LikeCount, Converter={NumUnitConverter FractionDigits=0}, FallbackValue=-}"/>
                            <FZMaterial Style="{StaticResource H_Style_StatDivider_InfoPanel}" />
                            <StackPanel Visibility="{Binding UserProfile.IsLocalPlayer, Converter={StaticResource A_Converter_BoolToVis_Inverted}}">
                                <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}" />
                            </StackPanel>
                            <Decorator x:Name="InfoPanelLayerCount" Visibility="Collapsed">
                                <StackPanel Orientation="Vertical">
                                    <DockPanel  VerticalAlignment="Center" Margin="2,8,2,8">
                                        <local:FZMaterial DockPanel.Dock="Left" 
                                                                        ImageSource="/ForzaUI;component/Textures/Anthem/Icons/Livery/Vinyl_Layers.png"
                                                                        Color="{StaticResource H_Color_Primary_White}"
                                                                        Height="28"
                                                                        Width="28"
                                                                        Margin="0,0,6,0"/>
                                        <Decorator>
                                            <local:FZTextBlock Text="{Binding CurrentLayerCount, Converter={StaticResource A_NumUnitConverter_NoUnit_0dp}}"
                                                                              Style="{StaticResource A_Style_FZTextBlock_HorizonA}"
                                                                              Color="{StaticResource H_Color_Primary_White}"
                                                                              HorizontalAlignment="Right"
                                                                              CapHeight="18"/>
                                        </Decorator>
                                    </DockPanel>
                                    <FZMaterial Style="{StaticResource H_Style_StatDivider_InfoPanel}" />
                                </StackPanel>
                            </Decorator>
                        </StackPanel>
                    </ContentControl>
                    <local:NavigationArrows Style="{StaticResource A_Style_Control_NavigationArrows}"
                                            Template="{StaticResource A_ControlTemplate_NavigationArrows_FullscreenCarousel}"
                                            Height="205"
                                            Margin="290,0,0,80"
                                            VerticalAlignment="Center"
                                            CanSelectPrev="{Binding CanSelectPrev, ElementName=PART_ItemList}"
                                            CanSelectNext="{Binding CanSelectNext, ElementName=PART_ItemList}"
                                            ScrollPagePrevCommand="{Binding ScrollPagePrevCommand, ElementName=PART_ItemList}"
                                            ScrollPageNextCommand="{Binding ScrollPageNextCommand, ElementName=PART_ItemList}" />
                </Grid>
            </StackPanel>
        </Border>
    </Grid>
</Page>
