<Page
    x:Class="PCUT.Pages.UserListPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    xmlns:viewmodels="using:PCUT.ViewModels"
    mc:Ignorable="d">
    <Page.DataContext>
        <viewmodels:UserViewModel/>
    </Page.DataContext>
    <Page.Background>
        <SolidColorBrush Color="White" />
    </Page.Background>

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

    <!-- Reset Password Popup-->
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="0.2*"/>
            <RowDefinition Height="0.7*"/>
            <RowDefinition Height="0.1*"/>
        </Grid.RowDefinitions>

        <Grid Grid.Row="2">
            <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="{Binding Pagination.Page, Mode=OneWay}" />
                    <Run Text="/" />
                    <Run Text="{Binding 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.3*"/>
                <ColumnDefinition Width="0.7*"/>
            </Grid.ColumnDefinitions>
            <Grid Grid.Column="1">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                
                <Button
                    x:Name="Add" Grid.Row="0"
                    HorizontalAlignment="Right"
                    VerticalAlignment="Bottom"
                    Margin="10"
                    Height="35"
                    Width="121"
                    Content="Add"
                    CornerRadius="20"
                    Click="AddButton_Click"
                    Background="{ThemeResource SystemAccentColor}"/>

                <TextBox
                    Grid.Row="1" x:Name="Search"
                    HorizontalAlignment="Right"
                    VerticalAlignment="Top"
                    Height="35"
                    Width="263"
                    CornerRadius="20"
                    PlaceholderText="Search"
                    Text="{Binding Pagination.SearchText, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
            </Grid>
        </Grid>
        <Grid Grid.Row="1">
            <Grid>
                <ListView x:Name="MembersListView" ItemsSource="{Binding FilteredUsers.Items}" SelectionMode="Single">
                    <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.2*"/>
                                <ColumnDefinition Width="0.10*"/>
                                <ColumnDefinition Width="0.35*"/>
                                <ColumnDefinition Width="0.15*"/>
                            </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" HorizontalAlignment="Center"/>
                            </Border>
                            <Border Grid.Column="1" BorderBrush="Black" BorderThickness="1,1,0,1" Background="Gray">
                                <TextBlock Grid.Column="1" Text="User Name" 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="Account 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="Role" 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="Description" 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.2*"/>
                                    <ColumnDefinition Width="0.10*"/>
                                    <ColumnDefinition Width="0.35*"/>
                                    <ColumnDefinition Width="0.15*"/>
                                </Grid.ColumnDefinitions>
                                <Border Grid.Column="0" BorderBrush="Black" BorderThickness="1,0,0,1">
                                    <TextBlock Text="{Binding DisplayId, Mode=TwoWay}" Margin="10" Foreground="Black" TextWrapping="Wrap" FontFamily="/Fonts/#Rubik Medium" FontSize="20" HorizontalAlignment="Center"/>
                                </Border>
                                <Border Grid.Column="1" BorderBrush="Black" BorderThickness="1,0,0,1">
                                    <TextBlock Text="{Binding UserName, Mode=TwoWay}" Margin="10" Foreground="Black" TextWrapping="Wrap" FontFamily="/Fonts/#Rubik Medium" FontSize="20"/>
                                </Border>
                                <Border Grid.Column="2" BorderBrush="Black" BorderThickness="1,0,0,1">
                                    <TextBlock Text="{Binding AccountName,Mode=TwoWay}" Margin="10" Foreground="Black" TextWrapping="Wrap" FontFamily="/Fonts/#Rubik Medium" FontSize="20"/>
                                </Border>
                                <Border Grid.Column="3" BorderBrush="Black" BorderThickness="1,0,0,1">
                                    <TextBlock Text="{Binding Role, Mode=TwoWay}" Margin="10" Foreground="Black" TextWrapping="Wrap" FontFamily="/Fonts/#Rubik Medium" FontSize="20"/>
                                </Border>
                                <Border Grid.Column="4" BorderBrush="Black" BorderThickness="1,0,0,1">
                                    <TextBlock Text="{Binding Description,Mode=TwoWay}" Margin="10" Foreground="Black" TextWrapping="Wrap" FontFamily="/Fonts/#Rubik Medium" FontSize="20"/>
                                </Border>
                                <Border Grid.Column="5" BorderBrush="Black" BorderThickness="1,0,1,1">
                                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
                                        <Button Margin="5" Click="EditButton_Click" CommandParameter="{Binding Id}">
                                            <FontIcon Glyph="&#xE70F;"/>
                                            <ToolTipService.ToolTip>Edit</ToolTipService.ToolTip>
                                        </Button>
                                        <Button Margin="5" Click="DeleteButton_Click" CommandParameter="{Binding Id}">
                                            <FontIcon Glyph="&#xE74D;"/>
                                            <ToolTipService.ToolTip>Delete</ToolTipService.ToolTip>
                                        </Button>
                                        <Button Margin="5" Click="PasswordButton_Click" CommandParameter="{Binding Id}">
                                            <FontIcon Glyph="&#xE8D7;"/>
                                            <ToolTipService.ToolTip>Change Password</ToolTipService.ToolTip>
                                        </Button>
                                        <Button Margin="5" Click="UnlockDevice_Click" CommandParameter="{Binding Id}">
                                            <FontIcon Glyph="&#xE785;"/>
                                            <ToolTipService.ToolTip>Unlock Device</ToolTipService.ToolTip>
                                        </Button>
                                    </StackPanel>
                                </Border>
                            </Grid>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
            </Grid>
        </Grid>
    </Grid>
</Page>
