<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:vm="using:DesertPaintCodex.ViewModels"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        x:Class="DesertPaintCodex.Views.ScreenSettingsView"
        mc:Ignorable="d" d:DesignWidth="310" d:DesignHeight="330"
        Width="320" Height="330" Topmost="True"
        WindowStartupLocation="CenterScreen"
        Title="Screen Settings">

  <Design.DataContext>
    <vm:ScreenSettingsViewModel/>
  </Design.DataContext>
  
  <DockPanel Margin="20">
    <TextBlock DockPanel.Dock="Top" Margin="0, 0, 0, 4">Which screen is the game on?</TextBlock>
    
    <Grid DockPanel.Dock="Top" ColumnDefinitions="80,10,80,10,90" RowDefinitions="Auto" Margin="7 0 0 0">
      <TextBlock Text="Position" Grid.Row="0" Grid.Column="0"/>
      <TextBlock Text="Size" Grid.Row="0" Grid.Column="2"/>
    </Grid>
    
    <Button DockPanel.Dock="Bottom" Command="{Binding Save}">Ok</Button>
    
    <Grid DockPanel.Dock="Bottom" ColumnDefinitions="*,12,80,12,24" RowDefinitions="Auto,30,Auto" Margin="0, 0, 0, 30">
      <TextBlock VerticalAlignment="Center" TextWrapping="Wrap" TextAlignment="Right" Grid.Row="2" Grid.Column="0">
        Screen pixels to game pixels:
      </TextBlock>
      <NumericUpDown Minimum="1" Maximum="4" Increment="1" Value="{Binding PixelMultiplier}" Grid.Row="2" Grid.Column="2"/>
      <Border Classes="Help" Grid.Row="2" Grid.Column="4">
        <TextBlock>?</TextBlock>
        <ToolTip.Tip>
          <StackPanel Margin="5" Spacing="20" Orientation="Vertical">
            <TextBlock Classes="BlockHeader">Screen Pixels to Game Pixels</TextBlock>
            <TextBlock TextWrapping="Wrap">If your screen is scaled at the system-level, you may need to adjust this number to measure UI elements correctly.</TextBlock>
          </StackPanel>
        </ToolTip.Tip>
      </Border>
    </Grid>

    <ListBox Items="{Binding Screens}" SelectedIndex="{Binding ScreenIndex, Mode=TwoWay}" Margin="0,4,0,20">
      <ListBox.ItemTemplate>
        <DataTemplate>
          <Grid ColumnDefinitions="80,10,80,10,60" RowDefinitions="Auto">
            <TextBlock Text="{Binding PositionToStr}" Grid.Row="0" Grid.Column="0" />
            <TextBlock Text="{Binding SizeToStr}"  Grid.Row="0" Grid.Column="2"/>
            <TextBlock Text="Primary" IsVisible="{Binding IsPrimary}" Grid.Row="0" Grid.Column="4" />
          </Grid>
        </DataTemplate>
      </ListBox.ItemTemplate>
    </ListBox>
    
  </DockPanel>

</Window>