<local:NavigablePage
    x:Class="Microsoft.PowerToys.Settings.UI.Views.CmdPalPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:controls="using:Microsoft.PowerToys.Settings.UI.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="using:Microsoft.PowerToys.Settings.UI.Helpers"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:ptcontrols="using:Microsoft.PowerToys.Common.UI.Controls"
    xmlns:tkcontrols="using:CommunityToolkit.WinUI.Controls"
    xmlns:ui="using:CommunityToolkit.WinUI"
    AutomationProperties.LandmarkType="Main"
    mc:Ignorable="d">
    <Grid>
        <ScrollViewer AutomationProperties.AutomationId="PageScrollViewer">
            <!--  Wrapper Grid required to work around WinUI ScrollViewer + MaxWidth layout offset issue. Do not remove.  -->
            <Grid>
                <Grid
                    MaxWidth="{StaticResource PageMaxWidth}"
                    Padding="16,0,16,0"
                    VerticalAlignment="Top"
                    Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
                    BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
                    BorderThickness="1"
                    CornerRadius="16"
                    RowSpacing="8">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>
                    <tkcontrols:OpacityMaskView
                        Margin="-16,0,-16,0"
                        HorizontalAlignment="Stretch"
                        HorizontalContentAlignment="Stretch">
                        <tkcontrols:OpacityMaskView.OpacityMask>
                            <Rectangle>
                                <Rectangle.Fill>
                                    <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                                        <GradientStop Offset="0.80" Color="Black" />
                                        <GradientStop Offset="0.90" Color="#80000000" />
                                        <GradientStop Offset="0.99" Color="Transparent" />
                                    </LinearGradientBrush>
                                </Rectangle.Fill>
                            </Rectangle>
                        </tkcontrols:OpacityMaskView.OpacityMask>
                        <Grid MaxHeight="560">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="*" />
                            </Grid.RowDefinitions>
                            <Grid.Background>
                                <ImageBrush ImageSource="/Assets/Settings/Modules/Wallpaper.png" />
                            </Grid.Background>
                            <Grid Height="28" RequestedTheme="Dark">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*" />
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>
                                <Grid
                                    Grid.ColumnSpan="3"
                                    Background="{ThemeResource AcrylicBackgroundFillColorDefaultBrush}"
                                    Opacity="0.6" />

                                <Viewbox
                                    Height="20"
                                    Margin="4,0,0,0"
                                    HorizontalAlignment="Left">
                                    <Image Source="/Assets/Settings/CmdPal/Dock-Left.png" />
                                </Viewbox>

                                <Viewbox Grid.Column="1" Height="24">
                                    <Image Source="/Assets/Settings/CmdPal/Dock-Center.png" />
                                </Viewbox>

                                <Viewbox
                                    Grid.Column="2"
                                    Height="24"
                                    Margin="0,0,4,0"
                                    HorizontalAlignment="Right">
                                    <Image Source="/Assets/Settings/CmdPal/Dock-Right.png" />
                                </Viewbox>
                            </Grid>
                            <TextBlock
                                x:Uid="CmdPal_HeroTitle"
                                Grid.Row="1"
                                Margin="0,24,0,4"
                                HorizontalAlignment="Center"
                                FontSize="36"
                                FontWeight="Bold"
                                RequestedTheme="Dark">
                                <TextBlock.Foreground>
                                    <LinearGradientBrush StartPoint="0,1" EndPoint="1,0">
                                        <GradientStop Offset="0" Color="#978D9B" />
                                        <GradientStop Offset="1" Color="#415A69" />
                                    </LinearGradientBrush>
                                </TextBlock.Foreground>
                            </TextBlock>
                            <StackPanel
                                Grid.Row="2"
                                Orientation="Vertical"
                                Spacing="8">
                                <TextBlock
                                    x:Uid="CmdPal_Description"
                                    HorizontalAlignment="Center"
                                    FontSize="12"
                                    Foreground="#313131"
                                    RequestedTheme="Dark"
                                    TextAlignment="Center"
                                    TextWrapping="Wrap" />

                                <HyperlinkButton
                                    x:Uid="LearnMore_CmdPalContent"
                                    Padding="0"
                                    HorizontalAlignment="Center"
                                    FontSize="12"
                                    NavigateUri="https://aka.ms/PowerToysOverview_CmdPal" />
                            </StackPanel>

                            <Grid
                                Grid.Row="3"
                                Width="480"
                                Margin="0,32,0,0"
                                HorizontalAlignment="Center"
                                VerticalAlignment="Top"
                                Background="{ThemeResource AcrylicBackgroundFillColorDefaultBrush}"
                                BorderBrush="{ThemeResource SurfaceStrokeColorDefaultBrush}"
                                BorderThickness="1"
                                CornerRadius="{StaticResource OverlayCornerRadius}"
                                RequestedTheme="Dark">
                                <Image Source="/Assets/Settings/CmdPal/CmdPal.png" Stretch="Uniform" />
                            </Grid>

                        </Grid>
                    </tkcontrols:OpacityMaskView>

                    <Grid
                        Grid.Row="1"
                        Margin="0,-12,0,24"
                        ColumnSpacing="32"
                        RowSpacing="8">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
                        <FontIcon
                            HorizontalAlignment="Center"
                            Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                            Glyph="&#xEA86;" />
                        <TextBlock
                            Grid.Row="1"
                            HorizontalAlignment="Center"
                            TextAlignment="Center"
                            TextWrapping="Wrap">
                            <Run x:Uid="CmdPal_ExtensibleHeader" FontWeight="SemiBold" /> <LineBreak />
                            <Run
                                x:Uid="CmdPal_ExtensibleDescription"
                                FontSize="12"
                                Foreground="{ThemeResource TextFillColorSecondaryBrush}" />
                        </TextBlock>

                        <FontIcon
                            Grid.Column="1"
                            HorizontalAlignment="Center"
                            Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                            Glyph="&#xE945;" />
                        <TextBlock
                            Grid.Row="1"
                            Grid.Column="1"
                            HorizontalAlignment="Center"
                            TextAlignment="Center"
                            TextWrapping="Wrap">
                            <Run x:Uid="CmdPal_FastHeader" FontWeight="SemiBold" /> <LineBreak />
                            <Run
                                x:Uid="CmdPal_FastDescription"
                                FontSize="12"
                                Foreground="{ThemeResource TextFillColorSecondaryBrush}" />
                        </TextBlock>

                        <FontIcon
                            Grid.Column="2"
                            HorizontalAlignment="Center"
                            Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                            Glyph="&#xE790;" />
                        <TextBlock
                            Grid.Row="1"
                            Grid.Column="2"
                            HorizontalAlignment="Center"
                            TextAlignment="Center"
                            TextWrapping="Wrap">
                            <Run x:Uid="CmdPal_ModernHeader" FontWeight="SemiBold" /> <LineBreak />
                            <Run
                                x:Uid="CmdPal_ModernDescription"
                                FontSize="12"
                                Foreground="{ThemeResource TextFillColorSecondaryBrush}" />
                        </TextBlock>
                    </Grid>
                    <StackPanel
                        Grid.Row="2"
                        Margin="0,8,0,0"
                        Orientation="Vertical"
                        Spacing="{StaticResource SettingsCardSpacing}">
                        <controls:GPOInfoControl ShowWarning="{x:Bind ViewModel.IsEnabledGpoConfigured, Mode=OneWay}">
                            <tkcontrols:SettingsCard
                                Name="CmdPalEnableCmdPal"
                                x:Uid="CmdPal_Enable_CmdPal"
                                HorizontalAlignment="Stretch"
                                HeaderIcon="{ui:BitmapIcon Source=/Assets/Settings/Icons/CmdPal.png}">
                                <ToggleSwitch IsOn="{x:Bind ViewModel.IsEnabled, Mode=TwoWay}" />
                            </tkcontrols:SettingsCard>
                        </controls:GPOInfoControl>
                        <tkcontrols:SettingsCard
                            x:Uid="CmdPal_Launch"
                            Grid.Row="3"
                            ActionIcon="{ui:FontIcon Glyph=&#xE8A7;}"
                            Click="LaunchCard_Click"
                            HeaderIcon="{ui:FontIcon Glyph=&#xE945;}"
                            IsClickEnabled="True"
                            IsEnabled="{x:Bind ViewModel.IsEnabled, Mode=OneWay}">
                            <ItemsControl
                                AutomationProperties.AccessibilityView="Raw"
                                IsTabStop="False"
                                ItemsSource="{x:Bind Path=ViewModel.Hotkey.GetKeysList(), Mode=OneWay}">
                                <ItemsControl.ItemsPanel>
                                    <ItemsPanelTemplate>
                                        <StackPanel Orientation="Horizontal" Spacing="4" />
                                    </ItemsPanelTemplate>
                                </ItemsControl.ItemsPanel>
                                <ItemsControl.ItemTemplate>
                                    <DataTemplate>
                                        <ptcontrols:KeyVisual
                                            Padding="8,8,8,8"
                                            VerticalAlignment="Center"
                                            AutomationProperties.AccessibilityView="Raw"
                                            Content="{Binding}"
                                            Style="{StaticResource AccentKeyVisualStyle}" />
                                    </DataTemplate>
                                </ItemsControl.ItemTemplate>
                            </ItemsControl>
                        </tkcontrols:SettingsCard>
                        <tkcontrols:SettingsCard
                            x:Uid="CmdPal_Settings"
                            Grid.Row="4"
                            ActionIcon="{ui:FontIcon Glyph=&#xE8A7;}"
                            Click="SettingsCard_Click"
                            HeaderIcon="{ui:FontIcon Glyph=&#xE713;}"
                            IsClickEnabled="True"
                            IsEnabled="{x:Bind ViewModel.IsEnabled, Mode=OneWay}" />
                    </StackPanel>
                </Grid>
            </Grid>
        </ScrollViewer>
    </Grid>
</local:NavigablePage>
