<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.CarSelectPhotoCollection"
      DataContext="{Binding RelativeSource={RelativeSource Self}}">

    <Page.Resources>
        <ResourceDictionary>
            <Style x:Key="A_Style_FZTextBlock_HeaderBlock_Small" TargetType="local:FZTextBlock" BasedOn="{StaticResource A_Style_FZTextBlock_HorizonB}" >
                <Setter Property="VerticalAlignment" Value="Center" />
                <Setter Property="HorizontalAlignment" Value="Left" />
                <Setter Property="Margin" Value="30, 10, 30, 10" />
                <Setter Property="TextWrapping" Value="NoWrap" />
                <Setter Property="Stretch" Value="Uniform"/>
                <Setter Property="StretchDirection" Value="DownOnly"/>
                <Setter Property="FontSize" Value="28"/>
                <Setter Property="Color" Value="{StaticResource A_Color_Header_Text}" />
            </Style>

            <Style x:Key="A_Style_FZTextBlock_CarsCollected" TargetType="local:FZTextBlock" BasedOn="{StaticResource A_Style_FZTextBlock_HeaderBlock_Small}" >
                <Setter Property="Color" Value="{StaticResource A_Color_SubHeader_Text}" />
                <Setter Property="VerticalAlignment" Value="Top" />
                <Setter Property="FontSize" Value="70"/>
                <Setter Property="Margin" Value="0,0,0,20" />
            </Style>

            <Style x:Key="A_Style_FZTextBlock_CarsCollected_FirstNum" TargetType="local:FZTextBlock" BasedOn="{StaticResource A_Style_FZTextBlock_CarsCollected}" >
                <Setter Property="Color" Value="{StaticResource A_Color_CarSelectHeading}" />
            </Style>

            <Style x:Key="A_Style_FZTextBlock_CategorySubHeaders" TargetType="local:FZTextBlock" BasedOn="{StaticResource A_Style_FZTextBlock_Heading_ExtraSmall}">
                <Setter Property="Color" Value="{StaticResource A_Color_SubHeader_Text}" />
                <Setter Property="FontSize" Value="26" />
                <Setter Property="TextWrapping" Value="Wrap" />
                <Setter Property="Margin" Value="0,0,0,10" />
            </Style>

            <Style BasedOn="{StaticResource A_Style_TextBlock_CarSelect_Cost}"
           TargetType="local:FZTextBlock"
           x:Key="A_Style_TextBlock_CarSelect_CapturedText">
                <Setter Property="FontSize"
                Value="50" />
                <Setter Property="Margin"
                Value="11" />
            </Style>

        </ResourceDictionary>
    </Page.Resources>

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

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

        <!-- Bars -->
        <local:PlayerBarControl x:Name="TopBar" Style="{StaticResource A_Style_PlayerBarControl}" />
        <ContentControl x:Name="BottomBar" Style="{StaticResource A_Style_ButtonBar}">
            <ContentControl x:Name="DefaultHelpPanel"
                                local:ControllerButtonPanel.ADescription="{local:Loc HelpButtons.IDS_Select}"
                                local:ControllerButtonPanel.BDescription="{local:Loc HelpButtons.IDS_Back}"
                                local:ControllerButtonPanel.XDescription="{local:Loc HelpButtons.IDS_Sort}"
                                local:ControllerButtonPanel.YDescription="{local:Loc HelpButtons.IDS_CarFilter}"
                                local:ControllerButtonPanel.DPadVerticalDescription="{local:Loc HelpButtons.IDS_Toggle}"
                                Style="{StaticResource A_Style_ContentControl_DefaultButtonBar}" />
        </ContentControl>

        <Border x:Name="Frame" Style="{StaticResource A_Style_Border_ScenePadding_Opus}">
            <DockPanel Style="{StaticResource A_Style_FrameworkElement_ScreenTilt}" LastChildFill="False">
                <Grid Style="{StaticResource A_Style_FrameworkElement_DefaultTransition_0}" DockPanel.Dock="Top">
                    <ContentControl x:Name="TitleBlock"
                                    Style="{StaticResource A_Style_ContentControl_ScreenTitleBlock}"
                                    Content="{Binding Title}"
                                    Tag="{Binding SubTitle}" 
                                    local:BindingProxy.A="/ForzaUI;component/Textures/Anthem/Icons/Titles/Photo.png" HorizontalAlignment="Left"/>
                </Grid>
                <Grid DockPanel.Dock="Top" Style="{StaticResource A_Style_FrameworkElement_DefaultTransition_1}">
                    <local:ItemsSelector x:Name="ManufacturerItemsSelector"
                                                    HorizontalAlignment="Center"
                                                    ItemsSource="{Binding Groups}"
                                                    SelectedIndex="{Binding CurrentGroupIndex}"
                                                    Style="{StaticResource A_Style_Carousel6ItemList_TabBar}"/>
                </Grid>

                <Grid KeyboardNavigation.DirectionalNavigation="Contained" Style="{StaticResource A_Style_FrameworkElement_DefaultTransition_2}" DockPanel.Dock="Bottom" Margin="0,10,0,-10">
                    <local:CommonListBox VerticalAlignment="Bottom"
                                         Margin="0,0,0,0"
                                         ItemContainerStyle="{StaticResource A_Style_ContentControl_Carousel_ContainerStyle}"
                                         ItemTemplate="{StaticResource A_DataTemplate_CarSelectCarouselItem}"
                                         Template="{StaticResource A_ControlTemplate_FullScreenCarousel_WrapPanel}"
                                         SelectedItem="{Binding SelectedItem}"
                                         ScrollViewer.CanContentScroll="False"
                                         ItemsSource="{Binding Collection}"
                                         local:CollectionIndexer.Collection="{Binding Collection}"
                                         FocusManager.IsFocusScope="True"
                                         x:Name="List"
                                         Height="220" />
                </Grid>

                <Grid Visibility="Collapsed">
                    <Decorator HorizontalAlignment="Center"
                               DockPanel.Dock="Top"
                               Margin="0,20,0,0">
                          <local:CommonListBox x:Name="CurrentCarLargeIconBox"
                                               PageSize="1"
                                               Focusable="False"
                                               SelectedIndex="0"
                                               ItemContainerStyle="{StaticResource A_Style_ListBoxItem_CurrentLargeIcon}">
                              <Decorator Style="{StaticResource A_Style_FZMaterial_CarSelect_CurrentLargeIconContainer}">
                                  <local:FZMaterial ImageSource="{Binding ManufacturerIcon}"
                                                    Style="{StaticResource A_Style_FZMaterial_CarSelect_CurrentLargeIcon}" />
                              </Decorator>
                              <Decorator Style="{StaticResource A_Style_FZMaterial_CarSelect_CurrentLargeIconContainer}">
                                  <local:FZMaterial ImageSource="{Binding CarBucketIcon}"
                                                    Style="{StaticResource A_Style_FZMaterial_CarSelect_CurrentLargeIcon}" />
                              </Decorator>
                          </local:CommonListBox>
                    </Decorator>
                    <Decorator DockPanel.Dock="Top"
                               Margin="0,16,0,16">
                        <local:CommonListBox x:Name="CurrentSelectionInCarLargeIconBox"
                                             SelectedIndex="{Binding SelectedIndex, ElementName=CurrentCarLargeIconBox}"
                                             HorizontalAlignment="Center"
                                             PageSize="1"
                                             Focusable="False">
                            <local:FZMaterial Style="{StaticResource A_Style_FZMaterial_CarSelect_CurrentLargeIconSelection}" />
                            <local:FZMaterial Style="{StaticResource A_Style_FZMaterial_CarSelect_CurrentLargeIconSelection}" />
                        </local:CommonListBox>
                    </Decorator>
                </Grid>

                <Decorator Style="{StaticResource A_Style_FrameworkElement_DefaultTransition_1}" DockPanel.Dock="Top">
                    <Grid x:Name="CentreContent"
                          Height="{StaticResource A_Double_CarSelect_CentreContentHeight}">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="1355" />
                            <ColumnDefinition Width="{StaticResource A_GridLength_CarSelect_CentreContentGaps}" />
                            <ColumnDefinition />
                        </Grid.ColumnDefinitions>

                        <local:FZMaterial Style="{StaticResource A_Style_FZMaterial_AcrylicPanel_BodyPanel}"/>
                        
                        <!--Centre panel-->
                        <Grid x:Name="CentrePanel"
                              Style="{StaticResource A_Style_Grid_CarSelect_LargeImageBlock}"
                              DataContext="{Binding SelectedItem, ElementName=List}"
                              Grid.Column="0">
                            <Grid HorizontalAlignment="Center"
                                            Width="{StaticResource A_Double_CarSelect_LargeImageWidth}">
                                    <local:FZMaterial ImageSource="{StaticResource A_BitmapImage_Blank}"
                                                            Visibility="Hidden"
                                                            x:Name="SpecialItemLargeImage" />
                                    <local:FZMaterial HorizontalAlignment="Center" Margin="100,0,-100,0"
                                                            ImageSource="{Binding CurrSelectionBigThumbnail, RelativeSource={RelativeSource AncestorType=Page}}"
                                                            Width="{Binding ActualHeight, RelativeSource={RelativeSource Self}, Converter={StaticResource A_Converter_CarThumb_Ratio}}"
                                                            MaxHeight="459"
                                                            x:Name="BigCarThumbnail" />
                            </Grid>
                            <StackPanel Orientation="Vertical">
                                <Grid MinHeight="180">
                                    <Viewbox HorizontalAlignment="Left"
                                            Margin="30,10,0,0"
                                            VerticalAlignment="Top"
                                            x:Name="CarInformation"
                                            MaxWidth="1010" StretchDirection="DownOnly">
                                        <StackPanel Orientation="Vertical">
                                            <StackPanel Orientation="Horizontal">
                                                <local:FZTextBlock Margin="0,0,0,0"
                                                        Style="{StaticResource A_Style_TextBlock_CarSelect_Manufacturer}"
                                                        Text="{Binding MakeName, Converter={StaticResource A_StringToUpper}}" />
                                                <local:FZTextBlock Margin="15,0,0,0"
                                                            Style="{StaticResource A_Style_TextBlock_CarSelect_Car}"
                                                            Text="{Binding DisplayName, Converter={StaticResource A_StringToUpper}}" />
                                            </StackPanel>
                                            <local:FZTextBlock Margin="0,-20,0,0"
                                                                Style="{StaticResource A_Style_TextBlock_CarSelect_Car}"
                                                                Text="{Binding Year}" />
                                        </StackPanel>
                                    </Viewbox>
                                </Grid>
                            </StackPanel>
                            <Grid HorizontalAlignment="Right" VerticalAlignment="Top"
                                            Height="160"
                                            Width="270" Margin="0,30,30,0">
                                <local:FZMaterial ImageSource="{Binding ManufacturerIcon}"
                                                            x:Name="ManufacturerIcon"
                                                            Stretch="Uniform" StretchDirection="DownOnly"
                                                            GreedyMeasure="True"
                                                            VerticalAlignment="Top"
                                                            HorizontalAlignment="Right" />
                                <local:FZMaterial ImageSource="{StaticResource A_BitmapImage_Blank}"
                                                            Visibility="Collapsed"
                                                            x:Name="SpecialItemSideImage" />
                            </Grid>
                            <Grid VerticalAlignment="Bottom"
                                        HorizontalAlignment="Left"
                                        Margin="30">
                                <Grid Height="64" >
                                    <Grid Visibility="{Binding IsPhotoCaptured, Converter={StaticResource A_FZBooleanToVisibilityConverter}}" >
                                        <StackPanel Orientation="Horizontal">
                                            <local:FZMaterial Color="{StaticResource A_Color_CarSelectHeading}"
                                                                            ImageSource="/ForzaUI;component/Textures/Anthem/Icons/CameraIcon.png"
                                                                            Width="64" HorizontalAlignment="Left" />
                                            <Grid>
                                                <local:FZMaterial Color="{StaticResource A_Color_CarSelectHeading}" Margin="0,0,0,0" Height="2" VerticalAlignment="Top" />
                                                <local:FZMaterial Color="{StaticResource A_Color_CarSelectHeading}" Margin="0,0,0,0" Height="2" VerticalAlignment="Bottom" />
                                                <local:FZMaterial Color="{StaticResource A_Color_CarSelectHeading}" Margin="0,2,0,2" Width="2" HorizontalAlignment="Right" />
                                                <local:FZTextBlock Style="{StaticResource A_Style_TextBlock_CarSelect_CapturedText}"
                                                                                Text="{local:Loc PhotoCollection.IDS_Captured}"/>
                                            </Grid>
                                        </StackPanel>
                                    </Grid>
                                    <Grid Visibility="{Binding IsPhotoCaptured, Converter={StaticResource A_FZBooleanToVisibilityConverter_Inverse}}" >
                                        <StackPanel Orientation="Horizontal">
                                            <local:FZMaterial Color="{StaticResource A_Color_SubHeader_Text}"
                                                                            ImageSource="/ForzaUI;component/Textures/Anthem/Icons/CameraIcon.png"
                                                                            Width="64" HorizontalAlignment="Left" />
                                            <Grid>
                                                <local:FZMaterial Color="{StaticResource A_Color_SubHeader_Text}" Margin="0,0,0,0" Height="2" VerticalAlignment="Top" />
                                                <local:FZMaterial Color="{StaticResource A_Color_SubHeader_Text}" Margin="0,0,0,0" Height="2" VerticalAlignment="Bottom" />
                                                <local:FZMaterial Color="{StaticResource A_Color_SubHeader_Text}" Margin="0,2,0,2" Width="2" HorizontalAlignment="Right" />
                                                <local:FZTextBlock Style="{StaticResource A_Style_TextBlock_CarSelect_CapturedText}"
                                                                                Text="{local:Loc PhotoCollection.IDS_NotCaptured}" />
                                            </Grid>
                                        </StackPanel>
                                    </Grid>
                                </Grid>
                            </Grid>
                        </Grid>

                        <Grid x:Name="RightPanel"
                              Style="{StaticResource A_Style_Grid_CarSelect_DescriptionBlock}"
                              Grid.Column="2">
                            <DockPanel>
                                <ContentControl Style="{StaticResource A_Style_ContentControl_Header}"
                                                   Content="{local:Loc PhotoCollection.IDS_NextCaptureBonus_Title}"
                                                   DockPanel.Dock="Top"/>
                                <local:FZMaterial Style="{StaticResource A_Style_FZMaterial_GlassPanel_BodyPanel}" Height="250" DockPanel.Dock="Top">
                                    <StackPanel Orientation="Vertical" Margin="30">
                                        <local:FZTextBlock Style="{StaticResource A_Style_FZTextBlock_CategorySubHeaders}" Text="{local:Loc PhotoCollection.IDS_NextCaptureBonus_Progress}" />
                                        <StackPanel Orientation="Horizontal">
                                            <local:FZTextBlock Style="{StaticResource A_Style_FZTextBlock_CarsCollected_FirstNum}"
                                                        Text="{Binding ProgressCurrentNum}" />
                                            <local:FZTextBlock Style="{StaticResource A_Style_FZTextBlock_CarsCollected}"
                                                        Text="{Binding ProgressOutOf}" />
                                        </StackPanel>
                                        <local:FZTextBlock Style="{StaticResource A_Style_FZTextBlock_CategorySubHeaders}" Text="{local:Loc PhotoCollection.IDS_NextCaptureBonus_Reward}" />
                                        <StackPanel Orientation="Horizontal">
                                            <Grid Width="270" Height="64" >
                                                <local:FZMaterial Color="{StaticResource A_Color_CarSelectHeading}"
                                                                            ImageSource="/ForzaUI;component/Textures/Anthem/Icons/CRIcon/CR_64.png"
                                                                            Width="64" HorizontalAlignment="Left" />
                                                <local:FZMaterial Color="{StaticResource A_Color_CarSelectHeading}" Margin="0,0,0,0" Height="2" VerticalAlignment="Top" />
                                                <local:FZMaterial Color="{StaticResource A_Color_CarSelectHeading}" Margin="0,0,0,0" Height="2" VerticalAlignment="Bottom" />
                                                <local:FZMaterial Color="{StaticResource A_Color_CarSelectHeading}" Margin="0,2,0,2" Width="2" HorizontalAlignment="Right" />
                                                <local:FZTextBlock Style="{StaticResource A_Style_TextBlock_CarSelect_CapturedText}"
                                                                                Text="{Binding NextRankCreditReward}" Margin="16"/>
                                            </Grid>
                                        </StackPanel>
                                    </StackPanel>
                                </local:FZMaterial>
                                <local:FZMaterial Style="{StaticResource A_Style_FZMaterial_AcrylicPanel_BodyPanel}" Margin="0,10,0,0">
                                    <StackPanel Orientation="Vertical" Margin="30,40">
                                        <local:FZTextBlock Style="{StaticResource A_Style_FZTextBlock_CategorySubHeaders}"
                                               Text="{Binding ManufacturerCarsCapturedTitle}" />
                                        <StackPanel Orientation="Horizontal">
                                            <local:FZTextBlock Style="{StaticResource A_Style_FZTextBlock_CarsCollected_FirstNum}"
                                               Text="{Binding NumManufacturerCars}" />
                                            <local:FZTextBlock Style="{StaticResource A_Style_FZTextBlock_CarsCollected}"
                                               Text="{Binding NumTotalManufacturerCars}" />
                                        </StackPanel>
                                    </StackPanel>
                                </local:FZMaterial>
                            </DockPanel>
                            
                        </Grid>
                    </Grid>

                </Decorator>
            </DockPanel>
        </Border>
    </Grid>
</Page>
