<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        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" Style="{StaticResource Page_Style}">
    <Grid x:Name="ParentGrid">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <!--Main Section-->
        <Grid Margin="30,20,20,20" x:Name="SecondParentGrid">
            <Grid.RowDefinitions>
                <RowDefinition Height="auto"/>
                <RowDefinition Height="auto"/>
                <RowDefinition Height="auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <!--Counter Title-->
            <!-- Grid containing the Refresh Button -->
            <Grid x:Name="RefreshButtonGrid" Height="150" Grid.Row="0"
                  Margin="0,0,100,0">
                <!-- First Ellipse (Forward1) - Represents the outermost expanding ellipse when the button is clicked -->
                <!-- Initial height and Width of the Ellipse -->
                <Ellipse x:Name="EclipseForward1"
                    Height="50"
                    Width="50"
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center">
                    <!-- Ellipse Fill with a gradient from #ED4264 to #cbad6d -->
                    <Ellipse.Fill>
                        <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                            <GradientStop Color="#ED4264" Offset="0.0" />
                            <GradientStop Color="#cbad6d" Offset="1.0" />
                        </LinearGradientBrush>
                    </Ellipse.Fill>
                </Ellipse>
                <!-- Second Ellipse (Forward2) - Another expanding ellipse, but starts later than Forward1 -->
                <Ellipse x:Name="EclipseForward2"
    Height="50"
    Width="50"
    HorizontalAlignment="Center"
    VerticalAlignment="Center">
                    <Ellipse.Fill>
                        <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                            <GradientStop Color="#ED4264" Offset="0.0" />
                            <GradientStop Color="#cbad6d" Offset="1.0" />
                        </LinearGradientBrush>
                    </Ellipse.Fill>
                </Ellipse>
                <!-- Third Ellipse (Forward3) - Another expanding ellipse, starts even later -->
                <Ellipse x:Name="EclipseForward3"
    Height="50"
    Width="50"
    HorizontalAlignment="Center"
    VerticalAlignment="Center">
                    <Ellipse.Fill>
                        <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                            <GradientStop Color="#ED4264" Offset="0.0" />
                            <GradientStop Color="#cbad6d" Offset="1.0" />
                        </LinearGradientBrush>
                    </Ellipse.Fill>
                </Ellipse>
                <!-- First Ellipse (Backward1) - Represents the outermost contracting ellipse when the button is unchecked -->
                <Ellipse x:Name="EclipseBackward1"
    Height="50"
    Width="50"
    HorizontalAlignment="Center"
    VerticalAlignment="Center">
                    <!-- Ellipse Fill with a gradient from #ef32d9 to #89fffd -->
                    <Ellipse.Fill>
                        <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                            <GradientStop Color="#ef32d9" Offset="0.0" />
                            <GradientStop Color="#89fffd" Offset="1.0" />
                        </LinearGradientBrush>
                    </Ellipse.Fill>
                </Ellipse>
                <!-- Second Ellipse (Backward2) - Another contracting ellipse, starts later than Backward1 -->
                <Ellipse x:Name="EclipseBackward2"
    Height="50"
    Width="50"
    HorizontalAlignment="Center"
    VerticalAlignment="Center">
                    <Ellipse.Fill>
                        <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                            <GradientStop Color="#ef32d9" Offset="0.0" />
                            <GradientStop Color="#89fffd" Offset="1.0" />
                        </LinearGradientBrush>
                    </Ellipse.Fill>
                </Ellipse>
                <!-- Third Ellipse (Backward3) - Another contracting ellipse, starts even later -->
                <Ellipse x:Name="EclipseBackward3"
    Height="50"
    Width="50"
    HorizontalAlignment="Center"
    VerticalAlignment="Center">
                    <Ellipse.Fill>
                        <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                            <GradientStop Color="#ef32d9" Offset="0.0" />
                            <GradientStop Color="#89fffd" Offset="1.0" />
                        </LinearGradientBrush>
                    </Ellipse.Fill>
                </Ellipse>
                <!-- Refresh Toggle Button - The main button in the center -->
                <ToggleButton x:Name="RefreshButton"
         Height="55"
         Width="55"
         HorizontalAlignment="Center"
         VerticalAlignment="Center" >
                    <ToggleButton.Template>
                        <ControlTemplate TargetType="ToggleButton">
                            <!-- Border around the button with rounded corners -->
                            <Border x:Name="border"
               Background="Transparent"
               CornerRadius="30">
                                <Grid x:Name="RefreshButtonIconImageGrid">
                                    <!-- Button icon image centered inside the button -->
                                    <Image x:Name="RefreshIconImage" Source="icon.png"
                      Stretch="None" HorizontalAlignment="Center" VerticalAlignment="Center" />
                                </Grid>
                            </Border>
                            <!-- Triggers for visual states (hover, checked) -->
                            <ControlTemplate.Triggers>
                                <!-- Mouse hover trigger -->
                                <Trigger Property="IsMouseOver" Value="True">
                                    <Setter Property="Background" TargetName="border">
                                        <Setter.Value>
                                            <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                                                <GradientStop Color="#ED4264" Offset="0.0" />
                                                <GradientStop Color="#cbad6d" Offset="1.0" />
                                            </LinearGradientBrush>
                                        </Setter.Value>
                                    </Setter>
                                </Trigger>
                                <!-- Button checked trigger -->
                                <Trigger Property="IsChecked" Value="True">
                                    <Setter Property="Background" TargetName="border">
                                        <Setter.Value>
                                            <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                                                <GradientStop Color="#ED4264" Offset="0.0" />
                                                <GradientStop Color="#cbad6d" Offset="1.0" />
                                            </LinearGradientBrush>
                                        </Setter.Value>
                                    </Setter>
                                </Trigger>
                                <!-- MultiTrigger: Hovering while the button is unchecked -->
                                <MultiTrigger>
                                    <MultiTrigger.Conditions>
                                        <Condition Property="IsMouseOver" Value="True" />
                                        <Condition Property="IsChecked" Value="False" />
                                    </MultiTrigger.Conditions>
                                    <Setter Property="Background" TargetName="border">
                                        <Setter.Value>
                                            <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                                                <GradientStop Color="#ef32d9" Offset="0.0" />
                                                <GradientStop Color="#89fffd" Offset="1.0" />
                                            </LinearGradientBrush>
                                        </Setter.Value>
                                    </Setter>
                                </MultiTrigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </ToggleButton.Template>
                    <!-- Triggers for button actions (Checked, Unchecked) -->
                    <ToggleButton.Triggers>
                        <!-- When the button is checked (clicked) -->
                        <EventTrigger RoutedEvent="ToggleButton.Checked">
                            <EventTrigger.Actions>
                                <!-- Start the forward expanding animations -->
                                <BeginStoryboard x:Name="Ellipse_Activated">
                                    <Storyboard>
                                        <!-- Forward1 Animation (Expanding and fading out) -->
                                        <DoubleAnimation BeginTime="00:00:00"
                                    Duration="00:00:01.5"
                                    From="50"
                                    To="150"
                                    Storyboard.TargetProperty="(Ellipse.Width)"
                                    Storyboard.TargetName="EclipseForward1"
                                    RepeatBehavior="Forever" />
                                        <DoubleAnimation BeginTime="00:00:00"
                                    Duration="00:00:01.5"
                                    From="50"
                                    To="150"
                                    Storyboard.TargetProperty="(Ellipse.Height)"
                                    Storyboard.TargetName="EclipseForward1"
                                    RepeatBehavior="Forever" />
                                        <DoubleAnimation Storyboard.TargetProperty="Opacity"
                                    Storyboard.TargetName="EclipseForward1"
                                    From="1.0"
                                    To="0.0"
                                    BeginTime="00:00:00"
                                    Duration="00:00:01.5"
                                    RepeatBehavior="Forever" />
                                        <!-- Forward2 Animation (Starts 1 second later) -->
                                        <DoubleAnimation BeginTime="00:00:00.5"
                                    Duration="00:00:01.5"
                                    From="50"
                                    To="150"
                                    Storyboard.TargetProperty="(Ellipse.Width)"
                                    Storyboard.TargetName="EclipseForward2"
                                    RepeatBehavior="Forever" />
                                        <DoubleAnimation BeginTime="00:00:00.5"
                                    Duration="00:00:01.5"
                                    From="50"
                                    To="150"
                                    Storyboard.TargetProperty="(Ellipse.Height)"
                                    Storyboard.TargetName="EclipseForward2"
                                    RepeatBehavior="Forever" />
                                        <DoubleAnimation Storyboard.TargetProperty="Opacity"
                                    Storyboard.TargetName="EclipseForward2"
                                    From="1.0"
                                    To="0.0"
                                    BeginTime="00:00:00.5"
                                    Duration="00:00:01.5"
                                    RepeatBehavior="Forever" />
                                        <!-- Forward3 Animation (Starts 2 seconds later) -->
                                        <DoubleAnimation BeginTime="00:00:01"
                                    Duration="00:00:01.5"
                                    From="50"
                                    To="150"
                                    Storyboard.TargetProperty="(Ellipse.Width)"
                                    Storyboard.TargetName="EclipseForward3"
                                    RepeatBehavior="Forever" />
                                        <DoubleAnimation BeginTime="00:00:01"
                                    Duration="00:00:01.5"
                                    From="50"
                                    To="150"
                                    Storyboard.TargetProperty="(Ellipse.Height)"
                                    Storyboard.TargetName="EclipseForward3"
                                    RepeatBehavior="Forever" />
                                        <DoubleAnimation Storyboard.TargetProperty="Opacity"
                                    Storyboard.TargetName="EclipseForward3"
                                    From="1.0"
                                    To="0.0"
                                    BeginTime="00:00:01"
                                    Duration="00:00:01.5"
                                    RepeatBehavior="Forever" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger.Actions>
                        </EventTrigger>
                        <!-- When the button is unchecked -->
                        <EventTrigger RoutedEvent="ToggleButton.Unchecked">
                            <EventTrigger.Actions>
                                <!-- Stop the forward animation -->
                                <RemoveStoryboard BeginStoryboardName="Ellipse_Activated" />
                                <!-- Start the backward contracting animations -->
                                <BeginStoryboard x:Name="Ellipse_Deactivated">
                                    <Storyboard>
                                        <!-- Backward1 Animation (Contracting and fading in) -->
                                        <DoubleAnimation BeginTime="00:00:00"
                                    Duration="00:00:01.5"
                                    From="150"
                                    To="50"
                                    Storyboard.TargetProperty="(Ellipse.Width)"
                                    Storyboard.TargetName="EclipseBackward1" />
                                        <DoubleAnimation BeginTime="00:00:00"
                                    Duration="00:00:01.5"
                                    From="150"
                                    To="50"
                                    Storyboard.TargetProperty="(Ellipse.Height)"
                                    Storyboard.TargetName="EclipseBackward1" />
                                        <DoubleAnimation Storyboard.TargetProperty="Opacity"
                                    Storyboard.TargetName="EclipseBackward1"
                                    From="0.0"
                                    To="1.0"
                                    BeginTime="00:00:00"
                                    Duration="00:00:01.5" />
                                        <!-- Backward2 Animation (Starts 1 second later) -->
                                        <DoubleAnimation BeginTime="00:00:00"
                                    Duration="00:00:01"
                                    From="125"
                                    To="50"
                                    Storyboard.TargetProperty="(Ellipse.Width)"
                                    Storyboard.TargetName="EclipseBackward2" />
                                        <DoubleAnimation BeginTime="00:00:00"
                                    Duration="00:00:01"
                                    From="125"
                                    To="50"
                                    Storyboard.TargetProperty="(Ellipse.Height)"
                                    Storyboard.TargetName="EclipseBackward2" />
                                        <DoubleAnimation Storyboard.TargetProperty="Opacity"
                                    Storyboard.TargetName="EclipseBackward2"
                                    From="0.0"
                                    To="1.0"
                                    BeginTime="00:00:00"
                                    Duration="00:00:01" />
                                        <!-- Backward3 Animation (Starts 2 seconds later) -->
                                        <DoubleAnimation BeginTime="00:00:00"
                                    Duration="00:00:00.5"
                                    From="100"
                                    To="50"
                                    Storyboard.TargetProperty="(Ellipse.Width)"
                                    Storyboard.TargetName="EclipseBackward3" />
                                        <DoubleAnimation BeginTime="00:00:00"
                                    Duration="00:00:00.5"
                                    From="100"
                                    To="50"
                                    Storyboard.TargetProperty="(Ellipse.Height)"
                                    Storyboard.TargetName="EclipseBackward3" />
                                        <DoubleAnimation Storyboard.TargetProperty="Opacity"
                                    Storyboard.TargetName="EclipseBackward3"
                                    From="0.0"
                                    To="1.0"
                                    BeginTime="00:00:00"
                                    Duration="00:00:00.5" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger.Actions>
                        </EventTrigger>
                    </ToggleButton.Triggers>
                </ToggleButton>
            </Grid>
            <!--End of Refresh Button Grid-->
            <StackPanel Orientation="Vertical" VerticalAlignment="Center" Grid.Row="0" HorizontalAlignment="Right">
                <Label Content="Optional: Select Categories to Verify" Style="{StaticResource ModernLabelStyle}"
     VerticalAlignment="Top"  Margin="50,0,50,10"/>
                <!-- Compliance Categories Selection ComboBox -->
                <ComboBox x:Name="ComplianceCategoriesSelectionComboBox"
