<UserControl x:Class="TeamViewerApi.Views.DevicesView" 
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:viewModels="clr-namespace:TeamViewerApi.ViewModels" 
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="500">
    <UserControl.DataContext>
        <viewModels:DevicesViewModel />
    </UserControl.DataContext>
    
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <TextBlock Grid.Row="0" Grid.Column="0" Text="Device" />
        <ComboBox Grid.Row="0" Grid.Column="1" 
                  Width="200px" 
                  ItemsSource="{Binding Devices.Items, Mode=OneWay}" 
                  SelectedItem="{Binding SelectedDevice, Mode=TwoWay}">
            <ComboBox.ItemTemplate>
                <DataTemplate>
                    <TextBlock Style="{x:Null}" Text="{Binding Alias, Mode=OneWay}" />
                </DataTemplate>
            </ComboBox.ItemTemplate>
        </ComboBox>
        <DockPanel Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3" 
                   Background="AliceBlue" />
        <TextBlock Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" HorizontalAlignment="Center" FontWeight="Bold" Text="Current device" />

        <TextBlock Grid.Row="2" Grid.Column="0" Text="Id" />
        <TextBlock Grid.Row="2" Grid.Column="1" HorizontalAlignment="Left" Text="{Binding SelectedDevice.DeviceId, Mode=OneWay}" />
        <TextBlock Grid.Row="3" Grid.Column="0" Text="Remote control Id" />
        <TextBlock Grid.Row="3" Grid.Column="1" HorizontalAlignment="Left" Text="{Binding SelectedDevice.RemoteControlId, Mode=OneWay}" />
        <TextBlock Grid.Row="4" Grid.Column="0" Text="Group" />
        <ComboBox Grid.Row="4" Grid.Column="1" 
                  Width="150px" 
                  HorizontalAlignment="Left" 
                  SelectedValuePath="GroupId" 
                  ItemsSource="{Binding Groups.Items, Mode=OneWay}" 
                  SelectedValue="{Binding SelectedDevice.GroupId, Mode=TwoWay}">
            <ComboBox.ItemTemplate>
                <DataTemplate>
                    <TextBlock Style="{x:Null}" Text="{Binding Name, Mode=OneWay}" />
                </DataTemplate>
            </ComboBox.ItemTemplate>
        </ComboBox>
        <TextBlock Grid.Row="5" Grid.Column="0" Text="Alias" />
        <TextBox Grid.Row="5" Grid.Column="1" Width="200px" Text="{Binding SelectedDevice.Alias, Mode=TwoWay}" />
        <TextBlock Grid.Row="6" Grid.Column="0" Text="Description" />
        <TextBox Grid.Row="6" Grid.Column="1" Width="200px" Text="{Binding SelectedDevice.Description, Mode=TwoWay}" />
        <TextBlock Grid.Row="7" Grid.Column="0" Text="Password" />
        <TextBox Grid.Row="7" Grid.Column="1" Width="200px" Text="{Binding SelectedDevice.Password, Mode=TwoWay}" />
        <TextBlock Grid.Row="8" Grid.Column="0" Text="Online" />
        <TextBlock Grid.Row="8" Grid.Column="1" HorizontalAlignment="Left" Text="{Binding SelectedDevice.Online, Mode=OneWay}" />
        <TextBlock Grid.Row="9" Grid.Column="0" Text="Features" />
        <TextBlock Grid.Row="9" Grid.Column="1" HorizontalAlignment="Left" Text="{Binding SelectedDevice.Features, Mode=OneWay}" />

        <DockPanel Grid.Row="10" Grid.Column="0" Grid.ColumnSpan="2" LastChildFill="False">
            <Button DockPanel.Dock="Left" 
                    Content="Get devices" 
                    Command="{Binding GetDevicesCommand, Mode=OneWay}" />
            <Button DockPanel.Dock="Right" 
                    Content="Save changes" 
                    Command="{Binding SaveDeviceCommand, Mode=OneWay}" />
        </DockPanel>
        <DockPanel Grid.Row="11" Grid.Column="0" Grid.ColumnSpan="2" LastChildFill="False">
            <Button DockPanel.Dock="Left"
                    Content="Create device" 
                    Command="{Binding CreateDeviceCommand, Mode=OneWay}" />
            <Button DockPanel.Dock="Right"
                    Content="Delete device" 
                    Command="{Binding DeleteDeviceCommand, Mode=OneWay}" />
        </DockPanel>
    </Grid>
</UserControl>
