<Page x:Class="DashboardWPF.Products"
      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:c1="http://schemas.componentone.com/winfx/2006/xaml"
      xmlns:res="clr-namespace:DashboardWPF.Strings"
      xmlns:local="clr-namespace:DashboardWPF"
      xmlns:model="clr-namespace:DashboardModel"
      mc:Ignorable="d" ShowsNavigationUI="False"
      d:DesignHeight="300" d:DesignWidth="300"
      Title="Products">
    <Page.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="/DashboardWPF;component/Style/Style.xaml" />
                <ResourceDictionary>
                    <DataTemplate x:Key="ProductTemplate">
                        <Grid Width="300" Height="150" Background="White">
                            <Grid.RowDefinitions>
                                <RowDefinition/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>
                            <Image Width="260" Height="130"  Stretch="Uniform" Source="{Binding ImageSource}"/>
                            <TextBlock Text="{Binding Label}" FontSize="12" FontFamily="Segoe UI" TextAlignment="Center" Grid.Row="1"/>
                        </Grid>
                    </DataTemplate>
                    <Style x:Key="ProductsViewStyle" TargetType="ListBox">
                        <Setter Property="ItemTemplate" Value="{DynamicResource ProductTemplate}"/>
                        <Setter Property="ItemsPanel">
                            <Setter.Value>
                                <ItemsPanelTemplate>
                                    <WrapPanel Orientation="Horizontal"/>
                                </ItemsPanelTemplate>
                            </Setter.Value>
                        </Setter>
                        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
                    </Style>
                </ResourceDictionary>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Page.Resources>
    <Page.DataContext>
        <model:ProductsPageViewModel />
    </Page.DataContext>
    <Grid Style="{DynamicResource RootGrid}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <TextBlock Margin="5" Style="{DynamicResource Tilte}" Text="{x:Static res:Resource.ProductsPage_Title}"/>
        <TabControl Grid.Row="1" >
            <TabItem Header="{x:Static res:Resource.All_Header}">
                <ListBox x:Name="All" Margin="20" Style="{DynamicResource ProductsViewStyle}" ItemsSource="{Binding ProductAllItemSource}"/>
            </TabItem>
            <TabItem Header="{x:Static res:Resource.Sports_Header}">
                <ListBox x:Name="Sports" Margin="20" Style="{DynamicResource ProductsViewStyle}" ItemsSource="{Binding ProductSportsItemSource}"/>
            </TabItem>
            <TabItem Header="{x:Static res:Resource.City_Header}">
                <ListBox x:Name="City" Margin="20" Style="{DynamicResource ProductsViewStyle}" ItemsSource="{Binding ProductCityItemSource}"/>
            </TabItem>
            <TabItem Header="{x:Static res:Resource.MultiUtility_Header}">
                <ListBox x:Name="MultiUtility" Margin="20" Style="{DynamicResource ProductsViewStyle}" ItemsSource="{Binding ProductMultiUtilityItemSource}"/>
            </TabItem>
            <TabItem Header="{x:Static res:Resource.NewEntry_Header}">
                <ListBox x:Name="NewEntry" Margin="20" Style="{DynamicResource ProductsViewStyle}" ItemsSource="{Binding ProductNewEntryItemSource}"/>
            </TabItem>
        </TabControl>
    </Grid>
</Page>
