<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>

        <Double x:Key="A_Double_Content_SkillWidth">832</Double>
        <Double x:Key="A_Double_Content_SkillHeight">50</Double>

        <DataTemplate x:Key="A_DataTemplate_ListBoxItem_Skill">
            <Grid Margin="0,0,0,0" Height="48">
                <local:FZTextBlock Text="{Binding Name}"
                                Style="{StaticResource A_Style_FZTextBlock_OptionText}"
                                Margin="16,0,0,0"
                                HorizontalAlignment="Left"/>
            </Grid>
        </DataTemplate>

        <Style x:Key="A_Style_FZRun_Markup_Desc_HIGHLIGHT" TargetType="local:FZRun">
            <Setter Property="Color"  Value="{StaticResource H_Color_Primary_Yellow}"/>
        </Style>

        <MappingConverter x:Key="A_MappingConverter_Desc">
            <MappingConverterEntry Key="{NoCase HIGHLIGHT}" Value="{StaticResource A_Style_FZRun_Markup_Desc_HIGHLIGHT}" />
        </MappingConverter>
    </Page.Resources>
  
    <Grid>
        <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="PART_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="PART_LayoutRoot">
            <Border Style="{StaticResource A_Style_Border_ScenePadding_Opus}"
                    Padding="330,0,0,0">
                <Grid Style="{StaticResource A_Style_FrameworkElement_ScreenTilt}">
                    <StackPanel Orientation="Vertical"
                        HorizontalAlignment="Left"
                        VerticalAlignment="Center">
                        <!-- 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>

                        <Decorator
                            Style="{StaticResource A_Style_FrameworkElement_DefaultTransition_1}">
                            <FZTabButtonsSelector
                                x:Name="PART_SkillCategoryList"
                                Style="{StaticResource H_Style_TabBar}"
                                ItemsSource="{Binding SkillCategories}"
                                HorizontalContentAlignment="Center"
                                PageSize="1">
                                <FZTabButtonsSelector.ItemContainerStyle>
                                    <Style
                                        TargetType="FZButton"
                                        BasedOn="{StaticResource H_Style_TabButton}">
                                        <Setter Property="Content" Value="{Binding Name, Converter={StaticResource A_StringToUpper}}" />
                                    </Style>
                                </FZTabButtonsSelector.ItemContainerStyle>
                            </FZTabButtonsSelector>
                        </Decorator>
                        <StackPanel Orientation="Horizontal" Style="{StaticResource A_Style_FrameworkElement_DefaultTransition_2}">
                            <StackPanel Orientation="Vertical">
                                <!-- Song/Artist Title -->
                                <ContentControl Style="{StaticResource A_Style_ContentControl_Header_Custom}"
                                                Width="{StaticResource A_Double_Content_SkillWidth}"
                                                Height="{StaticResource A_Double_Content_SkillHeight}">
                                    <Grid Width="{StaticResource A_Double_Content_SkillWidth}">
                                        <FZTextBlock Style="{StaticResource H_Style_Text_DescriptionTitle}"
                                                     HorizontalAlignment="Left"
                                                     VerticalAlignment="Center"
                                                     Margin="20,0,10,0"
                                                     Text="{local:Loc BucketListBlueprint.IDS_Skill_ListTitle_Skill}"/>
                                    </Grid>
                                </ContentControl>
                                <Decorator Height="4"/>
                                <local:WrapListBox
                                    x:Name="PART_SkillList"
                                    Width="{StaticResource A_Double_Content_SkillWidth}"
                                    Height="594"
                                    Template="{StaticResource H_ControlTemplate_TextMenu_Default}"
                                    ScrollOrientation="Vertical"
                                    AlternationCount="10000"
                                    ItemsSource="{Binding SelectedItem.Skills, ElementName=PART_SkillCategoryList}"
                                    ItemContainerStyle="{StaticResource A_Style_ListBoxItem_TextMenu_Gaps}"
                                    ItemTemplate="{StaticResource A_DataTemplate_ListBoxItem_Skill}"
                                    ItemHeight="{StaticResource A_Double_Content_SkillHeight}"
                                    ItemWidth="{StaticResource A_Double_Content_SkillWidth}"/>
                            </StackPanel>
                            
                            <Decorator Width="8"/>
                            <ScrollBar
                                x:Name="PART_ScrollBar_SkillList"
                                Width="8"
                                Style="{StaticResource A_Style_ScrollBar_Default}"
                                Minimum="{Binding ScrollWindowMin, ElementName=PART_SkillList}"
                                Maximum="{Binding ScrollWindowMax, ElementName=PART_SkillList}"
                                Value="{Binding ScrollWindowValue, ElementName=PART_SkillList, Mode=TwoWay}"
                                ViewportSize="{Binding ScrollWindowSize, ElementName=PART_SkillList}" />

                            <Decorator  Width="8"/>
                            <DockPanel Width="400">
                                <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_TileSelected_Text}"
                                                           FontSize="22"
                                                           TextWrapping="Wrap"
                                                           MarkupConverter="{StaticResource A_MappingConverter_Desc}"
                                                           Text="{Binding SelectedItem.Description, ElementName=PART_SkillList}"/>
                                    </Decorator>
                                </Grid>
                            </DockPanel>
                        </StackPanel>
                    </StackPanel>
                </Grid>
            </Border>
        </Grid>
    </Grid>
</Page>
