<Page
    x:Class="PCUT.Pages.FileManagerPage"
    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.RowDefinitions>
            <RowDefinition Height="0.25*"/>
            <RowDefinition Height="0.7*"/>
            <RowDefinition Height="0.05*"/>
        </Grid.RowDefinitions>



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

        <Grid Grid.Row="0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="0.5*"/>
                <ColumnDefinition Width="0.5*"/>
            </Grid.ColumnDefinitions>

            <Grid Grid.Column="1">
                <Grid.RowDefinitions>
                    <RowDefinition Height="0.3*"/>
                    <RowDefinition Height="0.35*"/>
                    <RowDefinition Height="0.35*"/>
                </Grid.RowDefinitions>

                <Grid Grid.Row="0">
                    <Button Content="Add" Width="120" 
                            Background="{ThemeResource SystemAccentColor}" 
                            CornerRadius="20"
                            Click="AddFile_Click"
                            HorizontalAlignment="Right"
                            Height="35"
                            VerticalAlignment="Bottom"/>
                </Grid>

                <Grid Grid.Row="1">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="188*" />
                        <ColumnDefinition Width="187*" />
                        <ColumnDefinition Width="188*" />
                        <ColumnDefinition Width="162*" />
                        <ColumnDefinition Width="25*"/>
                    </Grid.ColumnDefinitions>
                    <ComboBox Grid.Column="0"
                        x:Name="Categories"
                        ItemsSource="{Binding Categories.Items}"
                        DisplayMemberPath="Name"
                        SelectedIndex="{Binding Categories.SelectedIndex, Mode=TwoWay}"
                        PlaceholderText="Categories"
                        Margin="5,0,5,0"
                        HorizontalAlignment="Stretch" VerticalAlignment="Center"/>
                    <ComboBox Grid.Column="1"
                        x:Name="Type"
                        ItemsSource="{Binding MetadataModel.Types.Items}"
                        DisplayMemberPath="Value"
                        SelectedIndex="{Binding MetadataModel.Types.SelectedIndex, Mode=TwoWay}"
                        PlaceholderText="Type"
                        Margin="5,0,5,0"
                        HorizontalAlignment="Stretch" VerticalAlignment="Center" />
                    <ComboBox Grid.Column="2"
                        x:Name="Brand"
                        ItemsSource="{Binding MetadataModel.Brands.Items}"
                        DisplayMemberPath="Value"
                        SelectedIndex="{Binding MetadataModel.Brands.SelectedIndex, Mode=TwoWay}"
                        PlaceholderText="Brand"
                        Margin="5,0,5,0"
                        HorizontalAlignment="Stretch" VerticalAlignment="Center" />
                    <ComboBox Grid.Column="3"
                        x:Name="Year"
                        ItemsSource="{Binding MetadataModel.Years.Items}"
                        DisplayMemberPath="Value"
                        SelectedIndex="{Binding MetadataModel.Years.SelectedIndex, Mode=TwoWay}"
                        PlaceholderText="Year"
                        Margin="5,0,5,0"
                        HorizontalAlignment="Stretch" VerticalAlignment="Center" Grid.ColumnSpan="2" />
                </Grid>
                <Grid Grid.Row="2" Grid.Column="2">
                    <TextBox
                        x:Name="Search"
                        PlaceholderText="Search"
                        Text="{Binding Pagination.SearchText, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                        MinWidth="300" MaxHeight="32" CornerRadius="20"
                        HorizontalAlignment="Right" VerticalAlignment="Top"/>
                </Grid>
            </Grid>
        </Grid>

        <Grid Grid.Row="1">
            <ListView x:Name="FilesListView" ItemsSource="{Binding FilteredFiles.Items}" IsItemClickEnabled="False">
                <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.Header>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="0.05*"/>
                            <ColumnDefinition Width="0.15*"/>
                            <ColumnDefinition Width="0.35*"/>
                            <ColumnDefinition Width="0.10*"/>
                            <ColumnDefinition Width="0.25*"/>
                            <ColumnDefinition Width="0.1*"/>
                        </Grid.ColumnDefinitions>
                        <Border Grid.Column="0" BorderBrush="Black" BorderThickness="1,1,0,1" Background="Gray">
                            <TextBlock Grid.Column="0" Text="No." Margin="10" Foreground="Black" FontFamily="/Fonts/#Rubik Medium" FontSize="20"/>
                        </Border>
                        <Border Grid.Column="1" BorderBrush="Black" BorderThickness="1,1,0,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="1,1,0,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="1,1,0,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="1,1,0,1" Background="Gray">
                            <TextBlock Text="Remarks Information" Margin="10" Foreground="Black" FontFamily="/Fonts/#Rubik Medium" FontSize="20"
                                   HorizontalAlignment="Center"/>
                        </Border>
                        <Border Grid.Column="5" BorderBrush="Black" BorderThickness="1,1,1,1" Background="Gray">
                            <TextBlock Text="Action" Margin="10" Foreground="Black" FontFamily="/Fonts/#Rubik Medium" FontSize="20"
                                   HorizontalAlignment="Center"/>
                        </Border>

                    </Grid>
                </ListView.Header>
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="0.05*"/>
                                <ColumnDefinition Width="0.15*"/>
                                <ColumnDefinition Width="0.35*"/>
                                <ColumnDefinition Width="0.10*"/>
                                <ColumnDefinition Width="0.25*"/>
                                <ColumnDefinition Width="0.1*"/>
                            </Grid.ColumnDefinitions>
                            <Border Grid.Column="0" BorderBrush="Black" BorderThickness="1,0,0,1">
                                <TextBlock Text="{Binding DisplayId, Mode=OneWay}" Margin="10" Foreground="Black" TextWrapping="Wrap" HorizontalAlignment="Center"/>
                            </Border>
                            <Border Grid.Column="1" BorderBrush="Black" BorderThickness="1,0,0,1">
                                <Viewbox MinHeight="50" MaxHeight="100" MinWidth="100" MaxWidth="150">
                                    <Image Source="{Binding ThumbnailSource, Mode=OneWay}" />
                                </Viewbox>
                            </Border>
                            <Border Grid.Column="2" BorderBrush="Black" BorderThickness="1,0,0,1">
                                <TextBlock Text="{Binding Name, Mode=OneWay}" Foreground="Black" TextWrapping="Wrap"/>
                            </Border>
                            <Border Grid.Column="3" BorderBrush="Black" BorderThickness="1,0,0,1">
                                <TextBlock Text="{Binding Area , Mode=OneWay}"  Foreground="Black" TextWrapping="Wrap"/>
                            </Border>
                            <Border Grid.Column="4" BorderBrush="Black" BorderThickness="1,0,0,1">
                                <TextBlock Text="{Binding Remarks , Mode=OneWay}" Foreground="Black" TextWrapping="Wrap" />
                            </Border>
                            <Border Grid.Column="5" BorderBrush="Black" BorderThickness="1,0,1,1">
                                <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" >
                                    <Button Margin="5" Click="EditFile_Click" CommandParameter="{Binding Id}" HorizontalAlignment="Center">
                                        <FontIcon Glyph="&#xE70F;"/>
                                    </Button>

                                    <Button Margin="5" Click="DeleteFile_Click" CommandParameter="{Binding Id}">
                                        <FontIcon Glyph="&#xE74D;"/>
                                    </Button>
                                </StackPanel>
                            </Border>
                        </Grid>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </Grid>
    </Grid>
</Page>
