<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:converters="using:VisionBuilder.UI.Avalonia.Uno.Converters"
             x:Class="VisionBuilder.UI.Avalonia.Uno.Views.SingleCameraView"
             Background="White">

    <UserControl.Resources>
        <converters:MatToBitmapConverter x:Key="MatToBitmapConverter" />
        <converters:BoolToVisibilityConverter x:Key="BoolToVis" />
    </UserControl.Resources>

    <Grid ColumnDefinitions="5*,1,2*,1,Auto,Auto">
        <!-- Column 0: Preview -->
        <Grid Grid.Column="0" RowDefinitions="Auto,*">
            <TextBlock Grid.Row="0"
                       x:Name="LblCameraName"
                       Text="Camera"
                       FontSize="16" FontWeight="SemiBold"
                       HorizontalAlignment="Center"
                       Margin="0,8,0,4" />

            <Border Grid.Row="1" Margin="4"
                    x:Name="PreviewBorder"
                    BorderThickness="0"
                    BorderBrush="Red">
                <Image x:Name="PreviewImage"
                       Stretch="Uniform" />
            </Border>
        </Grid>

        <!-- Column 1: Divider -->
        <Border Grid.Column="1" Background="#D32F2F" />

        <!-- Column 2: Errors -->
        <Grid Grid.Column="2" RowDefinitions="Auto,*">
            <TextBlock Grid.Row="0"
                       Text="Errors"
                       FontSize="16"
                       HorizontalAlignment="Center"
                       Margin="0,8,0,4" />

            <ScrollViewer Grid.Row="1" VerticalScrollBarVisibility="Auto">
                <ItemsControl x:Name="ErrorsList">
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <WrapPanel Orientation="Horizontal" />
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>
                </ItemsControl>
            </ScrollViewer>
        </Grid>

        <!-- Column 3: Divider -->
        <Border Grid.Column="3" Background="#D32F2F" />

        <!-- Column 4: Stats -->
        <ScrollViewer Grid.Column="4" Width="220" VerticalScrollBarVisibility="Auto">
            <StackPanel x:Name="StatsPanel" Margin="8,8,8,0" Spacing="2" />
        </ScrollViewer>

        <!-- Column 5: Action buttons (right side) -->
        <StackPanel x:Name="ButtonsPanel" Grid.Column="5" Width="180" Margin="8" Spacing="6"
                    VerticalAlignment="Top">
            <Button x:Name="BtnSelectRecipe"
                    Content="SELECT RECIPE"
                    Height="60"
                    HorizontalAlignment="Stretch"
                    HorizontalContentAlignment="Center"
                    VerticalContentAlignment="Center"
                    FontSize="14" FontWeight="Bold"
                    BorderBrush="#D32F2F"
                    BorderThickness="2"
                    Background="White"
                    Foreground="#D32F2F" />
            <Button x:Name="BtnStart"
                    Content="START"
                    Height="60"
                    HorizontalAlignment="Stretch"
                    HorizontalContentAlignment="Center"
                    VerticalContentAlignment="Center"
                    FontSize="14" FontWeight="Bold"
                    Background="#D32F2F" Foreground="White" />
            <Button x:Name="BtnStop"
                    Content="STOP"
                    Height="60"
                    HorizontalAlignment="Stretch"
                    HorizontalContentAlignment="Center"
                    VerticalContentAlignment="Center"
                    FontSize="14" FontWeight="Bold"
                    Background="#D32F2F" Foreground="White" />
            <Button x:Name="BtnPause"
                    Content="PAUSE"
                    Height="60"
                    HorizontalAlignment="Stretch"
                    HorizontalContentAlignment="Center"
                    VerticalContentAlignment="Center"
                    FontSize="14" FontWeight="Bold"
                    BorderBrush="#D32F2F"
                    BorderThickness="2"
                    Background="White"
                    Foreground="#D32F2F" />
            <Button x:Name="BtnResume"
                    Content="RESUME"
                    Height="60"
                    HorizontalAlignment="Stretch"
                    HorizontalContentAlignment="Center"
                    VerticalContentAlignment="Center"
                    FontSize="14" FontWeight="Bold"
                    BorderBrush="#D32F2F"
                    BorderThickness="2"
                    Background="White"
                    Foreground="#D32F2F" />
            <Button x:Name="BtnHotReload"
                    Content="HOT RELOAD"
                    Height="60"
                    HorizontalAlignment="Stretch"
                    HorizontalContentAlignment="Center"
                    VerticalContentAlignment="Center"
                    FontSize="14" FontWeight="Bold"
                    BorderBrush="#D32F2F"
                    BorderThickness="2"
                    Background="White"
                    Foreground="#D32F2F" />
        </StackPanel>
    </Grid>
</UserControl>
