<Page xmlns:local="clr-namespace:ForzaUI;assembly="
      xmlns:System="clr-namespace:System;assembly=mscorlib"
      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"
      x:Class="ForzaUI.A_SkillSelect"
      mc:Ignorable="d"
      Style="{StaticResource A_Style_Page_Generic}"
      DataContext="{Binding RelativeSource={RelativeSource Self}}"
      >

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

    <Page.Resources>
        <ResourceDictionary>
            <DataTemplate x:Key="A_DataTemplate_ListBoxItem_Skill">
                <Decorator VerticalAlignment="Center" HorizontalAlignment="Left" Height="48">
                    <local:FZTextBlock Text="{Binding Name}"
                                    Style="{StaticResource A_Style_FZTextBlock_TitleInListboxItem}"
                                    Margin="16,0,0,0"/>
                </Decorator>
            </DataTemplate>

            <Style TargetType="ContentControl"
                   x:Key="A_Style_ContentControl_SkillCategory_TabBarItem">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ContentControl">
                            <Grid>
                                <local:RoutedEventCommand x:Name="MouseSelectCategoryRoutedEventCommand"
                                                  RoutedEvent="UIElement.MouseLeftButtonUp"
                                                  Command="{Binding MouseSelectCategoryCommand, RelativeSource={RelativeSource AncestorType=Page}}" />
                                <local:FZButton Content="{Binding Name, Converter={StaticResource A_StringToUpper}}"
                                        Style="{StaticResource A_Style_ContentControl_TabTitle_Default}" 
                                        local:RoutedEventCommand.Action="{Binding ElementName=MouseSelectCategoryRoutedEventCommand}"
                                        OnClickSoundName="/Master/UI/PauseMenu/HZ2_SFX_UI_PauseMenu_ChangeTab_01" />
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

            <Style TargetType="{x:Type local:ItemsSelector}"
                   x:Key="A_Style_Carousel3ItemList_TabBar">
                <Setter Property="FocusVisualStyle"
                        Value="{StaticResource A_Style_BlankVisualStyle}" />
                <Setter Property="IsTabStop"
                        Value="True" />
                <Setter Property="ClipToBounds"
                        Value="True" />
                <Setter Property="Width"
                        Value="850" />
                <Setter Property="Margin"
                        Value="0,0,0,12" />
                <Setter Property="Height"
                        Value="50" />
                <Setter Property="ItemContainerStyle"
                        Value="{StaticResource A_Style_ContentControl_SkillCategory_TabBarItem}" />
                <Setter Property="AlternationCount"
                        Value="10000" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate>
                            <Grid>
                                <local:VirtualizingScrollPanel Style="{StaticResource A_Style_VirtualizingScrollPanel_MotionBlurScrollPanel_TabTitle}"
                                                               IsItemsHost="True"
                                                               ItemHeight="39"
                                                               ItemWidth="172"
                                                               Margin="79,0,0,0"
                                                               Padding="174,0,0,0"
                                                               HorizontalAlignment="Center"
                                                               VerticalAlignment="Center"/>

                                <local:FZButton HorizontalAlignment="Right" VerticalAlignment="Top"
                                    Style="{StaticResource A_Style_Button_TabTitleRB_CarSelect}"
                                    Command="{Binding ScrollPageNextCommand, RelativeSource={RelativeSource TemplatedParent}}"
                                    IsEnabled="{Binding CanSelectNext, RelativeSource={RelativeSource TemplatedParent}}"/>
                                <local:FZButton HorizontalAlignment="Left" VerticalAlignment="Top"
                                    Style="{StaticResource A_Style_Button_TabTitleLB_CarSelect}"
                                    Command="{Binding ScrollPagePrevCommand, RelativeSource={RelativeSource TemplatedParent}}"
                                    IsEnabled="{Binding CanSelectPrev, RelativeSource={RelativeSource TemplatedParent}}"/>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

        </ResourceDictionary>
    </Page.Resources>

    <Grid>
        <Control Template="{StaticResource A_ControlTemplate_Blueprint_Background}"/>

        <!-- 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}"
                            Style="{StaticResource A_Style_ContentControl_DefaultButtonBar}" />
        </ContentControl>

        <Grid x:Name="LayoutRoot">
            <Border Style="{StaticResource A_Style_Border_ScenePadding_Opus}">
                <Grid Style="{StaticResource A_Style_FrameworkElement_ScreenTilt}">
                    <StackPanel Orientation="Vertical"
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center"
                        Margin="-4,-34,0,0">
                        <!-- Title -->
                        <Decorator Style="{StaticResource A_Style_FrameworkElement_DefaultTransition_0}">
                            <ContentControl Content="{local:Loc ScreenTitles.IDS_SkillSelect}"
                                            local:BindingProxy.A="/ForzaUI;component/Textures/Anthem/Icons/Titles/Blueprint.png"
                                            Style="{StaticResource A_Style_ContentControl_ScreenTitleBlock}"
                                            HorizontalAlignment="Left"/>
                        </Decorator>

                        <StackPanel Orientation="Horizontal"
                                    Style="{StaticResource A_Style_FrameworkElement_DefaultTransition_1}"
                                    HorizontalAlignment="Left">
                            <local:ItemsSelector x:Name="PART_SkillCategoryList"
                                                 Style="{StaticResource A_Style_Carousel3ItemList_TabBar}"
                                                 Focusable="False"
                                                 ItemsSource="{Binding SkillCategories}"
                                                 local:AttachedRoutedEventCommand.RoutedEvent="Selector.SelectionChanged"
                                                 local:AttachedRoutedEventCommand.Command="{Binding CategorySelectionChangedCommand}"/>
                        </StackPanel>

                        <DockPanel Style="{StaticResource A_Style_FrameworkElement_DefaultTransition_2}">
                            <DockPanel Width="426" DockPanel.Dock="Right">
                                <ContentControl Style="{StaticResource A_Style_ContentControl_Header}"
                                                Content="{local:Loc Main.IDS_Description}"
                                                DockPanel.Dock="Top"/>
                                <Grid>
                                    <local:FZMaterial Style="{StaticResource A_Style_FZMaterial_GlassPanel_BodyPanel}"/>
                                    <Decorator Margin="30,25">
                                        <local:FZTextBlock Style="{StaticResource A_Style_FZTextBlock_Body}"
                                                            Color="{StaticResource A_Color_White}"
                                                            FontSize="22"
                                                            Text="{Binding SelectedItem.Description, ElementName=PART_SkillList}"
                                                            TextWrapping="Wrap"/>
                                    </Decorator>
                                </Grid>
                            </DockPanel>

                            <Grid Width="834" Margin="0,0,30,0">
                                <local:CommonListBox x:Name="PART_SkillList" Margin="0, -6"
                                                     KeyboardNavigation.DirectionalNavigation="Contained"
                                                     Style="{StaticResource A_Style_ListBox_TextMenu}"
                                                     ItemContainerStyle="{StaticResource A_Style_ListBoxItem_TextMenu_Default}"
                                                     ItemTemplate="{StaticResource A_DataTemplate_ListBoxItem_Skill}"
                                                     ItemsSource="{Binding SelectedItem.Skills, ElementName=PART_SkillCategoryList}"
                                                     Height="612"/>
                            </Grid>
                        </DockPanel>
                    </StackPanel>
                </Grid>
            </Border>
        </Grid>
    </Grid>
</Page>
