<ResourceDictionary xmlns="https://github.com/avaloniaui"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:animations="clr-namespace:PixiEditor.AvaloniaUI.Views.Animations"
                    xmlns:document="clr-namespace:PixiEditor.AvaloniaUI.ViewModels.Document"
                    xmlns:handlers="clr-namespace:PixiEditor.AvaloniaUI.Models.Handlers"
                    xmlns:behaviours="clr-namespace:PixiEditor.AvaloniaUI.Helpers.Behaviours"
                    xmlns:commands="clr-namespace:PixiEditor.AvaloniaUI.Models.Commands.Attributes.Commands"
                    xmlns:xaml="clr-namespace:PixiEditor.AvaloniaUI.Models.Commands.XAML"
                    xmlns:converters="clr-namespace:PixiEditor.AvaloniaUI.Helpers.Converters"
                    xmlns:ui="clr-namespace:PixiEditor.AvaloniaUI.Helpers.UI"
                    xmlns:input="clr-namespace:PixiEditor.AvaloniaUI.Views.Input"
                    xmlns:system="clr-namespace:System;assembly=System.Runtime">
    <ControlTheme TargetType="animations:Timeline" x:Key="{x:Type animations:Timeline}">
        <Setter Property="Template">
            <ControlTemplate>
                <Grid Background="{DynamicResource ThemeBackgroundBrush1}">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>

                    <DockPanel Grid.Column="0" Grid.Row="0" LastChildFill="True">
                        <Button DockPanel.Dock="Left" Classes="pixi-icon"
                                Content="{DynamicResource icon-plus-square}"
                                Command="{TemplateBinding NewKeyFrameCommand}" />

                        <Button DockPanel.Dock="Left" Classes="pixi-icon"
                                Content="{DynamicResource icon-duplicate}"
                                Command="{TemplateBinding DuplicateKeyFrameCommand}" />
                        <Button DockPanel.Dock="Left" Classes="pixi-icon"
                                Content="{DynamicResource icon-trash}"
                                Command="{TemplateBinding DeleteKeyFrameCommand}"
                                IsEnabled="{Binding SelectedKeyFrames.Count, RelativeSource={RelativeSource TemplatedParent}}"
                                CommandParameter="{Binding SelectedKeyFrames, RelativeSource={RelativeSource TemplatedParent}}" />
                        <input:NumberInput Min="1"
                                           Value="{Binding Fps, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}" />
                        <Panel>
                            <ToggleButton HorizontalAlignment="Center" Content="Play" Name="PART_PlayToggle" />
                        </Panel>
                    </DockPanel>

                    <Grid Grid.Row="2">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" /> <!-- For the timeline slider -->
                            <RowDefinition Height="*" />    <!-- For the keyframes and headers -->
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="200" /> <!-- For the headers -->
                            <ColumnDefinition Width="*" />    <!-- For the timeline slider and keyframes -->
                        </Grid.ColumnDefinitions>
                        <animations:TimelineSlider
                            Grid.Row="0" Grid.Column="1"
                            TickFrequency="1" Height="35" ClipToBounds="False"
                            TickPlacement="TopLeft" VerticalAlignment="Top"
                            SmallChange="1" ZIndex="10"
                            LargeChange="10"
                            Scale="{Binding Scale, RelativeSource={RelativeSource TemplatedParent}}"
                            Offset="{Binding ScrollOffset, RelativeSource={RelativeSource TemplatedParent}}"
                            MinLeftOffset="{Binding MinLeftOffset, RelativeSource={RelativeSource TemplatedParent}}"
                            IsSnapToTickEnabled="True"
                            Name="PART_TimelineSlider"
                            Minimum="1">
                            <animations:TimelineSlider.Maximum>
                                <MultiBinding>
                                    <MultiBinding.Converter>
                                        <converters:TimelineSliderWidthToMaximumConverter />
                                    </MultiBinding.Converter>
                                    <Binding Path="Bounds"
                                             RelativeSource="{RelativeSource Self}" />
                                    <Binding RelativeSource="{RelativeSource TemplatedParent}"
                                             Path="Scale" />
                                    <Binding RelativeSource="{RelativeSource TemplatedParent}"
                                             Path="ScrollOffset" />
                                </MultiBinding>
                            </animations:TimelineSlider.Maximum>
                            <Interaction.Behaviors>
                                <behaviours:SliderUpdateBehavior
                                    Binding="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ActiveFrame, Mode=OneWay}"
                                    DragStarted="{xaml:Command PixiEditor.Document.StartChangeActiveFrame}"
                                    DragValueChanged="{xaml:Command PixiEditor.Document.ChangeActiveFrame, UseProvided=True}"
                                    DragEnded="{xaml:Command PixiEditor.Document.EndChangeActiveFrame}"
                                    SetValueCommand="{xaml:Command PixiEditor.Animation.ActiveFrameSet, UseProvided=True}"
                                    ValueFromSlider="{Binding ElementName=PART_TimelineSlider, Path=Value, Mode=TwoWay}" />
                            </Interaction.Behaviors>
                        </animations:TimelineSlider>

                        <Panel ClipToBounds="True" Grid.Row="1" Grid.Column="1" Margin="29, -16, 0, 0" VerticalAlignment="Stretch"
                               ZIndex="11" HorizontalAlignment="Left" IsHitTestVisible="False">
                            <Border Width="2" Background="{DynamicResource ThemeAccentBrush}">
                                <Border.Margin>
                                    <MultiBinding Converter="{converters:TimelineSliderValueToMarginConverter}">
                                        <Binding Path="ActiveFrame"
                                                 RelativeSource="{RelativeSource TemplatedParent}" />
                                        <Binding Path="Minimum" ElementName="PART_TimelineSlider"/>
                                        <Binding Path="Scale"
                                                 RelativeSource="{RelativeSource TemplatedParent}" />
                                        <Binding Path="ScrollOffset"
                                                 RelativeSource="{RelativeSource TemplatedParent}" />
                                    </MultiBinding>
                                </Border.Margin>
                            </Border>
                        </Panel>

                        <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Hidden"
                                      Name="PART_TimelineHeaderScroll"
                                      Grid.Row="1" Grid.Column="0">
                            <StackPanel Orientation="Vertical" Background="{DynamicResource ThemeBackgroundBrush1}">
                                <ItemsControl Margin="0, 35"
                                              ItemsSource="{Binding KeyFrames, RelativeSource={RelativeSource TemplatedParent}}">
                                    <ItemsControl.DataTemplates>
                                        <DataTemplate DataType="document:KeyFrameGroupViewModel">
                                            <animations:TimelineGroupHeader Height="70"
                                                                            Item="{Binding}" />
                                        </DataTemplate>
                                    </ItemsControl.DataTemplates>
                                </ItemsControl>
                            </StackPanel>
                        </ScrollViewer>
                        <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto"
                                      Grid.Row="1" Offset="{Binding ScrollOffset, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                                      Name="PART_TimelineKeyFramesScroll" Grid.Column="1">
                            <Grid Background="{DynamicResource ThemeBackgroundBrush}" Name="PART_ContentGrid">
                                <Interaction.Behaviors>
                                    <EventTriggerBehavior EventName="PointerPressed">
                                        <InvokeCommandAction
                                            Command="{Binding ClearSelectedKeyFramesCommand,
                                                        RelativeSource={RelativeSource FindAncestor, AncestorType=animations:Timeline}}"
                                            CommandParameter="{x:Null}" />
                                    </EventTriggerBehavior>
                                </Interaction.Behaviors>
                                <ItemsControl ClipToBounds="False" Name="PART_KeyFramesHost"
                                              Margin="0, 35, 0, 0"
                                              ItemsSource="{Binding KeyFrames, RelativeSource={RelativeSource TemplatedParent}}">
                                    <ItemsControl.DataTemplates>
                                        <DataTemplate DataType="document:KeyFrameGroupViewModel">
                                            <ItemsControl Padding="0 5" ClipToBounds="False" Height="70"
                                                          BorderThickness="0, 0, 0, 1"
                                                          BorderBrush="{DynamicResource ThemeBorderMidBrush}"
                                                          ItemsSource="{Binding Children}">
                                                <ItemsControl.ItemContainerTheme>
                                                    <ControlTheme TargetType="ContentPresenter">
                                                        <Setter Property="HorizontalAlignment" Value="Left" />
                                                        <Setter Property="ZIndex"
                                                                Value="{Binding StartFrameBindable}" />
                                                    </ControlTheme>
                                                </ItemsControl.ItemContainerTheme>
                                                <ItemsControl.ItemsPanel>
                                                    <ItemsPanelTemplate>
                                                        <Grid
                                                            Margin="{Binding  Path=MinLeftOffset,
                                                        RelativeSource={RelativeSource FindAncestor, AncestorType=animations:Timeline},
                                                        Converter={converters:DoubleToThicknessConverter}, ConverterParameter=LR}" />
                                                    </ItemsPanelTemplate>
                                                </ItemsControl.ItemsPanel>
                                            </ItemsControl>
                                        </DataTemplate>
                                        <DataTemplate DataType="document:RasterKeyFrameViewModel">
                                            <animations:KeyFrame
                                                Scale="{Binding Scale, RelativeSource={RelativeSource FindAncestor, AncestorType=animations:Timeline}}"
                                                IsEnabled="{Binding IsVisible}"
                                                IsSelected="{Binding IsSelected, Mode=TwoWay}"
                                                Min="{Binding ElementName=PART_TimelineSlider, Path=Minimum}"
                                                Item="{Binding}">
                                                <animations:KeyFrame.Width>
                                                    <MultiBinding Converter="{converters:DurationToWidthConverter}">
                                                        <Binding Path="DurationBindable" />
                                                        <Binding
                                                            RelativeSource="{RelativeSource FindAncestor, AncestorType=animations:Timeline}"
                                                            Path="Scale" />
                                                    </MultiBinding>
                                                </animations:KeyFrame.Width>
                                                <Interaction.Behaviors>
                                                    <EventTriggerBehavior EventName="PointerPressed">
                                                        <InvokeCommandAction
                                                            Command="{Binding PressedKeyFrameCommand,
                                                        RelativeSource={RelativeSource FindAncestor, AncestorType=animations:Timeline}}"
                                                            PassEventArgsToCommand="True" />
                                                    </EventTriggerBehavior>
                                                    <EventTriggerBehavior EventName="PointerMoved">
                                                        <InvokeCommandAction
                                                            Command="{Binding DraggedKeyFrameCommand,
                                                        RelativeSource={RelativeSource FindAncestor, AncestorType=animations:Timeline}}"
                                                            PassEventArgsToCommand="True" />
                                                    </EventTriggerBehavior>
                                                    <EventTriggerBehavior EventName="PointerCaptureLost">
                                                        <InvokeCommandAction
                                                            Command="{Binding ReleasedKeyFrameCommand,
                                                        RelativeSource={RelativeSource FindAncestor, AncestorType=animations:Timeline}}"
                                                            CommandParameter="{Binding}" />
                                                    </EventTriggerBehavior>
                                                </Interaction.Behaviors>
                                            </animations:KeyFrame>
                                        </DataTemplate>
                                    </ItemsControl.DataTemplates>
                                </ItemsControl>
                                
                                <Rectangle Name="PART_SelectionRectangle" HorizontalAlignment="Left" VerticalAlignment="Top"
                                           IsVisible="False" ZIndex="100"
                                           Fill="{DynamicResource SelectionFillBrush}" Opacity="1"/>
                            </Grid>
                        </ScrollViewer>
                    </Grid>
                </Grid>
            </ControlTemplate>
        </Setter>
    </ControlTheme>

</ResourceDictionary>