<Page
    x:Class="PCUT.Pages.DataCenterPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:PCUT.Pages"
    xmlns:viewmodels="using:PCUT.ViewModels"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Loaded="Page_Loaded">

    <Page.DataContext>
        <viewmodels:FileListViewModel/>
    </Page.DataContext>

    <Page.Transitions>
        <TransitionCollection>
            <EntranceThemeTransition />
        </TransitionCollection>
    </Page.Transitions>

    <Page.Background>
        <SolidColorBrush Color="White" />
    </Page.Background>

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="0.2*"/>
            <ColumnDefinition Width="0.8*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="0.1*"/>
            <RowDefinition Height="0.8*"/>
            <RowDefinition Height="0.1*"/>
        </Grid.RowDefinitions>

        <TextBox
            Grid.Row="0" Grid.Column="0"
            Margin="5,0,5,10"
            x:Name="Search"
            PlaceholderText="Search"
            Text="{Binding Pagination.SearchText, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
            MaxHeight="32" CornerRadius="20"
            HorizontalAlignment="Stretch" VerticalAlignment="Bottom" />

        <Grid Grid.Row="1" Grid.Column="0" BorderBrush="Black" BorderThickness="1">
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <ListView
                Grid.Row="0"
                x:Name="RecentFileList"
                Background="Transparent"
                BorderBrush="Transparent" BorderThickness="0"
                HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
                HorizontalContentAlignment="Left"
                ItemsSource="{x:Bind RecentFiles, Mode=OneWay}"
                IsItemClickEnabled="True"
                DoubleTapped="RecentFiles_DoubleTapped">
                <ListView.Header>
                    <TextBlock Text="Recent Files" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="5 5 5 15" FontSize="20"/>
                </ListView.Header>
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding FileName, Mode=OneWay}"/>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </Grid>

        <Grid Grid.Row="2" Grid.Column="1">
            <StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center">
                <Button x:Name="btnFirst" Content="First" Click="btnFirst_Click"/>
                <Button x:Name="btnPrevious" Content="Previous" Click="btnPrevious_Click"/>
                <TextBlock x:Name="txtPageNumber" VerticalAlignment="Center" Margin="10">
                    <Run Text="{x:Bind ViewModels.Pagination.Page, Mode=OneWay}" />
                    <Run Text="/" />
                    <Run Text="{x:Bind ViewModels.Pagination.TotalPage, Mode=OneWay}" />
                </TextBlock>
                <Button x:Name="btnNext" Content="Next" Click="btnNext_Click"/>
                <Button x:Name="btnLast" Content="Last" Click="btnLast_Click"/>
                <ComboBox
                    VerticalAlignment="Center"
                    ItemsSource="{Binding Pagination.AvailablePageSizes}"
                    SelectedItem="{Binding Pagination.PageSize, Mode=TwoWay}" />
                <TextBlock VerticalAlignment="Center" Text="records/page" />
                <TextBlock  VerticalAlignment="Center">
                    <Run Text=" (total" />
                    <Run Text="{Binding Pagination.TotalRecords, Mode=TwoWay}" />
                    <Run Text="records)" />
                </TextBlock>
            </StackPanel>
        </Grid>
        
        <!--Filter Menu-->
        <Grid Grid.Column="1" Margin="0,0,0,10" Padding="0,0,10,0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition />
                <ColumnDefinition />
                <ColumnDefinition />
                <ColumnDefinition />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <ComboBox Grid.Column="0"
                x:Name="Type"
                ItemsSource="{Binding MetadataModel.Types.Items, Mode=OneWay}"
                DisplayMemberPath="Value"
                SelectedIndex="{Binding MetadataModel.Types.SelectedIndex, Mode=TwoWay}"
                PlaceholderText="Type"
                MaxWidth="180" MinWidth="120"
                VerticalAlignment="Bottom" HorizontalAlignment="Right" />
            <ComboBox Grid.Column="1"
                x:Name="Brand"
                ItemsSource="{Binding MetadataModel.Brands.Items, Mode=OneWay}"
                DisplayMemberPath="Value"
                SelectedIndex="{Binding MetadataModel.Brands.SelectedIndex, Mode=TwoWay}"
                PlaceholderText="Brands"
                MaxWidth="180" MinWidth="120"
                VerticalAlignment="Bottom" HorizontalAlignment="Right" />
            <ComboBox Grid.Column="2"
                x:Name="Series"
                ItemsSource="{Binding MetadataModel.Series.Items, Mode=OneWay}"
                DisplayMemberPath="Value" SelectedIndex="{Binding MetadataModel.Series.SelectedIndex, Mode=TwoWay}"
                PlaceholderText="Series"
                MaxWidth="180" MinWidth="120"
                VerticalAlignment="Bottom" HorizontalAlignment="Right" />
            <ComboBox Grid.Column="3"
                x:Name="Model"
                ItemsSource="{Binding MetadataModel.Models.Items, Mode=OneWay}"
                DisplayMemberPath="Value"
                SelectedIndex="{Binding MetadataModel.Models.SelectedIndex, Mode=TwoWay}"
                PlaceholderText="Models"
                MaxWidth="180" MinWidth="120"
                VerticalAlignment="Bottom" HorizontalAlignment="Right" />
            <ComboBox Grid.Column="4"
                x:Name="Subtypes"
                ItemsSource="{Binding MetadataModel.SubTypes.Items, Mode=OneWay}"
                DisplayMemberPath="Value"
                SelectedIndex="{Binding MetadataModel.SubTypes.SelectedIndex, Mode=TwoWay}"
                PlaceholderText="Sub Types"
                MaxWidth="180" MinWidth="100"
                VerticalAlignment="Bottom" HorizontalAlignment="Right"/>
            <ComboBox Grid.Column="5"
                x:Name="Year"
                ItemsSource="{Binding MetadataModel.Years.Items, Mode=OneWay}"
                DisplayMemberPath="Value"
                SelectedIndex="{Binding MetadataModel.Years.SelectedIndex, Mode=TwoWay}"
                PlaceholderText="Years"
                MaxWidth="180" MinWidth="120"
                VerticalAlignment="Bottom" HorizontalAlignment="Right"/>
        </Grid>

        <Grid Grid.Column="1" Grid.Row="1" BorderBrush="Black" BorderThickness="0,1,1,1">
            <ListView
                x:Name="FileList"
                ItemsSource="{Binding FilteredFiles.Items, Mode=OneWay}"
                SelectedIndex="{Binding FilteredFiles.SelectedIndex, Mode=TwoWay}"
                IsItemClickEnabled="True"
                DoubleTapped="FileList_DoubleTapped">
                <ListView.ItemContainerTransitions>
                    <TransitionCollection>
                        <AddDeleteThemeTransition/>
                        <ContentThemeTransition HorizontalOffset="50"/>
                    </TransitionCollection>
                </ListView.ItemContainerTransitions>
                <ListView.ItemContainerStyle>
                    <Style TargetType="ListViewItem">
                        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="ListViewItem">
                                    <ListViewItemPresenter ContentMargin="0" Padding="0"/>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </ListView.ItemContainerStyle>
                <ListView.HeaderTemplate>
                    <DataTemplate>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="0.05*"/>
                            <ColumnDefinition Width="0.20*"/>
                            <ColumnDefinition Width="0.40*"/>
                            <ColumnDefinition Width="0.1*"/>
                            <ColumnDefinition Width="0.25*"/>
                        </Grid.ColumnDefinitions>
                        <Border Grid.Column="0" BorderBrush="Black" BorderThickness="0,0,1,1" Background="Gray">
                            <TextBlock Grid.Column="0" Text="No." Margin="10" Foreground="Black" FontFamily="/Fonts/#Rubik Medium" FontSize="20"
                                       HorizontalAlignment="Center"/>
                        </Border>
                        <Border Grid.Column="1" BorderBrush="Black" BorderThickness="0,0,1,1" Background="Gray">
                            <TextBlock Grid.Column="1" Text="Image" Margin="10" Foreground="Black" FontFamily="/Fonts/#Rubik Medium" FontSize="20"
                                       HorizontalAlignment="Center"/>
                        </Border>
                        <Border Grid.Column="2" BorderBrush="Black" BorderThickness="0,0,1,1" Background="Gray">
                            <TextBlock Text="Name" Margin="10" Foreground="Black" FontFamily="/Fonts/#Rubik Medium" FontSize="20"
                                       HorizontalAlignment="Center"/>
                        </Border>
                        <Border Grid.Column="3" BorderBrush="Black" BorderThickness="0,0,1,1" Background="Gray">
                            <TextBlock Text="Area" Margin="10" Foreground="Black" FontFamily="/Fonts/#Rubik Medium" FontSize="20"
                                       HorizontalAlignment="Center"/>
                        </Border>
                        <Border Grid.Column="4" BorderBrush="Black" BorderThickness="0,0,0,1" Background="Gray">
                            <TextBlock Text="Remarks Information" Margin="10" Foreground="Black" FontFamily="/Fonts/#Rubik Medium" FontSize="20"
                                       HorizontalAlignment="Center"/>
                        </Border>
                    </Grid>
                    </DataTemplate>
                </ListView.HeaderTemplate>
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="0.05*"/>
                                <ColumnDefinition Width="0.20*"/>
                                <ColumnDefinition Width="0.40*"/>
                                <ColumnDefinition Width="0.1*"/>
                                <ColumnDefinition Width="0.25*"/>
                            </Grid.ColumnDefinitions>

                            <Border Grid.Column="0" BorderBrush="Black" BorderThickness="0,0,1,1">
                                <TextBlock Text="{Binding DisplayId, Mode=OneWay}" Foreground="Black"
                                           VerticalAlignment="Center" HorizontalAlignment="Center"/>
                            </Border>
                            <Border Grid.Column="1" BorderBrush="Black" BorderThickness="0,0,1,1">
                                <Viewbox MinHeight="50" MaxHeight="100" MinWidth="100" MaxWidth="150">
                                    <Image Source="{Binding ThumbnailSource, Mode=OneWay}" Stretch="UniformToFill"/>
                                </Viewbox>
                            </Border>
                            <Border Grid.Column="2" BorderBrush="Black" BorderThickness="0,0,1,1">
                                <TextBlock Text="{Binding Name, Mode=OneWay}" Foreground="Black"
                                           VerticalAlignment="Center"/>
                            </Border>
                            <Border Grid.Column="3" BorderBrush="Black" BorderThickness="0,0,1,1">
                                <TextBlock Text="{Binding Area, Mode=OneWay}" Foreground="Black"
                                           VerticalAlignment="Center" TextWrapping="Wrap"/>
                            </Border>
                            <Border Grid.Column="4" BorderBrush="Black" BorderThickness="0,0,0,1">
                                <TextBlock Text="{Binding Remarks, Mode=OneWay}" Foreground="Black"
                                           VerticalAlignment="Center" TextWrapping="Wrap"/>
                            </Border>
                        </Grid>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </Grid>
        <Grid Grid.Row="2" Grid.Column="1"></Grid>
    </Grid>
</Page>
