<Page x:Class="VideoOS.Mobile.SDK.Samples.UWP.MainPage"
      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:local="using:VideoOS.Mobile.SDK.Samples.UWP"
      mc:Ignorable="d">
    <Page.Resources>
        <ResourceDictionary>
            <local:BooleanToVisibilityConverter x:Name="BooleanToVisibilityConverter" />
        </ResourceDictionary>
    </Page.Resources>
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="50"/>
            <RowDefinition Height="50"/>
            <RowDefinition Height="10" />
            <RowDefinition Height="50" />
            <RowDefinition MinHeight="350" MaxHeight="800"/>
            <RowDefinition Height="60"/>
            <RowDefinition MinHeight="20" MaxHeight="40"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition MinWidth="300" />
            <ColumnDefinition MinWidth="300" />
            <ColumnDefinition MinWidth="150" />
        </Grid.ColumnDefinitions>

        <StackPanel Orientation="Horizontal"
                    Grid.Row="0"
                    Grid.Column="0"
                    VerticalAlignment="Center"
                    HorizontalAlignment="Center"
                    Padding="5,0,5,0">
            <TextBlock TextWrapping="Wrap"
                       Text="Server address:"
                       TextAlignment="Right"
                       Margin="0,0,10,0"
                       VerticalAlignment="Center"
                       Height="25"
                       Width="110" />
            <TextBox Text="{Binding ServerAddress, Mode=TwoWay}"
                     TextWrapping="Wrap"
                     VerticalAlignment="Center"
                     Height="30"
                     Width="180" />
        </StackPanel>

        <StackPanel Orientation="Horizontal"
                    Grid.Row="0"
                    Grid.Column="1"
                    VerticalAlignment="Center"
                    HorizontalAlignment="Center"
                    Padding="5,0,5,0">
            <TextBlock TextWrapping="Wrap"
                       Text="Username:"
                       TextAlignment="Right"
                       VerticalAlignment="Center"
                       Margin="0,0,10,0"
                       Height="25"
                       Width="110" />
            <TextBox Text="{Binding ServerUserName, Mode=TwoWay}"
                     TextWrapping="Wrap"
                     VerticalAlignment="Center"
                     Width="180" 
                     Height="30" />
        </StackPanel>

        <StackPanel Orientation="Horizontal"
                    Grid.Row="1"
                    Grid.Column="1"
                    VerticalAlignment="Center"
                    HorizontalAlignment="Center"
                    Padding="5,0,5,0">
            <TextBlock TextWrapping="Wrap"
                       Text="Password:"
                       TextAlignment="Right"
                       VerticalAlignment="Center"
                       Margin="0,0,10,0"
                       Height="25"
                       Width="110" />
            <PasswordBox Password="{Binding ServerPassword, Mode=TwoWay}"
                         VerticalAlignment="Top"
                         Width="180" 
                         Height="30" />
        </StackPanel>

        <StackPanel Orientation="Horizontal"
                    Grid.Row="1"
                    Grid.Column="0"
                    VerticalAlignment="Center"
                    HorizontalAlignment="Center"
                    Padding="5,0,5,0">
            <TextBlock TextWrapping="Wrap"
                       Text="Port:"
                       TextAlignment="Right"
                       VerticalAlignment="Center"
                       Margin="0,0,10,0"
                       Height="25"
                       Width="110" />
            <TextBox Text="{Binding ServerPort, Mode=TwoWay}"
                     TextWrapping="Wrap"
                     VerticalAlignment="Center"
                     Height="30"
                     Width="180" />
        </StackPanel>

        <Button Grid.Row="0"
                Grid.RowSpan="2"
                Grid.Column="2"
                Content="Connect"
                Margin="20,10,20,10"
                MaxWidth="300"
                HorizontalAlignment="Stretch"
                VerticalAlignment="Stretch"
                Command="{Binding ConnectAndLoadCamerasCommand}" 
                Background="#66aee7"
                Foreground="White"/>

        <StackPanel Orientation="Horizontal"
                    Grid.Row="3"
                    Grid.Column="0"
                    VerticalAlignment="Center"
                    HorizontalAlignment="Center"
                    MinWidth="300"
                    Padding="5,0,5,0"
                    Visibility="{Binding IsConnected, Converter={StaticResource BooleanToVisibilityConverter}, FallbackValue=Collapsed}">
            <TextBlock x:Name="listOfCamerasLabel"
                       Text="List of cameras"
                       TextWrapping="Wrap"
                       TextAlignment="Left"
                       VerticalAlignment="Center"
                       FontSize="24" />
        </StackPanel>
        
        <TextBlock  Grid.Row="3"
                    Grid.Column="1"
                    Grid.ColumnSpan="2"
                    Text="{Binding SelectedCamera.ItemName, UpdateSourceTrigger=PropertyChanged}"
                    TextWrapping="Wrap"
                    TextAlignment="Center"
                    VerticalAlignment="Center"
                    FontSize="24" />

        <ListView Grid.Row="4"
                  Grid.Column="0"
                  Grid.RowSpan="2"
                  ItemsSource="{Binding AllCameras}"
                  SelectedItem="{Binding SelectedCamera, Mode=TwoWay}"
                  SelectionMode="Single"
                  ScrollViewer.VerticalScrollBarVisibility="Auto"
                  Width="290"
                  MinHeight="300"
                  Margin="5,0,5,0"
                  HorizontalAlignment="Center"
                  Visibility="{Binding IsConnected, Converter={StaticResource BooleanToVisibilityConverter}, FallbackValue=Collapsed}">


            <ListView.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding ItemName}"></TextBlock>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

        <Image Grid.Row="4"
               Grid.Column="1"
               Grid.ColumnSpan="2"
               Margin="20,0,20,0"
               Source="{Binding ImageViewSource, UpdateSourceTrigger=PropertyChanged}" />

        <StackPanel Orientation="Horizontal"
                    Grid.Row="5"
                    Grid.Column="1"
                    Grid.ColumnSpan="2"
                    HorizontalAlignment="Center"
                    Visibility="{Binding IsVideoLoaded, Converter={StaticResource BooleanToVisibilityConverter}, FallbackValue=Collapsed}">
            <Button Content="&lt;"
                    Command="{Binding PlayBackwardsCommand}"
                    Width="54"
                    Height="55"
                    Margin="10,0" />
            <Button x:Name="pauseButton"
                    Content="||"
                    Command="{Binding PauseVideoCommand}"
                    Height="55"
                    Width="54"
                    Margin="10,0" />
            <Button Content="&gt;"
                    Command="{Binding PlayForwardCommand}"
                    Height="55"
                    Width="54"
                    Margin="10,0" />
        </StackPanel>

        <StackPanel Orientation="Horizontal"
                    Grid.Row="6"
                    Margin="10,5,5,5"
                    HorizontalAlignment="Left"
                    VerticalAlignment="Center"
                    Grid.Column="0"
                    Grid.ColumnSpan="3">

            <TextBlock Text="Milestone SDK Playback Video Sample. For more information visit" FontSize="12" Margin="0,0,5,0" HorizontalAlignment="Left" Foreground="DarkGray" />
            <TextBlock HorizontalAlignment="Left" FontSize="12">
                <Hyperlink NavigateUri="https://www.milestonesys.com/">www.milestonesys.com</Hyperlink>
            </TextBlock>
        </StackPanel>

    </Grid>
</Page>