<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:noesis="clr-namespace:NoesisGUIExtensions;assembly=Noesis.GUI.Extensions">

    <!-- HEALTH BAR ASSETS -->
    <Image x:Key="HealthBarIcon" Source="../Textures/HUD/HealthBar/IconHealth.png" Stretch="UniformToFill"/>
    <ImageBrush x:Key="HealthBarBackground" ImageSource="../Textures/HUD/HealthBar/HealthBarBackground.png" TileMode="None" Stretch="None"/>
    <ImageBrush x:Key="HealthBarFill" ImageSource="../Textures/HUD/HealthBar/HealthBarFill.png" TileMode="None" Stretch="None"/>
    <SolidColorBrush  x:Key="HealthBarDrainBackground" Color="#FFFFFFFF"/>


    <!-- HEALTH BAR TEMPLATE -->
    <!--////////////////////////////////////////////////////////////////////-->

    <Style x:Key="HealthBarStyle" TargetType="{x:Type ProgressBar}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ProgressBar}">
                    <Grid x:Name="HealthBarLayout" SnapsToDevicePixels="True">

                        <!-- STATE MANAGER -->
                        <!-- This part defines the health bar's states and the animations they trigger -->
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup Name="HealthBarStates">

                                <VisualStateGroup.Transitions>
                                    <VisualTransition GeneratedDuration="0:0:0.1" From="Damaged" To="Normal">
                                        <!-- When we transition back to Normal state we trigger an animation that reduces the opacity
                                             of the HealthBarNotch to hide it from view -->
                                            <Storyboard>
                                                <DoubleAnimation
                                                        Storyboard.TargetName="HealthBarNotch"
                                                        Storyboard.TargetProperty="Opacity"
                                                        To="0.0"
                                                        BeginTime="0:0:0"
                                                        Duration="0:0:0.1">
                                                </DoubleAnimation>
                                            </Storyboard>
                                    </VisualTransition>

                                </VisualStateGroup.Transitions>

                                <!-- NORMAL STATE -->
                                <VisualState Name="Normal"/>

                                <!-- DAMAGED STATE -->
                                <VisualState Name="Damaged">
                                    <Storyboard Duration="0:0:0.4">
                                        <!-- This animation sets the opacity of the HealthBarNotch to 1.0 to show it in view -->
                                        <DoubleAnimation
                                                Storyboard.TargetName="HealthBarNotch"
                                                Storyboard.TargetProperty="Opacity"
                                                To="1.0"
                                                BeginTime="0:0:0"
                                                Duration="0:0:0.4">
                                            <DoubleAnimation.EasingFunction>
                                                <QuarticEase EasingMode="EaseOut"/>
                                            </DoubleAnimation.EasingFunction>
                                        </DoubleAnimation>
                                    </Storyboard>
                                </VisualState>

                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>

                        <!-- GRID LAYOUT -->
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="40"/>
                            <ColumnDefinition Width="280"/>
                        </Grid.ColumnDefinitions>

                        <!-- FILL SECTION -->
                        <!-- This is the part that grows or shrinks based on the value. It is very important to conserve the PART_Indicator name or it will break -->
                        <Grid x:Name="PART_Indicator" HorizontalAlignment="Left" Grid.Column="1">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>

                            <Viewbox Stretch="None" Grid.Column="0">
                                <Path Fill="{StaticResource HealthBarFill}"
                                      Data="F1 M 0.000,0.000 L 271.000,0.000 L 280.000,12.000 L 271.000,24.000 L 0.000,24.000 L 0.000,0.000 Z"/>
                            </Viewbox>

                            <!-- This renders the white notch that appears when the value is below 1 -->
                            <Border x:Name="HealthBarNotch"
                                    BorderThickness="0,0,2,0"
                                    BorderBrush="White"
                                    Width="48"
                                    Height="24"
                                    HorizontalAlignment="Right"
                                    VerticalAlignment="Center"
                                    Opacity="0.0"
                                    Grid.Column="0">
                                <Border.Background>
                                    <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                                        <GradientStop Color="#00F5D5D5" Offset="0.0" />
                                        <GradientStop Color="#04F5D5D5" Offset="0.9" />
                                    </LinearGradientBrush>
                                </Border.Background>
                            </Border>
                        </Grid>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <!-- ANIMATION -->
    <!-- This animation is triggered when the value of the Health.CurrentFactor changes.
         It animates the fill of the bar to shrink and grow with a smooth linear interpolation for 600ms
         The trigger is defined in LocalPlayerCard.xaml in the HealthBar element -->

    <Storyboard x:Key="HealthBarAnimation">
        <DoubleAnimation
                Storyboard.TargetName="HealthBar"
                Storyboard.TargetProperty="Value"
                To="{Binding LocalPlayerCard.Health.CurrentFactor}"
                BeginTime="0:0:0"
                Duration="0:0:0.6">
            <DoubleAnimation.EasingFunction>
                <QuarticEase EasingMode="EaseOut"/>
            </DoubleAnimation.EasingFunction>
        </DoubleAnimation>
    </Storyboard>

    <!-- HEALTH BAR (DRAINING) TEMPLATE -->
    <!--////////////////////////////////////////////////////////////////////-->

    <Style x:Key="HealthBarDrainingStyle" TargetType="{x:Type ProgressBar}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ProgressBar}">
                    <Grid x:Name="HealthBarDrainLayout" SnapsToDevicePixels="True">

                        <!-- GRID LAYOUT -->
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="40"/>
                            <ColumnDefinition Width="280"/>
                        </Grid.ColumnDefinitions>

                        <!-- FILL SECTION -->
                        <!-- This is the part that grows or shrinks based on the value. It is very important to conserve the PART_Indicator name or it will break -->
                        <Grid x:Name="PART_Indicator" HorizontalAlignment="Left" Grid.Column="1">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>

                            <Viewbox Stretch="None" Grid.Column="0">
                                <Path Fill="{StaticResource HealthBarDrainBackground}"
                                      Data="F1 M 0.000,0.000 L 271.000,0.000 L 280.000,12.000 L 271.000,24.000 L 0.000,24.000 L 0.000,0.000 Z"/>
                            </Viewbox>
                        </Grid>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <!-- ANIMATION -->
    <!-- This animation is triggered when the value of the Health.CurrentFactor changes.
    The slight delay of 800ms allows for the draining bar to appear frozen for a bit when the player
    takes damage -->
    <Storyboard x:Key="HealthBarDrainAnimation">
        <DoubleAnimation
                Storyboard.TargetName="HealthBarDrain"
                Storyboard.TargetProperty="Value"
                To="{Binding LocalPlayerCard.Health.CurrentFactor}"
                BeginTime="0:0:0"
                Duration="0:0:0.6">
            <DoubleAnimation.EasingFunction>
                <QuarticEase EasingMode="EaseOut"/>
            </DoubleAnimation.EasingFunction>
        </DoubleAnimation>
    </Storyboard>

    <!-- This animation makes the draining bar vanish when the player takes damage-->
    <Storyboard x:Key="HealthBarDrainHideAnimation" Duration="0:0:1">
        <DoubleAnimationUsingKeyFrames
				Storyboard.TargetName="HealthBarDrain"
				Storyboard.TargetProperty="Opacity"
				Duration="0:0:1">
					<LinearDoubleKeyFrame Value="1" KeyTime="0:0:0.5" />
					<LinearDoubleKeyFrame Value="0" KeyTime="0:0:1.0" />
			</DoubleAnimationUsingKeyFrames>
    </Storyboard>

    <!-- /////////////////////////////////////////////////// -->

    <!-- HEALTH BAR NAMEPLATE TEMPLATE -->
    <!--////////////////////////////////////////////////////////////////////-->
    <ControlTemplate x:Key="Template.HealthBar.Nameplate" TargetType="{x:Type ProgressBar}">
        <Grid
            x:Name="Root"
            SnapsToDevicePixels="True">

            <!-- STROKE SECTION -->
            <!-- This part displays a stroke around the progress bar to ensure it is visible against any background -->
            <Grid>
                <Canvas Height="10" Width="146">
                    <Path
                        Data="F1M0,4 4,0H140L144,4 140,8H4L0,4z"
                        Stretch="Fill"
                        Height="10"
                        Width="146"
                        Canvas.Top="0"
                        Canvas.Left="0"
                        Clip="M-1,0 150,0 150,10 -1,10z"
                        StrokeThickness="2">

                        <Path.Stroke>
                            <SolidColorBrush Color="#FF5F1307" Opacity="0.7"/>
                        </Path.Stroke>
                    </Path>
                </Canvas>
            </Grid>

            <Grid Margin="1,0,0,0">
                <!-- BASE SECTION -->
                <!-- This part serves as the backer for the progress bar. It is very important to conserve the PART_Track name or it will break -->
                <Grid x:Name="PART_Track" HorizontalAlignment="Left" Visibility="Visible" VerticalAlignment="Center">
                    <Viewbox Stretch="None" Visibility="Visible">
                        <Canvas Height="8" Width="144">
                            <Path
                                Data="F1M0,4 4,0H140L144,4 140,8H4L0,4z"
                                Fill="#341611"
                                Stretch="Fill"
                                Height="8"
                                Width="144"
                                Canvas.Left="0"
                                Canvas.Top="0"/>
                        </Canvas>
                    </Viewbox>
                </Grid>

                <!-- FILL SECTION -->
                <!-- This is the part that grows or shrinks based on the value. It is very important to conserve the PART_Indicator name or it will break -->
                <Grid x:Name="PART_Indicator" HorizontalAlignment="Left" VerticalAlignment="Center">
                    <Viewbox Stretch="None">
                        <Canvas Height="8" Width="144">
                            <Path
                                Data="F1M0,4 4,0H140L144,4 140,8H4L0,4z"
                                Stretch="Fill"
                                Height="8"
                                Width="144"
                                Canvas.Left="0"
                                Canvas.Top="0">

                                <Path.Fill>
                                    <LinearGradientBrush StartPoint="144,4" EndPoint="0,4" MappingMode="Absolute">
                                        <GradientStop Color="#FFE84E47" Offset="0"/>
                                        <GradientStop Color="#FFDA3465" Offset="1"/>
                                    </LinearGradientBrush>
                                </Path.Fill>
                            </Path>

                            <Path
                                Data="F1M0.707107,4 4.20711,0.5H139.793L143.293,4 139.793,7.5H4.20711L0.707107,4z"
                                Stretch="Fill"
                                Height="8"
                                Width="143.58589"
                                Canvas.Left="0.20709229"
                                Canvas.Top="0"
                                Stroke="#5AEBEBEB"/>
                        </Canvas>
                    </Viewbox>
                </Grid>
            </Grid>
        </Grid>
    </ControlTemplate>

    <Style x:Key="Style.HealthBar.Nameplate" TargetType="{x:Type ProgressBar}">
        <Setter Property="Template" Value="{StaticResource Template.HealthBar.Nameplate}"/>
    </Style>
</ResourceDictionary>
