<UserControl 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"
             xmlns:views="clr-namespace:DesertPaintCodex.Views"
             xmlns:local="clr-namespace:DesertPaintCodex.Models"
             mc:Ignorable="d" d:DesignWidth="600" d:DesignHeight="500"
             x:Class="DesertPaintCodex.Views.ExperimentLogView">

    <Design.DataContext>
        <vm:ExperimentLogViewModel/>
    </Design.DataContext>

    <UserControl.DataContext>
        <vm:ExperimentLogViewModel />
    </UserControl.DataContext>
    
    <UserControl.Styles>
        <Style Selector="TabControl.ListFilter">
            <Setter Property="Background" Value="{DynamicResource ThemeAccentBrush}" />
        </Style>
        <Style Selector="TabControl.ListFilter > TabItem">
            <Setter Property="BorderThickness" Value="0" />
            <Setter Property="Background" Value="{DynamicResource ThemeAccentBrush3}" />
            <Setter Property="Foreground" Value="White" />
            <Setter Property="FontSize" Value="14" />
            <Setter Property="Margin" Value="0" />
            <Setter Property="Padding" Value="8" />
            <Setter Property="Opacity" Value="0.5" />
        </Style>

        <Style Selector="TabControl.ListFilter WrapPanel">
            <Setter Property="Background" Value="{DynamicResource FlatBackgroundBrush}"/>
        </Style>

        <Style Selector="TabControl.ListFilter > TabItem:pointerover">
            <Setter Property="Opacity" Value="1" />
        </Style>

        <Style Selector="TabControl.ListFilter > TabItem:selected">
            <Setter Property="Opacity" Value="1" />
            <Setter Property="Background" Value="{DynamicResource ThemeAccentBrush2}" />
        </Style>

        <Style Selector="ToolTip">
            <Setter Property="Padding" Value="20" />
        </Style>
    </UserControl.Styles>
    
    <UserControl.DataTemplates>
        <DataTemplate DataType="{x:Type local:ReactionTest}">
            <Grid ColumnDefinitions="90,12,90,12,16,6,60" RowDefinitions="Auto">
                <TextBlock Text="{Binding Reagent1.Name}" Grid.Row="0" Grid.Column="0" />
                <TextBlock Text="{Binding Reagent2.Name}" Grid.Row="0" Grid.Column="2" />
                <Path Classes="Catalyst" IsVisible="{Binding IsAllCatalysts}"
                      Width="16" Height="16" Grid.Row="0" Grid.Column="4" />
                <views:ClipArrowsView Grid.Row="0" Grid.Column="6" Flags="{Binding Clipped}"/>
            </Grid>
        </DataTemplate>
    </UserControl.DataTemplates>

    <DockPanel Classes="Activity">
        <TabControl DockPanel.Dock="Left" Width="318" Classes="ListFilter" SelectedIndex="{Binding SelectedList}">
            <TabItem Header="Pending Tests">
                <ListBox Name="RemainingList"
                         Items="{Binding RemainingTests}"
                         SelectedIndex="{Binding SelectedRemainingTest}"
                         SelectionChanged="RemainingSelectionChanged"/>
            </TabItem>
            <TabItem Header="Completed Tests">
                <ListBox Items="{Binding CompletedTests}"
                         SelectedIndex="{Binding SelectedCompletedTest}" />
            </TabItem>
        </TabControl>
        
        <views:ReactionTestView DataContext="{Binding TestView}"/>
    </DockPanel>
    
    
</UserControl>