Width="200" Margin="50,0,50,0" VerticalAlignment="Bottom"
Style="{StaticResource ModernComboBoxStyle}"
ItemContainerStyle="{StaticResource ModernComboBoxItemStyle}" ></ComboBox>
            </StackPanel>
            <TextBlock x:Name="TotalCountTextBlock" Grid.Row="1" FontSize="18" FontWeight="SemiBold" Foreground="#121518" HorizontalAlignment="Left" VerticalAlignment="Center"/>
            <TextBlock Text="Filter by" Grid.Row="1" FontSize="13" FontWeight="SemiBold" Margin="0 0 215 0" Foreground="#121518" HorizontalAlignment="Right" VerticalAlignment="Center"/>
            <!--Filter Textbox-->
            <Grid Width="200" HorizontalAlignment="Right" Grid.Row="1">
                <TextBlock Margin="15 0" VerticalAlignment="Center" Foreground="#B0B9C6" IsHitTestVisible="False"
                        Panel.ZIndex="1"
                        Visibility="{Binding ElementName=textBoxFilter, Path=Text.IsEmpty}" />
                <TextBox Name="textBoxFilter" Style="{StaticResource filterTextBox}" />
            </Grid>
            <!--Toggle buttons and textblocks rows-->
            <StackPanel Orientation="Horizontal" Grid.Row="2" Margin="0,0,0,20">
                <StackPanel Orientation="Horizontal" Margin="0,0,40,0">
                    <TextBlock x:Name="CompliantItemsTextBlock" Text="Compliant Items"
               FontSize="15" FontWeight="SemiBold" Foreground="#121518"
               HorizontalAlignment="Left" VerticalAlignment="Center" Margin="0,0,10,0" />
                    <ToggleButton x:Name="CompliantItemsToggleButton" VerticalAlignment="Center"
                HorizontalAlignment="Center"
                Width="75" Height="27.5"
                Template="{DynamicResource ConfirmationPageToggleButtonStyle}"/>
                </StackPanel>
                <StackPanel Orientation="Horizontal" Margin="0,0,30,0">
                    <!-- Add some margin to the right -->
                    <TextBlock x:Name="NonCompliantItemsTextBlock" Text="Non-Compliant Items"
               FontSize="15" FontWeight="SemiBold" Foreground="#121518"
               HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,0,10,0"/>
                    <ToggleButton x:Name="NonCompliantItemsToggleButton" VerticalAlignment="Center"
               HorizontalAlignment="Center"
               Width="75" Height="27.5"
               Template="{DynamicResource ConfirmationPageToggleButtonStyle}"/>
                </StackPanel>
                <TextBlock x:Name="TotalCurrentlyDisplayedSecOps" FontSize="15" FontWeight="SemiBold" Foreground="#121518"
