<Window x:Class="EarTrumpet.UI.Views.FlyoutWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:Event="clr-namespace:EarTrumpet.Extensions.EventBinding"
        xmlns:Theme="clr-namespace:EarTrumpet.UI.Themes"
        xmlns:b="clr-namespace:EarTrumpet.UI.Behaviors"
        xmlns:ctl="clr-namespace:EarTrumpet.UI.Controls"
        xmlns:resx="clr-namespace:EarTrumpet.Properties"
        xmlns:views="clr-namespace:EarTrumpet.UI.Views"
        xmlns:vm="clr-namespace:EarTrumpet.UI.ViewModels"
        Title="EarTrumpet"
        Width="{StaticResource WindowAndItemSize}"
        Theme:Brush.Foreground="Text"
        Theme:Options.Scope="Flyout"
        Theme:Options.Source="System"
        b:FrameworkElementEx.DisplaySettingsChanged="{Binding DisplaySettingsChanged}"
        b:FrameworkElementEx.FlowDirection="Auto"
        AllowsTransparency="True"
        Background="Transparent"
        Closing="{Event:Binding OnClosing}"
        Deactivated="{Event:Binding OnDeactivated}"
        Icon="{Binding Source={StaticResource EarTrumpetIconLight}}"
        PreviewKeyDown="{Event:Binding OnPreviewKeyDown}"
        ResizeMode="NoResize"
        ShowInTaskbar="False"
        SnapsToDevicePixels="True"
        TextOptions.TextFormattingMode="Display"
        UseLayoutRounding="True"
        WindowStyle="None">
    <Window.Resources>
        <Style x:Key="ExpandCollapseButtonStyle" TargetType="Button">
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="BorderThickness" Value="0" />
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
            <Setter Property="VerticalAlignment" Value="Top" />
            <Setter Property="Theme:Brush.Foreground" Value="Theme=Text, HighContrast=ControlText" />
            <Setter Property="FocusVisualStyle" Value="{StaticResource Windows10FocusVisualStyle}" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Border x:Name="border"
                                Background="{TemplateBinding Background}"
                                SnapsToDevicePixels="True">
                            <ContentPresenter RecognizesAccessKey="True" />
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="true">
                    <Setter Property="Theme:Brush.Background" Value="Theme=#20FFFFFF, HighContrast=Highlight" />
                    <Setter Property="Theme:Brush.Foreground" Value="Theme=ApplicationText{Theme}Theme, HighContrast=HighlightText" />
                </Trigger>
                <Trigger Property="IsPressed" Value="true">
                    <Setter Property="Theme:Brush.Background" Value="Theme=#2FFFFFFF, HighContrast=Highlight" />
                    <Setter Property="Theme:Brush.Foreground" Value="Theme=ApplicationText{Theme}Theme, HighContrast=HighlightText" />
                </Trigger>
                <MultiTrigger>
                    <MultiTrigger.Conditions>
                        <Condition Property="IsMouseOver" Value="True" />
                        <Condition Property="Theme:OS.IsWindows11" Value="True" />
                    </MultiTrigger.Conditions>
                    <MultiTrigger.Setters>
                        <Setter Property="Theme:Brush.Background" Value="Theme=Control{Theme}SelectHighlightHover, HighContrast=Highlight" />
                        <Setter Property="Theme:Brush.Foreground" Value="Theme=ApplicationText{Theme}Theme, HighContrast=HighlightText" />
                    </MultiTrigger.Setters>
                </MultiTrigger>
                <MultiTrigger>
                    <MultiTrigger.Conditions>
                        <Condition Property="IsPressed" Value="True" />
                        <Condition Property="Theme:OS.IsWindows11" Value="True" />
                    </MultiTrigger.Conditions>
                    <MultiTrigger.Setters>
                        <Setter Property="Theme:Brush.Background" Value="Theme=Control{Theme}SelectHighlightHover/0.20, HighContrast=Highlight" />
                        <Setter Property="Theme:Brush.Foreground" Value="Theme=ApplicationText{Theme}Theme, HighContrast=HighlightText" />
                    </MultiTrigger.Setters>
                </MultiTrigger>
            </Style.Triggers>
        </Style>

        <Style x:Key="{x:Type ScrollViewer}"
               BasedOn="{StaticResource {x:Type ScrollViewer}}"
               TargetType="{x:Type ScrollViewer}">
            <Setter Property="CanContentScroll" Value="True" />
            <Setter Property="PanningMode" Value="VerticalOnly" />
            <Setter Property="Focusable" Value="False" />
            <Setter Property="Margin" Value="0" />
        </Style>
        <DataTemplate DataType="{x:Type vm:DeviceViewModel}">
            <views:DeviceView Width="{StaticResource WindowAndItemSize}"
                              Device="{Binding}"
                              IsDisplayNameVisible="{Binding IsDisplayNameVisible}" />
        </DataTemplate>
    </Window.Resources>
    <Grid x:Name="LayoutRoot">
        <ScrollViewer Name="BaseVisual" VerticalScrollBarVisibility="Auto">
            <Grid Name="ContentGrid" VerticalAlignment="Top">

                <Border VerticalAlignment="Center" Theme:Brush.Background="FlyoutBackground">
                    <Border.Style>
                        <Style TargetType="Border">
                            <Setter Property="Visibility" Value="Collapsed" />
                            <Style.Triggers>
                                <DataTrigger Binding="{Binding Devices.Count}" Value="0">
                                    <Setter Property="Visibility" Value="Visible" />
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </Border.Style>
                    <TextBlock Margin="{StaticResource NoItemsPaneMargin}"
                               HorizontalAlignment="Center"
                               FontSize="{StaticResource {x:Static SystemFonts.MessageFontSizeKey}}"
                               Text="{x:Static resx:Resources.NoDevicesPanelContent}"
                               TextWrapping="Wrap" />
                </Border>
                <Grid>
                    <Grid.Style>
                        <Style TargetType="Grid">
                            <Style.Triggers>
                                <DataTrigger Binding="{Binding Devices.Count}" Value="0">
                                    <Setter Property="Visibility" Value="Collapsed" />
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </Grid.Style>
                    <ItemsControl Name="DevicesList"
                                  FocusVisualStyle="{x:Null}"
                                  IsTabStop="False"
                                  ItemsSource="{Binding Devices}" />
                    <Button Height="{DynamicResource Mutable_DeviceTitleCellHeight}"
                            Command="{Binding ExpandCollapse}"
                            IsEnabled="{Binding CanExpand}">
                        <Button.Style>
                            <Style BasedOn="{StaticResource ExpandCollapseButtonStyle}" TargetType="{x:Type Button}">
                                <Style.Triggers>
                                    <MultiDataTrigger>
                                        <MultiDataTrigger.Conditions>
                                            <Condition Binding="{Binding CanExpand}" Value="True" />
                                            <Condition Binding="{Binding IsExpanded}" Value="True" />
                                        </MultiDataTrigger.Conditions>
                                        <Setter Property="AutomationProperties.Name" Value="{x:Static resx:Resources.CollapseAccessibleText}" />
                                    </MultiDataTrigger>
                                    <MultiDataTrigger>
                                        <MultiDataTrigger.Conditions>
                                            <Condition Binding="{Binding CanExpand}" Value="True" />
                                            <Condition Binding="{Binding IsExpanded}" Value="False" />
                                        </MultiDataTrigger.Conditions>
                                        <Setter Property="AutomationProperties.Name" Value="{x:Static resx:Resources.ExpandAccessibleText}" />
                                    </MultiDataTrigger>
                                </Style.Triggers>
                            </Style>
                        </Button.Style>
                        <Button.Content>
                            <Grid>
                                <TextBlock Margin="12,0,32,0"
                                           HorizontalAlignment="Left"
                                           Theme:Brush.Foreground="{Binding (Theme:Brush.Foreground), RelativeSource={RelativeSource AncestorType=Button}}"
                                           Style="{StaticResource DeviceTitleTextStyle}"
                                           Text="{Binding DeviceNameText}"
                                           TextTrimming="CharacterEllipsis" />
                                <TextBlock Margin="{StaticResource WindowMargin}"
                                           HorizontalAlignment="Right"
                                           Theme:Brush.Foreground="{Binding (Theme:Brush.Foreground), RelativeSource={RelativeSource AncestorType=Button}}"
                                           FontSize="{DynamicResource Mutable_ExpandCollapseButtonGlyphFontSize}">
                                    <TextBlock.Style>
                                        <Style BasedOn="{StaticResource GlyphTextBlockStyle}" TargetType="{x:Type TextBlock}">
                                            <Style.Triggers>
                                                <MultiDataTrigger>
                                                    <MultiDataTrigger.Conditions>
                                                        <Condition Binding="{Binding CanExpand}" Value="True" />
                                                        <Condition Binding="{Binding IsExpanded}" Value="True" />
                                                    </MultiDataTrigger.Conditions>
                                                    <Setter Property="Text" Value="&#xe011;" />
                                                </MultiDataTrigger>
                                                <MultiDataTrigger>
                                                    <MultiDataTrigger.Conditions>
                                                        <Condition Binding="{Binding CanExpand}" Value="True" />
                                                        <Condition Binding="{Binding IsExpanded}" Value="False" />
                                                    </MultiDataTrigger.Conditions>
                                                    <Setter Property="Text" Value="&#xe010;" />
                                                </MultiDataTrigger>
                                            </Style.Triggers>
                                        </Style>
                                    </TextBlock.Style>
                                </TextBlock>
                            </Grid>
                        </Button.Content>
                    </Button>
                </Grid>
            </Grid>
        </ScrollViewer>
        <Border Name="LightDismissBorder"
                Theme:Brush.Background="Background"
                PreviewMouseDown="{Event:Binding OnLightDismissBorderPreviewMouseDown}">
            <Border.Style>
                <Style TargetType="{x:Type Border}">
                    <Setter Property="Visibility" Value="Collapsed" />
                    <Style.Triggers>
                        <MultiDataTrigger>
                            <MultiDataTrigger.Conditions>
                                <Condition Binding="{Binding Dialog.IsVisible}" Value="True" />
                                <Condition Binding="{Binding Source={StaticResource ThemeManager}, Path=AnimationsEnabled}" Value="True" />
                            </MultiDataTrigger.Conditions>
                            <MultiDataTrigger.EnterActions>
                                <StopStoryboard BeginStoryboardName="EnterLightDismiss_AnimationsOff" />
                                <StopStoryboard BeginStoryboardName="ExitLightDismiss_AnimationsOff" />
                                <BeginStoryboard Name="EnterLightDismiss_AnimationsOn">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetProperty="Opacity"
                                                         From="0"
                                                         To="1"
                                                         Duration="00:00:00.15" />
                                        <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.Visibility)">
                                            <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static Visibility.Visible}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </BeginStoryboard>
                            </MultiDataTrigger.EnterActions>
                            <MultiDataTrigger.ExitActions>
                                <StopStoryboard BeginStoryboardName="EnterLightDismiss_AnimationsOff" />
                                <StopStoryboard BeginStoryboardName="ExitLightDismiss_AnimationsOff" />
                                <BeginStoryboard Name="ExitLightDismiss_AnimationsOn">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetProperty="Opacity"
                                                         From="1"
                                                         To="0"
                                                         Duration="00:00:00.15" />
                                        <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.Visibility)">
                                            <DiscreteObjectKeyFrame KeyTime="00:00:00.15" Value="{x:Static Visibility.Collapsed}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </BeginStoryboard>
                            </MultiDataTrigger.ExitActions>
                        </MultiDataTrigger>

                        <MultiDataTrigger>
                            <MultiDataTrigger.Conditions>
                                <Condition Binding="{Binding Dialog.IsVisible}" Value="True" />
                                <Condition Binding="{Binding Source={StaticResource ThemeManager}, Path=AnimationsEnabled}" Value="False" />
                            </MultiDataTrigger.Conditions>
                            <MultiDataTrigger.EnterActions>
                                <StopStoryboard BeginStoryboardName="EnterLightDismiss_AnimationsOn" />
                                <StopStoryboard BeginStoryboardName="ExitLightDismiss_AnimationsOn" />
                                <BeginStoryboard Name="EnterLightDismiss_AnimationsOff">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.Visibility)">
                                            <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static Visibility.Visible}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </BeginStoryboard>
                            </MultiDataTrigger.EnterActions>
                            <MultiDataTrigger.ExitActions>
                                <StopStoryboard BeginStoryboardName="EnterLightDismiss_AnimationsOn" />
                                <StopStoryboard BeginStoryboardName="ExitLightDismiss_AnimationsOn" />
                                <BeginStoryboard Name="ExitLightDismiss_AnimationsOff">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.Visibility)">
                                            <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static Visibility.Collapsed}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </BeginStoryboard>
                            </MultiDataTrigger.ExitActions>
                        </MultiDataTrigger>
                    </Style.Triggers>
                </Style>
            </Border.Style>
            <Border Margin="0,0,0,14">
                <Border.Effect>
                    <BlurEffect KernelType="Gaussian"
                                Radius="{StaticResource WindowBlurRadius}"
                                RenderingBias="Performance" />
                </Border.Effect>
                <Border.Background>

                    <VisualBrush AlignmentX="Left"
                                 AlignmentY="Top"
                                 Stretch="UniformToFill"
                                 Visual="{Binding ElementName=BaseVisual}" />
                </Border.Background>
            </Border>
        </Border>
        <ctl:AppPopup IsOpen="{Binding Dialog.IsVisible, Mode=TwoWay}"
                      PlacementTarget="{Binding Dialog.Source}"
                      Style="{StaticResource AppPopup}">
            <ContentControl Content="{Binding Dialog.Focused}" />
        </ctl:AppPopup>
    </Grid>
</Window>
