<UserControl
    xmlns="https://github.com/avaloniaui"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:vm="clr-namespace:Splitter_UI.ViewModels"
    xmlns:local="clr-namespace:Splitter_UI.Views"
    xmlns:controls="clr-namespace:Splitter_UI.Controls"
    x:Class="Splitter_UI.Views.PreviewPane"
    x:DataType="vm:PreviewPaneViewModel">

    <Border Background="#202020" Padding="10">
        <Grid RowDefinitions="*,Auto,Auto">

            <local:PreviewCanvas
                Grid.Row="0"
                Preview="{Binding Preview}"
                Sar="{Binding Sar}"
                RotateAngle="{Binding Rotate}"
                GravitateTo="{Binding GravitateTo, Mode=TwoWay}"
                DetectAbove="{Binding DetectAbove, Mode=TwoWay}"
                DetectId="{Binding Selected.DetectId, Mode=TwoWay}"
                />

            <Grid Grid.Row="1"
                  ColumnDefinitions="Auto"
                  Margin="0,10,0,0">
                <Button Grid.Column="1"
                        HorizontalAlignment="Left"
                        Width="24" Height="24"
                        Padding="0"
                        Margin="0,0,5,0"
                        Command="{Binding Selected.PlayPreviewCommand}">
                    <TextBlock FontFamily="{StaticResource FontAwesome}"
                               Text="&#xf04b;"
                               FontSize="12"
                               VerticalAlignment="Center"
                               HorizontalAlignment="Center" />
                </Button>

            </Grid>

            <Grid Grid.Row="2"
                  ColumnDefinitions="Auto,*,Auto"
                  Margin="0,10,0,0">

                <Button Grid.Column="0"
                        HorizontalAlignment="Left"
                        Width="24" Height="24"
                        Padding="0"
                        Margin="0,0,5,0"
                        Command="{Binding Selected.StepBackwardCommand}">
                    <TextBlock FontFamily="{StaticResource FontAwesome}"
                               Text="&#xf048;"
                               FontSize="12"
                               VerticalAlignment="Center"
                               HorizontalAlignment="Center" />
                </Button>

                <controls:TimelinePreviewSlider Grid.Column="1"
                    ViewModel="{Binding Selected}"
                    Margin="5,0,5,0" />

                <Button Grid.Column="2"
                        HorizontalAlignment="Right"
                        Width="24" Height="24"
                        Padding="0"
                        Margin="5,0,0,0"
                        Command="{Binding Selected.StepForwardCommand}">
                    <TextBlock FontFamily="{StaticResource FontAwesome}"
                               Text="&#xf051;"
                               FontSize="12"
                               VerticalAlignment="Center"
                               HorizontalAlignment="Center" />
                </Button>

            </Grid>

        </Grid>
    </Border>
</UserControl>