HorizontalAlignment="Right" VerticalAlignment="Center"/>
            </StackPanel>

            <!--SecOps Data Grid-->
            <DataGrid Grid.Row="3" AutoGenerateColumns="False" RowStyle="{DynamicResource ConfirmationDataGridStyleOfRow}" ColumnHeaderStyle="{DynamicResource DataGridColumnHeaderStyle1}" CellStyle="{DynamicResource DataGridCellStyle1}" x:Name="SecOpsDataGrid" Style="{DynamicResource ConfirmationDataGridStyle}">
                <!-- DataGrid Columns Definitions -->
                <DataGrid.Columns>
                    <DataGridTextColumn Header="Friendly Name" Binding="{Binding FriendlyName}" IsReadOnly="True" Width="3*" />
                    <!-- Column to Display Character Images based on Compliance -->
                    <DataGridTemplateColumn Header="Compliant" IsReadOnly="True" Width="*">
                        <DataGridTemplateColumn.CellTemplate>
                            <DataTemplate>
                                <Image Source="{Binding CharacterImage}" Width="32" Height="32" HorizontalAlignment="Left" />
                            </DataTemplate>
                        </DataGridTemplateColumn.CellTemplate>
                    </DataGridTemplateColumn>
                    <!--
                        <StackPanel Orientation="Horizontal"><Border Width="25" Height="25" CornerRadius="50" Margin="0 0 10 0" Background="{Binding BgColor}"><Image Source="{Binding CharacterImage}" Width="20" Height="20" VerticalAlignment="Center" HorizontalAlignment="Center"/></Border><TextBlock Text="{Binding FriendlyName}" VerticalAlignment="Center"/></StackPanel>
                        -->
                    <!-- Column to Display Category with Background Color -->
                    <DataGridTextColumn Header="Category" Binding="{Binding Category}" IsReadOnly="True" Width="2*">
                        <DataGridTextColumn.ElementStyle>
                            <Style TargetType="TextBlock">
                                <Setter Property="Background" Value="{Binding BgColor}" />
                            </Style>
                        </DataGridTextColumn.ElementStyle>
                    </DataGridTextColumn>
                    <!-- Other Columns -->
                    <DataGridTextColumn Header="Method" Binding="{Binding Method}" IsReadOnly="True" Width="*" />
                    <DataGridTextColumn Header="Value" Binding="{Binding Value}" IsReadOnly="True" Width="3*" />
                    <!-- takes too much unnecessary space -->
                    <!--  <DataGridTextColumn Header="Name" Binding="{Binding Name}" IsReadOnly="True" Width="*" /> -->
                </DataGrid.Columns>
            </DataGrid>
        </Grid>
    </Grid>
</UserControl>