<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
			 xmlns:vm="using:SPTInstaller.ViewModels"
             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
             x:Class="SPTInstaller.CustomControls.ProgressableTaskItem">

	<UserControl.Styles>
		<!-- Ellipse Styles -->
		<Style Selector="Ellipse">
			<Setter Property="Stroke" Value="{Binding PendingColor, RelativeSource={RelativeSource AncestorType=UserControl}}"/>
			<Setter Property="Margin" Value="7 0"/>
		</Style>
		<Style Selector="Ellipse.completed">
			<Setter Property="Stroke" Value="{Binding CompletedColor, RelativeSource={RelativeSource AncestorType=UserControl}}"/>
		</Style>
		<Style Selector="Ellipse.running">
			<Setter Property="Stroke" Value="{Binding RunningColor, RelativeSource={RelativeSource AncestorType=UserControl}}"/>
			<Setter Property="Margin" Value="7 3"/>
			<Style.Animations>
				<Animation Duration="0:0:1" PlaybackDirection="Alternate" IterationCount="Infinite">
					<KeyFrame Cue="0%">
						<Setter Property="ScaleTransform.ScaleX" Value="1"/>
						<Setter Property="ScaleTransform.ScaleY" Value="1"/>
					</KeyFrame>
					<KeyFrame Cue="100%">
						<Setter Property="ScaleTransform.ScaleX" Value="1.2"/>
						<Setter Property="ScaleTransform.ScaleY" Value="1.2"/>
					</KeyFrame>
				</Animation>
			</Style.Animations>
		</Style>
		<Style Selector="Ellipse.centerRunning">
			<Setter Property="Fill" Value="{Binding RunningColor, RelativeSource={RelativeSource AncestorType=UserControl}}"/>
		</Style>
		<Style Selector="Ellipse.centerCompleted">
			<Setter Property="Fill" Value="{Binding CompletedColor, RelativeSource={RelativeSource AncestorType=UserControl}}"/>
		</Style>

		<!-- Label Styles -->
		<Style Selector="TextBlock">
			<Setter Property="Foreground" Value="{Binding PendingColor, RelativeSource={RelativeSource
												  AncestorType=UserControl}}"/>
		</Style>
		<Style Selector="TextBlock.completed">
			<Setter Property="Foreground" Value="{Binding CompletedColor, RelativeSource={RelativeSource AncestorType=UserControl}}"/>
		</Style>
		<Style Selector="TextBlock.running">
			<Setter Property="Foreground" Value="{Binding RunningColor, RelativeSource={RelativeSource AncestorType=UserControl}}"/>
		</Style>
	</UserControl.Styles>
	<Grid ColumnDefinitions="AUTO, *">
		
		<Ellipse Height="30" Width="30"
			 StrokeThickness="4" 
			 Fill="{StaticResource AKI_Background_Dark}"
			 HorizontalAlignment="Left"
			 Classes.running="{Binding IsRunning, RelativeSource={RelativeSource AncestorType=UserControl}}"
		     Classes.completed="{Binding IsCompleted, RelativeSource={RelativeSource AncestorType=UserControl}}"
			 />

		<Ellipse Height="20" Width="20"
				 Classes.centerRunning="{Binding IsRunning, RelativeSource={RelativeSource AncestorType=UserControl}}"
		         Classes.centerCompleted="{Binding IsCompleted, RelativeSource={RelativeSource AncestorType=UserControl}}"
				 />
		
		<TextBlock Grid.Column="1"
			   Text="{Binding TaskName, RelativeSource={RelativeSource AncestorType=UserControl}}"
			   Classes.running="{Binding IsRunning, RelativeSource={RelativeSource AncestorType=UserControl}}"
			   Classes.completed="{Binding IsCompleted, RelativeSource={RelativeSource AncestorType=UserControl}}"
			   FontWeight="SemiBold"
			   FontSize="15"
			   TextWrapping="Wrap"
			   VerticalAlignment="Center"
			   HorizontalAlignment="Left"
			   />
	</Grid>
</UserControl>