<ResourceDictionary
    xmlns="https://github.com/avaloniaui"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:converters="clr-namespace:Ursa.Themes.Semi.Converters"
    xmlns:u="https://irihi.tech/ursa">
    <Design.PreviewWith>
        <StackPanel Width="100" Spacing="20">
            <u:Timeline>
                <u:TimelineItem Content="Hello" Time="2022-01-01" />
                <u:TimelineItem Content="World" Time="2022-02-01" />
                <u:TimelineItem Content="!" Time="2022-03-01" />
                <u:TimelineItem />
            </u:Timeline>
        </StackPanel>
    </Design.PreviewWith>
    <!--  Add Resources Here  -->
    <u:TimelineFormatConverter x:Key="FormatConverter" />
    <ControlTheme x:Key="{x:Type u:Timeline}" TargetType="u:Timeline">
        <Setter Property="Template">
            <ControlTemplate TargetType="u:Timeline">
                <ItemsPresenter ItemsPanel="{TemplateBinding ItemsPanel}" />
            </ControlTemplate>
        </Setter>
    </ControlTheme>

    <converters:TimelineItemTypeToIconForegroundConverter
        x:Key="ForegroundConverter"
        DefaultBrush="{DynamicResource DefaultTimelineIconForeground}"
        OngoingBrush="{DynamicResource OngoingTimelineIconForeground}"
        SuccessBrush="{DynamicResource SuccessTimelineIconForeground}"
        WarningBrush="{DynamicResource WarningTimelineIconForeground}"
        ErrorBrush="{DynamicResource ErrorTimelineIconForeground}" />

    <ControlTheme x:Key="{x:Type u:TimelineItem}" TargetType="u:TimelineItem">
        <Setter Property="u:TimelineItem.Template">
            <ControlTemplate TargetType="u:TimelineItem">
                <Grid ColumnDefinitions="Auto, *" RowDefinitions="*, Auto, *">
                    <Grid
                        Grid.Row="0"
                        Grid.RowSpan="2"
                        Grid.Column="0"
                        RowDefinitions="Auto, Auto, *">
                        <Rectangle
                            Grid.Row="0"
                            Grid.Column="0"
                            Width="1"
                            Height="8"
                            HorizontalAlignment="Center"
                            VerticalAlignment="Top"
                            Classes="start"
                            Fill="{DynamicResource TimelineLineBrush}" />
                        <Panel Grid.Row="1">
                            <Ellipse
                                Name="PART_Indicator"
                                Width="8"
                                Height="8"
                                Margin="2"
                                HorizontalAlignment="Center"
                                VerticalAlignment="Top"
                                Fill="{DynamicResource DefaultTimelineIconForeground}" />
                        </Panel>
                        <Rectangle
                            Grid.Row="2"
                            Grid.Column="0"
                            Width="1"
                            HorizontalAlignment="Center"
                            VerticalAlignment="Stretch"
                            Classes="end"
                            Fill="{DynamicResource TimelineLineBrush}" />
                    </Grid>
                    <Rectangle
                        Grid.Row="2"
                        Grid.Column="0"
                        Width="1"
                        HorizontalAlignment="Center"
                        VerticalAlignment="Stretch"
                        Classes="end"
                        Fill="{DynamicResource TimelineLineBrush}" />
                    <ContentPresenter
                        Grid.Row="0"
                        Grid.Column="1"
                        HorizontalAlignment="Stretch"
                        VerticalAlignment="Bottom"
                        Foreground="Gray">
                        <ContentPresenter.Content>
                            <MultiBinding Converter="{StaticResource FormatConverter}">
                                <Binding Path="Time" RelativeSource="{RelativeSource TemplatedParent}" />
                                <Binding Path="TimeFormat" RelativeSource="{RelativeSource TemplatedParent}" />
                            </MultiBinding>
                        </ContentPresenter.Content>
                    </ContentPresenter>
                    <ContentPresenter
                        Name="content"
                        Grid.Row="1"
                        Grid.Column="1"
                        Margin="0,0,0,16"
                        HorizontalAlignment="Left"
                        VerticalAlignment="Center"
                        Content="{TemplateBinding Content}"
                        ContentTemplate="{TemplateBinding ContentTemplate}" />
                </Grid>
            </ControlTemplate>
        </Setter>
        <Style Selector="^:first /template/ Rectangle.start">
            <Setter Property="Rectangle.Fill" Value="Transparent" />
        </Style>
        <Style Selector="^:last /template/ Rectangle.end">
            <Setter Property="Rectangle.Fill" Value="Transparent" />
        </Style>
        <Style Selector="^:none /template/ Ellipse#PART_Indicator">
            <Setter Property="Ellipse.Fill" Value="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=u:TimelineItem}, Path=IconForeground}" />
        </Style>
        <Style Selector="^:not(:none):default /template/ Ellipse#PART_Indicator">
            <Setter Property="Ellipse.Fill" Value="{DynamicResource DefaultTimelineIconForeground}" />
        </Style>
        <Style Selector="^:not(:none):ongoing /template/ Ellipse#PART_Indicator">
            <Setter Property="Ellipse.Fill" Value="{DynamicResource OngoingTimelineIconForeground}" />
        </Style>
        <Style Selector="^:not(:none):success /template/ Ellipse#PART_Indicator">
            <Setter Property="Ellipse.Fill" Value="{DynamicResource SuccessTimelineIconForeground}" />
        </Style>
        <Style Selector="^:not(:none):warning /template/ Ellipse#PART_Indicator">
            <Setter Property="Ellipse.Fill" Value="{DynamicResource WarningTimelineIconForeground}" />
        </Style>
        <Style Selector="^:not(:none):error /template/ Ellipse#PART_Indicator">
            <Setter Property="Ellipse.Fill" Value="{DynamicResource ErrorTimelineIconForeground}" />
        </Style>
    </ControlTheme>
</ResourceDictionary>
