<?xml version="1.0" encoding="utf-8"?>
<UserControl
    x:Class="Sonex.Client.Views.DataChangeValuesView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:controls="using:Sonex.Client.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <ScrollViewer
        Background="{StaticResource CardBackgroundFillColorSecondaryBrush}"
        Padding="16 8 16 8"
        HorizontalScrollMode="Auto"
        HorizontalScrollBarVisibility="Auto"
        VerticalScrollMode="Auto"
        VerticalScrollBarVisibility="Auto">

        <StackPanel
            Orientation="Horizontal"
            VerticalAlignment="Top"
            Spacing="16">

            <StackPanel Orientation="Vertical" Spacing="8">
                <controls:TextProperty x:Name="IdProperty" Header="ID" Width="300" HeaderWidth="90" IsReadOnly="True" />
                <controls:TextProperty x:Name="ChangedAtProperty" Header="Changed at" Width="300" HeaderWidth="90" IsReadOnly="True" />
                <controls:TextProperty x:Name="ActionTypeProperty" Header="Action" Width="300" HeaderWidth="90" IsReadOnly="True" />
                <controls:TextProperty x:Name="AccountNameProperty" Header="Account" Width="300" HeaderWidth="90" IsReadOnly="True" />
                <controls:TextProperty x:Name="TableNameProperty" Header="Table" Width="300" HeaderWidth="90" IsReadOnly="True" />
                <controls:TextProperty x:Name="KeyNameProperty" Header="Key name" Width="300" HeaderWidth="90" IsReadOnly="True" />
                <controls:TextProperty x:Name="KeyValueProperty" Header="Key value" Width="300" HeaderWidth="90" IsReadOnly="True" />
            </StackPanel>

            <AppBarSeparator />

            <StackPanel Orientation="Vertical" Spacing="8">
                <controls:HeaderProperty Text="Before" Width="500"/>
                <controls:JsonProperty
                    x:Name="ValueBeforeProperty"
                    Header=""
                    Width="500"
                    HeaderWidth="0"
                    EditorHeight="220"
                    HorizontalScrollBarVisibility="Auto"
                    VerticalScrollBarVisibility="Auto"
                    IsReadOnly="True" />
            </StackPanel>

            <AppBarSeparator />

            <StackPanel Orientation="Vertical" Spacing="8">
                <controls:HeaderProperty Text="After" Width="500"/>
                <controls:JsonProperty
                    x:Name="ValueAfterProperty"
                    Header=""
                    Width="500"
                    HeaderWidth="0"
                    EditorHeight="220"
                    HorizontalScrollBarVisibility="Auto"
                    VerticalScrollBarVisibility="Auto"
                    IsReadOnly="True" />
            </StackPanel>

        </StackPanel>
    </ScrollViewer>
</UserControl>
