prs/prs.mobile.new/PRS.Mobile/Components/DigitalForms/Archive/DigitalFormPickerScreen/DigitalFormsPicker.xaml

<?xml version="1.0" encoding="utf-8" ?>
<mobile:MobilePage xmlns:local="clr-namespace:PRS.Mobile" 
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:mobile="clr-namespace:InABox.Mobile;assembly=InABox.Mobile.Shared"
    x:Class="PRS.Mobile.DigitalFormsPicker" 
    Title="Digital Forms">
    
    <mobile:MobilePage.PageContent>
        <Grid RowSpacing="0" ColumnSpacing="0">
            <Grid.RowDefinitions>
                <RowDefinition Height="40"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>

            <Grid x:Name="buttonsGrid" Grid.Row="0" RowSpacing="0" ColumnSpacing="0">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                
                <mobile:MobileButton Grid.Column="0" x:Name="newButton" Text="New" Clicked="NewButton_Clicked"/>
                <mobile:MobileButton Grid.Column="1" x:Name="myFormsButton" Text="My Forms" Clicked="MyFormsButton_Clicked"/>
            </Grid>
            
            <Grid Grid.Row="1" RowSpacing="0" ColumnSpacing="0">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" x:Name="templatesColumn"/>
                    <ColumnDefinition Width="0" x:Name="formsColumn"/>
                </Grid.ColumnDefinitions>

                <!-- Page for templates / digital form picker -->
                <Grid Grid.Column="0" x:Name="templatesGrid">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="auto"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>

                    <local:FilterOptionsControl Grid.Row="0" x:Name="filterOptionsControl" OnFilterOptionChanged="FilterOptionsControl_OnFilterOptionChanged"/>

                    <ListView Grid.Row="1" x:Name="layoutsList" HasUnevenRows="True" BackgroundColor="Transparent" Margin="0,0,0,0">
                        <ListView.ItemTemplate>
                            <DataTemplate>
                                <ViewCell Tapped="LayoutsList_Tapped">
                                    <Frame Padding="6" BorderColor="#15C7C1" Margin="5, 2, 5, 2" CornerRadius="10" HasShadow="False">
                                        <Grid>
                                            <Grid.RowDefinitions>
                                                <RowDefinition Height="auto"/>
                                                <RowDefinition Height="{Binding AverageTimeRow}"/>
                                            </Grid.RowDefinitions>
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition Width="auto"/>
                                                <ColumnDefinition Width="*"/>
                                            </Grid.ColumnDefinitions>

                                            <Image Grid.Row="0" Grid.RowSpan="{Binding ImageRowSpan}" Grid.Column="0" Margin="5"
                                           Source="forms" HeightRequest="50" WidthRequest="50" VerticalOptions="Center" HorizontalOptions="Center"/>

                                            <Label Grid.Row="0" Grid.Column="1"
                                        Text="{Binding Description}" FontAttributes="Bold" FontSize="Medium" VerticalOptions="Center"
                                           HorizontalOptions="Start" HorizontalTextAlignment="Start" LineBreakMode="WordWrap" Margin="0"/>

                                            <Label Grid.Row="1" Grid.Column="1" TextColor="#873260" LineBreakMode="WordWrap"
                                           Text="{Binding AverageTime}" VerticalOptions="Center" HorizontalOptions="Start"/>
                                        </Grid>
                                    </Frame>
                                </ViewCell>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>
                </Grid>

                <!-- Page for complete and incomplete forms -->
                <Grid Grid.Column="1" x:Name="existingFormsGrid">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="auto"/>
                        <RowDefinition Height="40"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>

                    <Entry Grid.Row="0" VerticalOptions="Center" HorizontalOptions="FillAndExpand" x:Name="searchEnt" Margin="5, 0, 5, 0"
                           Placeholder="Search" TextChanged="SearchEnt_Changed"/>

                    <Grid Grid.Row="1" ColumnSpacing="0" RowSpacing="0">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <Button Grid.Column="0" Text="Incomplete" x:Name="incompleteBtn" BackgroundColor="#15C7C1" 
                                HorizontalOptions="FillAndExpand" VerticalOptions="Center" TextColor="Black" FontAttributes="Bold"
                                Clicked="Incomplete_Tapped"
                                Padding="0" CornerRadius="5" BorderColor="Black" BorderWidth="1" Margin="5"
                                />
                        <Button Grid.Column="1" Text="Complete"  x:Name="completeBtn" TextColor="Black" FontAttributes="Bold"
                                HorizontalOptions="FillAndExpand" VerticalOptions="Center"
                                Clicked="Complete_Tapped"
                                Padding="0" CornerRadius="5" BorderColor="Black" BorderWidth="1" Margin="5"
                                />
                    </Grid>

                    <Grid Grid.Row="2" ColumnSpacing="0" RowSpacing="0">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" x:Name="incompleteFormsColumn"/>
                            <ColumnDefinition Width="0" x:Name="completeFormsColumn"/>
                        </Grid.ColumnDefinitions>

                        <ListView Grid.Column="0"
                        x:Name="incompleteFormsList" HasUnevenRows="True" BackgroundColor="Transparent" Margin="0,0,0,0">
                            <ListView.ItemTemplate>
                                <DataTemplate>
                                    <ViewCell Tapped="IncompleteFormsList_Tapped">
                                        <Frame Padding="3" BorderColor="#15C7C1" Margin="3" CornerRadius="10" HasShadow="False">
                                            <Grid>
                                                <Grid.RowDefinitions>
                                                    <RowDefinition Height="auto"/>
                                                    <RowDefinition Height="auto"/>
                                                </Grid.RowDefinitions>
                                                <Grid.ColumnDefinitions>
                                                    <ColumnDefinition Width="*"/>
                                                    <ColumnDefinition Width="auto"/>
                                                </Grid.ColumnDefinitions>
                                                <Label Grid.Row="0" Grid.Column="0" Text="{Binding Description}" FontAttributes="Bold"/>
                                                <Label Grid.Row="1" Grid.Column="0" Text="{Binding Started}"/>

                                                <Image Grid.Row="0" Grid.Column="1" VerticalOptions="Start" HorizontalOptions="End"
                                                       HeightRequest="20" WidthRequest="20" Source="closee" Margin="5, 5, 7, 5">
                                                    <Image.GestureRecognizers>
                                                        <TapGestureRecognizer Tapped="Delete_Tapped" CommandParameter="{Binding .}"/>
                                                    </Image.GestureRecognizers>
                                                </Image>
                                            </Grid>
                                        </Frame>
                                    </ViewCell>
                                </DataTemplate>
                            </ListView.ItemTemplate>
                        </ListView>

                        <ListView Grid.Column="1" IsVisible="false"
                        x:Name="completeFormsList" HasUnevenRows="True" BackgroundColor="Transparent" Margin="0,0,0,0">
                            <ListView.ItemTemplate>
                                <DataTemplate>
                                    <ViewCell Tapped="CompleteFormsList_Tapped">
                                        <Frame Padding="3" BorderColor="#15C7C1" Margin="3" CornerRadius="10" HasShadow="False">
                                            <Grid>
                                                <Grid.RowDefinitions>
                                                    <RowDefinition Height="auto"/>
                                                    <RowDefinition Height="auto"/>
                                                    <RowDefinition Height="auto"/>
                                                </Grid.RowDefinitions>
                                                <Label Grid.Row="0" Text="{Binding Description}" FontAttributes="Bold"/>
                                                <Label Grid.Row="1" Text="{Binding Started}"/>
                                                <Label Grid.Row="2" Text="{Binding Completed}"/>
                                            </Grid>
                                        </Frame>
                                    </ViewCell>
                                </DataTemplate>
                            </ListView.ItemTemplate>
                        </ListView>
                    </Grid>


                </Grid>
            </Grid>
        </Grid>


    </mobile:MobilePage.PageContent>
</mobile:MobilePage>