<Page
    x:Class="DigitalTicket.Views.OwnedTicketsPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:DigitalTicket.Views"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
    xmlns:viewModels="using:DigitalTicket.ViewModels"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>
        <TextBlock x:Name="NoTicketsLabel" x:Uid="NoTicketsLabel" Margin="0,20" HorizontalAlignment="Center"/>
        <ScrollViewer HorizontalAlignment="Stretch">
            <muxc:ItemsRepeater ItemsSource="{x:Bind ownedTicketsVM.Tickets}">
                <muxc:ItemsRepeater.ItemTemplate>
                    <DataTemplate x:DataType="viewModels:OwnedTicket">
                        <Grid Width="300" HorizontalAlignment="Center" Background="{ThemeResource SystemControlDisabledChromeMediumLowBrush}" 
                            Margin="10" Padding="10">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>

                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>

                            <!-- First row -->
                            <TextBlock FontSize="16" FontWeight="Bold" Text="{x:Bind TicketName}" Grid.ColumnSpan="2"/>

                            <!-- Second row -->
                            <FontIcon Grid.Row="1" Glyph="&#xE768;" AutomationProperties.AccessibilityView="Raw"/>
                            <TextBlock Grid.Row="1" Grid.Column="1" Text="{x:Bind StartStation}" Margin="4"/>

                            <!-- Third row -->
                            <FontIcon Grid.Row="2" Glyph="&#xE81B;" AutomationProperties.AccessibilityView="Raw"/>
                            <TextBlock Grid.Row="2" Grid.Column="1" Text="{x:Bind EndStation}" Margin="4"/>

                            <!-- Fourth row -->
                            <Button x:Uid="ShowQRCodeButton" Command="{x:Bind ShowQRCodeCommand}" 
                                Grid.Row="3" Grid.ColumnSpan="2"
                                Margin="0,5,0,0" HorizontalAlignment="Stretch"/>
                        </Grid>
                    </DataTemplate>
                </muxc:ItemsRepeater.ItemTemplate>
            </muxc:ItemsRepeater>
        </ScrollViewer>

        <Grid Visibility="{x:Bind ownedTicketsVM.QRCodeVisibility, Mode=OneWay}" Padding="20"
            Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>

            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>

            <!-- First row -->
            <TextBlock FontSize="16" FontWeight="Bold" Text="{x:Bind ownedTicketsVM.CurrentTicket.TicketName, Mode=OneWay}" Grid.ColumnSpan="2"/>

            <!-- Second row -->
            <FontIcon Grid.Row="1" Glyph="&#xE768;" AutomationProperties.AccessibilityView="Raw"/>
            <TextBlock Grid.Row="1" Grid.Column="1" Text="{x:Bind ownedTicketsVM.CurrentTicket.StartStation, Mode=OneWay}" Margin="4"/>

            <!-- Third row -->
            <FontIcon Grid.Row="2" Glyph="&#xE81B;" AutomationProperties.AccessibilityView="Raw"/>
            <TextBlock Grid.Row="2" Grid.Column="1" Text="{x:Bind ownedTicketsVM.CurrentTicket.EndStation, Mode=OneWay}" Margin="4"/>

            <!-- Fourth row-->
            <Image x:Name="QRCodeDisplay" x:Uid="QRCodeDisplay"
                Source="{x:Bind ownedTicketsVM.CurrentQRCode, Mode=OneWay}"
                Grid.Row="4" MaxWidth="300" MaxHeight="300" Grid.ColumnSpan="2"/>

            <!-- Sixth row-->
            <Button x:Uid="CloseQRCodeButton" Command="{x:Bind ownedTicketsVM.HideQRCodeCommand}" Grid.Row="5" HorizontalAlignment="Center" Grid.ColumnSpan="2"/>
        </Grid>
    </Grid>
</Page>
