<?xml version="1.0" encoding="utf-8" ?>
<Page
    x:Class="BetterLyrics.WinUI3.Views.SettingsPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:controls="using:CommunityToolkit.WinUI.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
    xmlns:local="using:BetterLyrics.WinUI3.Views"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:models="using:BetterLyrics.WinUI3.Models"
    xmlns:scontrols="using:ShadowViewer.Controls"
    xmlns:uc="using:BetterLyrics.WinUI3.Controls"
    xmlns:ui="using:CommunityToolkit.WinUI"
    xmlns:vm="using:BetterLyrics.WinUI3.ViewModels"
    mc:Ignorable="d">

    <Grid x:Name="RootGrid">

        <NavigationView
            x:Name="NavView"
            IsBackButtonVisible="Collapsed"
            IsSettingsVisible="False"
            SelectionChanged="NavView_SelectionChanged">
            <NavigationView.MenuItems>
                <NavigationViewItem
                    x:Uid="SettingsPageApp"
                    Icon="{ui:FontIcon FontFamily={StaticResource IconFontFamily},
                                       Glyph=&#xECAA;}"
                    IsSelected="True"
                    Tag="App" />
                <NavigationViewItem
                    x:Uid="SettingsPageAlbumStyle"
                    Icon="{ui:FontIcon FontFamily={StaticResource IconFontFamily},
                                       Glyph=&#xE93C;}"
                    Tag="AlbumArtStyle" />
                <NavigationViewItem
                    x:Uid="SettingsPageMediaLib"
                    Icon="{ui:FontIcon FontFamily={StaticResource IconFontFamily},
                                       Glyph=&#xE8B7;}"
                    Tag="MediaLib" />
                <NavigationViewItem
                    x:Uid="SettingsPageAlbumLib"
                    Icon="{ui:FontIcon FontFamily={StaticResource IconFontFamily},
                                       Glyph=&#xE7FA;}"
                    Tag="AlbumArtLib" />
                <NavigationViewItem
                    x:Uid="SettingsPagePlaybackLib"
                    Icon="{ui:FontIcon FontFamily={StaticResource IconFontFamily},
                                       Glyph=&#xEA69;}"
                    Tag="PlaybackLib" />
                <NavigationViewItem
                    x:Uid="SettingsPageLyricsLib"
                    Icon="{ui:FontIcon FontFamily={StaticResource IconFontFamily},
                                       Glyph=&#xE8F1;}"
                    Tag="LyricsLib" />
                <NavigationViewItem
                    x:Uid="SettingsPageBackgroundOverlay"
                    Icon="{ui:FontIcon FontFamily={StaticResource IconFontFamily},
                                       Glyph=&#xF5EF;}"
                    Tag="Background" />
                <NavigationViewItem
                    x:Uid="SettingsPageLyrics"
                    Icon="{ui:FontIcon FontFamily={StaticResource IconFontFamily},
                                       Glyph=&#xEDC6;}"
                    Tag="Lyrics" />
                <NavigationViewItem
                    x:Uid="SettingsPageTranslation"
                    Icon="{ui:FontIcon FontFamily={StaticResource IconFontFamily},
                                       Glyph=&#xE7F0;}"
                    Tag="Translation" />
                <NavigationViewItem
                    x:Uid="SettingsPageAbout"
                    Icon="{ui:FontIcon FontFamily={StaticResource IconFontFamily},
                                       Glyph=&#xE946;}"
                    Tag="About" />
                <NavigationViewItem
                    x:Uid="SettingsPageDev"
                    Icon="{ui:FontIcon FontFamily={StaticResource IconFontFamily},
                                       Glyph=&#xEC7A;}"
                    Tag="Dev" />
            </NavigationView.MenuItems>

            <ScrollViewer Padding="36,0">
                <Grid Margin="0,36">
                    <controls:SwitchPresenter Value="{x:Bind ViewModel.NavViewSelectedItemTag, Mode=OneWay}">
                        <controls:SwitchPresenter.ContentTransitions>
                            <TransitionCollection>
                                <PopupThemeTransition />
                            </TransitionCollection>
                        </controls:SwitchPresenter.ContentTransitions>

                        <!--  App appearance and behavior  -->
                        <controls:Case Value="App">
                            <StackPanel Spacing="{StaticResource SettingsCardSpacing}">

                                <!--  App appearance  -->

                                <TextBlock x:Uid="SettingsPageAppAppearance" Style="{StaticResource SettingsSectionHeaderTextBlockStyle}" />

                                <controls:SettingsExpander
                                    x:Uid="SettingsPageLanguage"
                                    HeaderIcon="{ui:FontIcon FontFamily={StaticResource IconFontFamily},
                                                             Glyph=&#xF2B7;}"
                                    IsExpanded="True">
                                    <ComboBox SelectedIndex="{x:Bind ViewModel.Language, Mode=TwoWay, Converter={StaticResource EnumToIntConverter}}">
                                        <ComboBoxItem x:Uid="SettingsPageSystemLanguage" />
                                        <ComboBoxItem x:Uid="SettingsPageEN" />
                                        <ComboBoxItem x:Uid="SettingsPageSC" />
                                        <ComboBoxItem x:Uid="SettingsPageTC" />
                                        <ComboBoxItem x:Uid="SettingsPageJA" />
                                        <ComboBoxItem x:Uid="SettingsPageKO" />
                                    </ComboBox>
                                    <controls:SettingsExpander.Items>
                                        <controls:SettingsCard>
                                            <Button x:Uid="SettingsPageRestart" Command="{x:Bind ViewModel.RestartAppCommand}" />
                                        </controls:SettingsCard>
                                    </controls:SettingsExpander.Items>
                                </controls:SettingsExpander>

                                <!--  App behavior  -->

                                <TextBlock x:Uid="SettingsPageAppBehavior" Style="{StaticResource SettingsSectionHeaderTextBlockStyle}" />

                                <controls:SettingsCard x:Uid="SettingsPageAutoStart" HeaderIcon="{ui:FontIcon FontFamily={StaticResource IconFontFamily}, Glyph=&#xF71C;}">
                                    <ToggleSwitch x:Name="AutoStartupToggleSwitch" Loaded="AutoStartupToggleSwitch_Loaded" />
                                </controls:SettingsCard>

                                <controls:SettingsCard x:Uid="SettingsPageAutoStartWindow" HeaderIcon="{ui:FontIcon FontFamily={StaticResource IconFontFamily}, Glyph=&#xE736;}">
                                    <ComboBox SelectedIndex="{x:Bind ViewModel.AutoStartWindowType, Mode=TwoWay, Converter={StaticResource EnumToIntConverter}}">
                                        <ComboBoxItem x:Uid="SettingsPageAutoStartInAppLyrics" />
                                        <ComboBoxItem x:Uid="SettingsPageAutoStartDockLyrics" />
                                        <ComboBoxItem x:Uid="SettingsPageAutoStartDesktopLyrics" />
                                    </ComboBox>
                                </controls:SettingsCard>

                                <controls:SettingsCard x:Uid="SettingsPageIgnoreFullscreenWindow" HeaderIcon="{ui:FontIcon FontFamily={StaticResource IconFontFamily}, Glyph=&#xE967;}">
                                    <ToggleSwitch IsOn="{x:Bind ViewModel.IgnoreFullscreenWindow, Mode=TwoWay}" />
                                </controls:SettingsCard>

                                <controls:SettingsCard x:Uid="SettingsPageHideWindow" HeaderIcon="{ui:FontIcon FontFamily={StaticResource IconFontFamily}, Glyph=&#xED1A;}">
                                    <ToggleSwitch IsOn="{x:Bind ViewModel.HideWindowWhenNotPlaying, Mode=TwoWay}" />
                                </controls:SettingsCard>

                                <controls:SettingsCard x:Uid="SettingsPageGlobalDrag" HeaderIcon="{ui:FontIcon FontFamily={StaticResource IconFontFamily}, Glyph=&#xE7C2;}">
                                    <ToggleSwitch IsOn="{x:Bind ViewModel.IsDragEverywhereEnabled, Mode=TwoWay}" />
                                </controls:SettingsCard>

                                <!--  Desktop mode  -->

                                <TextBlock x:Uid="SettingsPageAppDesktop" Style="{StaticResource SettingsSectionHeaderTextBlockStyle}" />

                                <controls:SettingsCard x:Uid="SettingsPageAutoLock" HeaderIcon="{ui:FontIcon FontFamily={StaticResource IconFontFamily}, Glyph=&#xE755;}">
                                    <ToggleSwitch IsOn="{x:Bind ViewModel.AutoLockOnDesktopMode, Mode=TwoWay}" />
                                </controls:SettingsCard>

                                <controls:SettingsCard x:Uid="SettingsPageLockHotKey" HeaderIcon="{ui:FontIcon FontFamily={StaticResource IconFontFamily}, Glyph=&#xEDA7;}">
                                    <StackPanel Orientation="Horizontal" Spacing="6">
                                        <TextBlock
                                            Margin="0,0,0,2"
                                            VerticalAlignment="Center"
                                            Text="Ctrl + Alt + " />
                                        <ComboBox SelectedIndex="{x:Bind ViewModel.LockHotKeyIndex, Mode=TwoWay}">
                                            <ComboBoxItem Content="A" />
                                            <ComboBoxItem Content="B" />
                                            <ComboBoxItem Content="C" />
                                            <ComboBoxItem Content="D" />
                                            <ComboBoxItem Content="E" />
                                            <ComboBoxItem Content="F" />
                                            <ComboBoxItem Content="G" />
                                            <ComboBoxItem Content="H" />
                                            <ComboBoxItem Content="I" />
                                            <ComboBoxItem Content="J" />
                                            <ComboBoxItem Content="K" />
                                            <ComboBoxItem Content="L" />
                                            <ComboBoxItem Content="M" />
                                            <ComboBoxItem Content="N" />
                                            <ComboBoxItem Content="O" />
                                            <ComboBoxItem Content="P" />
                                            <ComboBoxItem Content="Q" />
                                            <ComboBoxItem Content="R" />
                                            <ComboBoxItem Content="S" />
                                            <ComboBoxItem Content="T" />
                                            <ComboBoxItem Content="U" />
                                            <ComboBoxItem Content="V" />
                                            <ComboBoxItem Content="W" />
                                            <ComboBoxItem Content="X" />
                                            <ComboBoxItem Content="Y" />
                                            <ComboBoxItem Content="Z" />
                                        </ComboBox>
                                    </StackPanel>
                                </controls:SettingsCard>

                                <controls:SettingsCard x:Uid="SettingsPageDockWindowHeight" HeaderIcon="{ui:FontIcon FontFamily={StaticResource IconFontFamily}, Glyph=&#xED5E;}">
                                    <StackPanel Orientation="Horizontal">
                                        <TextBlock x:Uid="SettingsPageSliderPrefix" VerticalAlignment="Center" />
                                        <TextBlock VerticalAlignment="Center" Text="{x:Bind ViewModel.DockWindowHeight, Mode=OneWay}" />
                                        <TextBlock
                                            Margin="0,0,14,0"
                                            VerticalAlignment="Center"
                                            Text=" px" />
                                        <Slider
                                            Maximum="200"
                                            Minimum="64"
                                            SnapsTo="Ticks"
                                            StepFrequency="1"
                                            TickFrequency="1"
                                            TickPlacement="Outside"
                                            Value="{x:Bind ViewModel.DockWindowHeight, Mode=TwoWay}" />
                                    </StackPanel>
                                </controls:SettingsCard>

                                <!--  Dock mode  -->

                                <TextBlock x:Uid="SettingsPageAppDock" Style="{StaticResource SettingsSectionHeaderTextBlockStyle}" />

                                <controls:SettingsCard x:Uid="SettingsPageDockPlacement" HeaderIcon="{ui:FontIcon FontFamily={StaticResource IconFontFamily}, Glyph=&#xE8E3;}">
                                    <ComboBox SelectedIndex="{x:Bind ViewModel.DockPlacement, Mode=TwoWay, Converter={StaticResource EnumToIntConverter}}">
                                        <ComboBoxItem x:Uid="SettingsPageDockPlacementTop" />
                                        <ComboBoxItem x:Uid="SettingsPageDockPlacementBottom" />
                                    </ComboBox>
                                </controls:SettingsCard>

                            </StackPanel>
                        </controls:Case>

                        <!--  Lyrics background  -->
                        <controls:Case Value="Background">
                            <StackPanel Spacing="{StaticResource SettingsCardSpacing}">

                                <controls:SettingsCard x:Uid="SettingsPageTheme" HeaderIcon="{ui:FontIcon FontFamily={StaticResource IconFontFamily}, Glyph=&#xE790;}">
                                    <ComboBox x:Name="ThemeComboBox" SelectedIndex="{x:Bind ViewModel.LyricsBackgroundTheme, Mode=TwoWay, Converter={StaticResource EnumToIntConverter}}">
                                        <ComboBoxItem x:Uid="SettingsPageFollowSystem" />
                                        <ComboBoxItem x:Uid="SettingsPageLight" />
                                        <ComboBoxItem x:Uid="SettingsPageDark" />
                                    </ComboBox>
                                </controls:SettingsCard>

                                <controls:SettingsCard x:Uid="SettingsPageDynamicLyricsBackground" HeaderIcon="{ui:FontIcon FontFamily={StaticResource IconFontFamily}, Glyph=&#xE759;}">
                                    <ToggleSwitch IsOn="{x:Bind ViewModel.IsDynamicCoverOverlayEnabled, Mode=TwoWay}" />
                                </controls:SettingsCard>

                                <controls:SettingsCard x:Uid="SettingsPageLyricsBackgroundOpacity" HeaderIcon="{ui:FontIcon FontFamily={StaticResource IconFontFamily}, Glyph=&#xF573;}">
                                    <StackPanel Orientation="Horizontal">
                                        <TextBlock x:Uid="SettingsPageSliderPrefix" VerticalAlignment="Center" />
                                        <TextBlock VerticalAlignment="Center" Text="{x:Bind ViewModel.CoverOverlayOpacity, Mode=OneWay}" />
                                        <TextBlock
                                            Margin="0,0,14,0"
                                            VerticalAlignment="Center"
                                            Text=" %" />
                                        <Slider
                                            Maximum="100"
                                            Minimum="1"
                                            SnapsTo="Ticks"
                                            StepFrequency="1"
                                            TickFrequency="1"
                                            TickPlacement="Outside"
                                            Value="{x:Bind ViewModel.CoverOverlayOpacity, Mode=TwoWay}" />
                                    </StackPanel>
                                </controls:SettingsCard>

                                <controls:SettingsCard x:Uid="SettingsPageLyricsBackgroundBlurAmount" HeaderIcon="{ui:FontIcon FontFamily={StaticResource IconFontFamily}, Glyph=&#xE727;}">
                                    <StackPanel Orientation="Horizontal">
                                        <TextBlock x:Uid="SettingsPageSliderPrefix" VerticalAlignment="Center" />
                                        <TextBlock
                                            Margin="0,0,14,0"
                                            VerticalAlignment="Center"
                                            Text="{x:Bind ViewModel.CoverOverlayBlurAmount, Mode=OneWay}" />
                                        <Slider
                                            Maximum="100"
                                            Minimum="0"
                                            SnapsTo="Ticks"
                                            StepFrequency="10"
                                            TickFrequency="10"
                                            TickPlacement="Outside"
                                            Value="{x:Bind ViewModel.CoverOverlayBlurAmount, Mode=TwoWay}" />
                                    </StackPanel>
                                </controls:SettingsCard>

                                <controls:SettingsCard x:Uid="SettingsPageBackgroundAcrylicEffectAmount" HeaderIcon="{ui:FontIcon FontFamily={StaticResource IconFontFamily}, Glyph=&#xE727;}">
                                    <StackPanel Orientation="Horizontal">
                                        <TextBlock x:Uid="SettingsPageSliderPrefix" VerticalAlignment="Center" />
                                        <TextBlock
                                            Margin="0,0,14,0"
                                            VerticalAlignment="Center"
                                            Text="{x:Bind ViewModel.CoverAcrylicEffectAmount, Mode=OneWay}" />
                                        <Slider
                                            Maximum="10"
                                            Minimum="0"
                                            SnapsTo="Ticks"
                                            StepFrequency="1"
                                            TickFrequency="1"
                                            TickPlacement="Outside"
                                            Value="{x:Bind ViewModel.CoverAcrylicEffectAmount, Mode=TwoWay}" />
                                    </StackPanel>
                                </controls:SettingsCard>

                            </StackPanel>
                        </controls:Case>

                        <!--  Album art area style  -->
                        <controls:Case Value="AlbumArtStyle">
                            <StackPanel Spacing="{StaticResource SettingsCardSpacing}">

                                <TextBlock x:Uid="SettingsPageAlbumArt" Style="{StaticResource SettingsSectionHeaderTextBlockStyle}" />

                                <controls:SettingsCard x:Uid="SettingsPageAlbumRadius" HeaderIcon="{ui:FontIcon FontFamily={StaticResource IconFontFamily}, Glyph=&#xE71A;}">
                                    <StackPanel Orientation="Horizontal">
                                        <TextBlock x:Uid="SettingsPageSliderPrefix" VerticalAlignment="Center" />
                                        <TextBlock VerticalAlignment="Center" Text="{x:Bind ViewModel.CoverImageRadius, Mode=OneWay}" />
                                        <TextBlock
                                            Margin="0,0,14,0"
                                            VerticalAlignment="Center"
                                            Text=" %" />
                                        <Slider
                                            Maximum="100"
                                            Minimum="0"
                                            SnapsTo="Ticks"
                                            StepFrequency="2"
                                            TickFrequency="2"
                                            TickPlacement="Outside"
                                            Value="{x:Bind ViewModel.CoverImageRadius, Mode=TwoWay}" />
                                    </StackPanel>
                                </controls:SettingsCard>

                                <TextBlock x:Uid="SettingsPageSongInfo" Style="{StaticResource SettingsSectionHeaderTextBlockStyle}" />

                                <controls:SettingsCard x:Uid="SettingsPageSongInfoAlignment" HeaderIcon="{ui:FontIcon FontFamily={StaticResource IconFontFamily}, Glyph=&#xE8E3;}">
                                    <ComboBox SelectedIndex="{x:Bind ViewModel.SongInfoAlignmentType, Mode=TwoWay, Converter={StaticResource EnumToIntConverter}}">
                                        <ComboBoxItem x:Uid="SettingsPageSongInfoLeft" />
                                        <ComboBoxItem x:Uid="SettingsPageSongInfoCenter" />
                                        <ComboBoxItem x:Uid="SettingsPageSongInfoRight" />
                                    </ComboBox>
                                </controls:SettingsCard>

                            </StackPanel>
                        </controls:Case>

                        <controls:Case Value="AlbumArtLib">
                            <StackPanel Spacing="{StaticResource SettingsCardSpacing}">
                                <controls:SettingsCard
                                    x:Name="AlbumArtSearchProvidersSettingsExpander"
                                    x:Uid="SettingsPageAlbumArtSearchProvidersConfig"
                                    HeaderIcon="{ui:FontIcon FontFamily={StaticResource IconFontFamily},
                                                             Glyph=&#xE7FA;}" />

                                <ListView
                                    x:Name="AlbumArtSearchProvidersListView"
                                    Margin="0,-4,0,0"
                                    AllowDrop="True"
                                    CanDragItems="True"
                                    CanReorderItems="True"
                                    DragItemsCompleted="AlbumArtSearchProvidersListView_DragItemsCompleted"
                                    ItemContainerStyle="{StaticResource ListViewStretchedItemContainerStyle}"
                                    ItemsSource="{x:Bind ViewModel.AlbumArtSearchProvidersInfo, Mode=OneWay}"
                                    SelectionMode="None">
                                    <ListView.OpacityTransition>
                                        <ScalarTransition />
                                    </ListView.OpacityTransition>
                                    <ListView.ItemTemplate>
                                        <DataTemplate x:DataType="models:AlbumArtSearchProviderInfo">
                                            <controls:SettingsCard Padding="60,0,48,0" Header="{Binding Provider, Converter={StaticResource AlbumArtSearchProviderToDisplayNameConverter}, Mode=OneWay}">
                                                <ToggleSwitch IsOn="{Binding IsEnabled, Mode=TwoWay}" Toggled="AlbumArtSearchProviderToggleSwitch_Toggled" />
                                            </controls:SettingsCard>
                                        </DataTemplate>
                                    </ListView.ItemTemplate>
                                </ListView>
                            </StackPanel>
                        </controls:Case>

                        <!--  Playback source  -->
                        <controls:Case Value="PlaybackLib">
                            <StackPanel Spacing="{StaticResource SettingsCardSpacing}">
                                <controls:SettingsCard x:Uid="SettingsPageMediaSourceProvidersConfig" HeaderIcon="{ui:FontIcon FontFamily={StaticResource IconFontFamily}, Glyph=&#xEA69;}" />
                                <ListView
                                    x:Name="MediaSourceProvidersListView"
                                    Margin="0,-4,0,0"
                                    ItemsSource="{x:Bind ViewModel.MediaSourceProvidersInfo, Mode=OneWay}"
                                    SelectionMode="None">
                                    <ListView.ItemContainerStyle>
                                        <Style TargetType="ListViewItem">
                                            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                                            <Setter Property="Margin" Value="0" />
                                            <Setter Property="Padding" Value="0" />
                                        </Style>
                                    </ListView.ItemContainerStyle>
                                    <ListView.ItemTemplate>
                                        <DataTemplate x:DataType="models:MediaSourceProviderInfo">
                                            <controls:SettingsCard Padding="60,0,48,0" Header="{Binding Provider, Mode=OneWay}">
                                                <ToggleSwitch IsOn="{Binding IsEnabled, Mode=TwoWay}" Toggled="MediaSourceProviderToggleSwitch_Toggled" />
                                            </controls:SettingsCard>
                                        </DataTemplate>
                                    </ListView.ItemTemplate>
                                </ListView>
                            </StackPanel>
                        </controls:Case>

                        <!--  Media lib  -->
                        <controls:Case Value="MediaLib">
                            <StackPanel Spacing="{StaticResource SettingsCardSpacing}">
                                <controls:SettingsExpander
                                    x:Uid="SettingsPageMusicLib"
                                    HeaderIcon="{ui:FontIcon FontFamily={StaticResource IconFontFamily},
                                                             Glyph=&#xE8B7;}"
                                    IsExpanded="True"
                                    ItemsSource="{x:Bind ViewModel.LocalMediaFolders, Mode=OneWay}">
                                    <controls:SettingsExpander.ItemTemplate>
                                        <DataTemplate>
                                            <controls:SettingsCard>
                                                <controls:SettingsCard.Header>
                                                    <HyperlinkButton
                                                        Click="LocalFolderHyperlinkButton_Click"
                                                        Content="{Binding Path, Mode=OneWay}"
                                                        Tag="{Binding Path, Mode=OneWay}" />
                                                </controls:SettingsCard.Header>
                                                <StackPanel Orientation="Horizontal">
                                                    <HyperlinkButton
                                                        x:Uid="SettingsPageRemovePath"
                                                        Click="SettingsPageRemovePathButton_Click"
                                                        Tag="{Binding}" />
                                                    <ToggleSwitch
                                                        DataContext="{Binding}"
                                                        IsOn="{Binding IsEnabled, Mode=TwoWay}"
                                                        Toggled="LocalLyricsFolderToggleSwitch_Toggled" />
                                                </StackPanel>
                                            </controls:SettingsCard>
                                        </DataTemplate>
                                    </controls:SettingsExpander.ItemTemplate>
                                    <controls:SettingsExpander.ItemsHeader>
                                        <InfoBar
                                            x:Uid="SettingsPageRemoveInfo"
                                            BorderThickness="0"
                                            CornerRadius="0"
                                            IsClosable="False"
                                            IsOpen="True"
                                            Severity="Success">

                                            <interactivity:Interaction.Behaviors>

                                                <interactivity:DataTriggerBehavior
                                                    Binding="{x:Bind ViewModel.LocalMediaFolders.Count, Mode=OneWay}"
                                                    ComparisonCondition="Equal"
                                                    Value="0">
                                                    <interactivity:ChangePropertyAction PropertyName="Visibility" Value="Collapsed" />
                                                </interactivity:DataTriggerBehavior>
                                                <interactivity:DataTriggerBehavior
                                                    Binding="{x:Bind ViewModel.LocalMediaFolders.Count, Mode=OneWay}"
                                                    ComparisonCondition="NotEqual"
                                                    Value="0">
                                                    <interactivity:ChangePropertyAction PropertyName="Visibility" Value="Visible" />
                                                </interactivity:DataTriggerBehavior>

                                            </interactivity:Interaction.Behaviors>

                                        </InfoBar>
                                    </controls:SettingsExpander.ItemsHeader>
                                    <controls:SettingsExpander.ItemsFooter>
                                        <controls:SettingsCard x:Uid="SettingsPageAddFolder" Style="{StaticResource DefaultSettingsExpanderItemStyle}">
                                            <Button
                                                x:Uid="SettingsPageAddFolderButton"
                                                Command="{x:Bind ViewModel.SelectAndAddFolderCommand}"
                                                CommandParameter="{Binding ElementName=RootGrid}" />
                                        </controls:SettingsCard>
                                    </controls:SettingsExpander.ItemsFooter>
                                </controls:SettingsExpander>
                            </StackPanel>
                        </controls:Case>

                        <!--  Lyrics source  -->
                        <controls:Case Value="LyricsLib">
                            <StackPanel Spacing="{StaticResource SettingsCardSpacing}">

                                <controls:SettingsCard
                                    x:Name="LyricsSearchProvidersSettingsExpander"
                                    x:Uid="SettingsPageLyricsSearchProvidersConfig"
                                    HeaderIcon="{ui:FontIcon FontFamily={StaticResource IconFontFamily},
                                                             Glyph=&#xE8F1;}" />

                                <ListView
                                    x:Name="LyricsSearchProvidersListView"
                                    Margin="0,-4,0,0"
                                    AllowDrop="True"
                                    CanDragItems="True"
                                    CanReorderItems="True"
                                    DragItemsCompleted="LyricsSearchProvidersListView_DragItemsCompleted"
                                    ItemsSource="{x:Bind ViewModel.LyricsSearchProvidersInfo, Mode=OneWay}"
                                    SelectionMode="None">
                                    <ListView.OpacityTransition>
                                        <ScalarTransition />
                                    </ListView.OpacityTransition>
                                    <ListView.ItemContainerStyle>
                                        <Style TargetType="ListViewItem">
                                            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                                            <Setter Property="Margin" Value="0" />
                                            <Setter Property="Padding" Value="0" />
                                        </Style>
                                    </ListView.ItemContainerStyle>
                                    <ListView.ItemTemplate>
                                        <DataTemplate x:DataType="models:LyricsSearchProviderInfo">
                                            <controls:SettingsCard Padding="60,0,48,0" Header="{Binding Provider, Converter={StaticResource LyricsSearchProviderToDisplayNameConverter}, Mode=OneWay}">
                                                <ToggleSwitch IsOn="{Binding IsEnabled, Mode=TwoWay}" Toggled="LyricsSearchProviderToggleSwitch_Toggled" />
                                            </controls:SettingsCard>
                                        </DataTemplate>
                                    </ListView.ItemTemplate>
                                </ListView>

                            </StackPanel>
                        </controls:Case>

                        <!--  Lyrics style and effect  -->
                        <controls:Case Value="Lyrics">
                            <StackPanel Spacing="{StaticResource SettingsCardSpacing}">

                                <!--  Lyrics style  -->

                                <TextBlock x:Uid="SettingsPageLyricsStyle" Style="{StaticResource SettingsSectionHeaderTextBlockStyle}" />

                                <controls:SettingsCard x:Uid="SettingsPageLyricsAlignment" HeaderIcon="{ui:FontIcon FontFamily={StaticResource IconFontFamily}, Glyph=&#xE8E3;}">
                                    <ComboBox SelectedIndex="{x:Bind ViewModel.LyricsAlignmentType, Mode=TwoWay, Converter={StaticResource EnumToIntConverter}}">
                                        <ComboBoxItem x:Uid="SettingsPageLyricsLeft" />
                                        <ComboBoxItem x:Uid="SettingsPageLyricsCenter" />
                                        <ComboBoxItem x:Uid="SettingsPageLyricsRight" />
                                    </ComboBox>
                                </controls:SettingsCard>

                                <controls:SettingsCard x:Uid="SettingsPageLyricsFontFamily" HeaderIcon="{ui:FontIcon FontFamily={StaticResource IconFontFamily}, Glyph=&#xE8D2;}">
                                    <ComboBox ItemsSource="{x:Bind ViewModel.SystemFontNames, Mode=OneWay}" SelectedIndex="{x:Bind ViewModel.SelectedFontFamilyIndex, Mode=TwoWay}">
                                        <ComboBox.ItemTemplate>
                                            <DataTemplate>
                                                <TextBlock Text="{Binding}" />
                                            </DataTemplate>
                                        </ComboBox.ItemTemplate>
                                    </ComboBox>
                                </controls:SettingsCard>

                                <controls:SettingsCard x:Uid="SettingsPageLyricsFontWeight" HeaderIcon="{ui:FontIcon FontFamily={StaticResource IconFontFamily}, Glyph=&#xE8DD;}">
                                    <ComboBox SelectedIndex="{x:Bind ViewModel.LyricsFontWeight, Mode=TwoWay, Converter={StaticResource EnumToIntConverter}}">
                                        <ComboBoxItem x:Uid="SettingsPageLyricsThin" />
                                        <ComboBoxItem x:Uid="SettingsPageLyricsExtraLight" />
                                        <ComboBoxItem x:Uid="SettingsPageLyricsLight" />
                                        <ComboBoxItem x:Uid="SettingsPageLyricsSemiLight" />
                                        <ComboBoxItem x:Uid="SettingsPageLyricsNormal" />
                                        <ComboBoxItem x:Uid="SettingsPageLyricsMedium" />
                                        <ComboBoxItem x:Uid="SettingsPageLyricsSemiBold" />
                                        <ComboBoxItem x:Uid="SettingsPageLyricsBold" />
                                        <ComboBoxItem x:Uid="SettingsPageLyricsExtraBold" />
                                        <ComboBoxItem x:Uid="SettingsPageLyricsBlack" />
                                        <ComboBoxItem x:Uid="SettingsPageLyricsExtraBlack" />
                                    </ComboBox>
                                </controls:SettingsCard>

                                <controls:SettingsCard x:Uid="SettingsPageLyricsBgFontOpacity" HeaderIcon="{ui:FontIcon FontFamily={StaticResource IconFontFamily}, Glyph=&#xE799;}">
                                    <StackPanel Orientation="Horizontal">
                                        <TextBlock x:Uid="SettingsPageSliderPrefix" VerticalAlignment="Center" />
                                        <TextBlock VerticalAlignment="Center" Text="{x:Bind ViewModel.LyricsBgFontOpacity, Mode=OneWay}" />
                                        <TextBlock
                                            Margin="0,0,14,0"
                                            VerticalAlignment="Center"
                                            Text=" %" />
                                        <Slider
                                            Maximum="100"
                                            Minimum="0"
                                            SnapsTo="Ticks"
                                            StepFrequency="1"
                                            TickFrequency="1"
                                            TickPlacement="Outside"
                                            Value="{x:Bind ViewModel.LyricsBgFontOpacity, Mode=TwoWay}" />
                                    </StackPanel>
                                </controls:SettingsCard>

                                <controls:SettingsCard x:Uid="SettingsPageLyricsFontStrokeWidth" HeaderIcon="{ui:FontIcon FontFamily={StaticResource IconFontFamily}, Glyph=&#xEC12;}">
                                    <StackPanel Orientation="Horizontal">
                                        <TextBlock x:Uid="SettingsPageSliderPrefix" VerticalAlignment="Center" />
                                        <TextBlock
                                            Margin="0,0,14,0"
                                            VerticalAlignment="Center"
                                            Text="{x:Bind ViewModel.LyricsFontStrokeWidth, Mode=OneWay}" />
                                        <Slider
                                            Maximum="5"
                                            Minimum="0"
                                            SnapsTo="Ticks"
                                            StepFrequency="1"
                                            TickFrequency="1"
                                            TickPlacement="Outside"
                                            Value="{x:Bind ViewModel.LyricsFontStrokeWidth, Mode=TwoWay}" />
                                    </StackPanel>
                                </controls:SettingsCard>

                                <controls:SettingsCard x:Uid="SettingsPageLyricsStrokeFontColor" HeaderIcon="{ui:FontIcon FontFamily={StaticResource IconFontFamily}, Glyph=&#xE8D3;}">
                                    <ComboBox SelectedIndex="{x:Bind ViewModel.LyricsStrokeFontColorType, Mode=TwoWay, Converter={StaticResource EnumToIntConverter}}">
                                        <ComboBoxItem x:Uid="SettingsPageLyricsFontColorAdaptiveColored" />
                                        <ComboBoxItem x:Uid="SettingsPageLyricsFontColorAdaptiveGrayed" />
                                        <ComboBoxItem x:Uid="SettingsPageLyricsFontColorCustom" />
                                    </ComboBox>
                                </controls:SettingsCard>

                                <ColorPicker
                                    ColorSpectrumShape="Box"
                                    IsAlphaEnabled="True"
                                    IsAlphaSliderVisible="True"
                                    IsAlphaTextInputVisible="True"
                                    IsColorChannelTextInputVisible="True"
                                    IsColorSliderVisible="True"
                                    IsHexInputVisible="True"
                                    IsMoreButtonVisible="True"
                                    Color="{x:Bind ViewModel.LyricsCustomStrokeFontColor, Mode=TwoWay}">
                                    <interactivity:Interaction.Behaviors>
                                        <interactivity:DataTriggerBehavior
                                            Binding="{x:Bind ViewModel.LyricsStrokeFontColorType, Mode=OneWay, Converter={StaticResource EnumToIntConverter}}"
                                            ComparisonCondition="Equal"
                                            Value="2">
                                            <interactivity:ChangePropertyAction PropertyName="Visibility" Value="Visible" />
                                        </interactivity:DataTriggerBehavior>
                                        <interactivity:DataTriggerBehavior
                                            Binding="{x:Bind ViewModel.LyricsStrokeFontColorType, Mode=OneWay, Converter={StaticResource EnumToIntConverter}}"
                                            ComparisonCondition="NotEqual"
                                            Value="2">
                                            <interactivity:ChangePropertyAction PropertyName="Visibility" Value="Collapsed" />
                                        </interactivity:DataTriggerBehavior>
                                    </interactivity:Interaction.Behaviors>
                                </ColorPicker>

                                <controls:SettingsCard x:Uid="SettingsPageLyricsBgFontColor" HeaderIcon="{ui:FontIcon FontFamily={StaticResource IconFontFamily}, Glyph=&#xE8D3;}">
                                    <ComboBox SelectedIndex="{x:Bind ViewModel.LyricsBgFontColorType, Mode=TwoWay, Converter={StaticResource EnumToIntConverter}}">
                                        <ComboBoxItem x:Uid="SettingsPageLyricsFontColorAdaptiveColored" />
                                        <ComboBoxItem x:Uid="SettingsPageLyricsFontColorAdaptiveGrayed" />
                                        <ComboBoxItem x:Uid="SettingsPageLyricsFontColorCustom" />
                                    </ComboBox>
                                </controls:SettingsCard>

                                <ColorPicker
                                    ColorSpectrumShape="Box"
                                    IsAlphaEnabled="True"
                                    IsAlphaSliderVisible="True"
                                    IsAlphaTextInputVisible="True"
                                    IsColorChannelTextInputVisible="True"
                                    IsColorSliderVisible="True"
                                    IsHexInputVisible="True"
                                    IsMoreButtonVisible="True"
                                    Color="{x:Bind ViewModel.LyricsCustomBgFontColor, Mode=TwoWay}">
                                    <interactivity:Interaction.Behaviors>
                                        <interactivity:DataTriggerBehavior
                                            Binding="{x:Bind ViewModel.LyricsBgFontColorType, Mode=OneWay, Converter={StaticResource EnumToIntConverter}}"
                                            ComparisonCondition="Equal"
                                            Value="2">
                                            <interactivity:ChangePropertyAction PropertyName="Visibility" Value="Visible" />
                                        </interactivity:DataTriggerBehavior>
                                        <interactivity:DataTriggerBehavior
                                            Binding="{x:Bind ViewModel.LyricsBgFontColorType, Mode=OneWay, Converter={StaticResource EnumToIntConverter}}"
                                            ComparisonCondition="NotEqual"
                                            Value="2">
                                            <interactivity:ChangePropertyAction PropertyName="Visibility" Value="Collapsed" />
                                        </interactivity:DataTriggerBehavior>
                                    </interactivity:Interaction.Behaviors>
                                </ColorPicker>

                                <controls:SettingsCard x:Uid="SettingsPageLyricsFgFontColor" HeaderIcon="{ui:FontIcon FontFamily={StaticResource IconFontFamily}, Glyph=&#xE8D3;}">
                                    <ComboBox SelectedIndex="{x:Bind ViewModel.LyricsFgFontColorType, Mode=TwoWay, Converter={StaticResource EnumToIntConverter}}">
                                        <ComboBoxItem x:Uid="SettingsPageLyricsFontColorAdaptiveColored" />
                                        <ComboBoxItem x:Uid="SettingsPageLyricsFontColorAdaptiveGrayed" />
                                        <ComboBoxItem x:Uid="SettingsPageLyricsFontColorCustom" />
                                    </ComboBox>
                                </controls:SettingsCard>

                                <ColorPicker
                                    ColorSpectrumShape="Box"
                                    IsAlphaEnabled="True"
                                    IsAlphaSliderVisible="True"
                                    IsAlphaTextInputVisible="True"
                                    IsColorChannelTextInputVisible="True"
                                    IsColorSliderVisible="True"
                                    IsHexInputVisible="True"
                                    IsMoreButtonVisible="True"
                                    Color="{x:Bind ViewModel.LyricsCustomFgFontColor, Mode=TwoWay}">
                                    <interactivity:Interaction.Behaviors>
                                        <interactivity:DataTriggerBehavior
                                            Binding="{x:Bind ViewModel.LyricsFgFontColorType, Mode=OneWay, Converter={StaticResource EnumToIntConverter}}"
                                            ComparisonCondition="Equal"
                                            Value="2">
                                            <interactivity:ChangePropertyAction PropertyName="Visibility" Value="Visible" />
                                        </interactivity:DataTriggerBehavior>
                                        <interactivity:DataTriggerBehavior
                                            Binding="{x:Bind ViewModel.LyricsFgFontColorType, Mode=OneWay, Converter={StaticResource EnumToIntConverter}}"
                                            ComparisonCondition="NotEqual"
                                            Value="2">
                                            <interactivity:ChangePropertyAction PropertyName="Visibility" Value="Collapsed" />
                                        </interactivity:DataTriggerBehavior>
                                    </interactivity:Interaction.Behaviors>
                                </ColorPicker>

                                <controls:SettingsCard x:Uid="SettingsPageLyricsStandardFontSize" HeaderIcon="{ui:FontIcon FontFamily={StaticResource IconFontFamily}, Glyph=&#xE8E9;}">
                                    <StackPanel Orientation="Horizontal">
                                        <TextBlock x:Uid="SettingsPageSliderPrefix" VerticalAlignment="Center" />
                                        <TextBlock
                                            Margin="0,0,14,0"
                                            VerticalAlignment="Center"
                                            Text="{Binding ElementName=LyricsStandardFontSizeSlider, Path=Value, Mode=OneWay}" />
                                        <Slider
                                            x:Name="LyricsStandardFontSizeSlider"
                                            Maximum="96"
                                            Minimum="12"
                                            SnapsTo="Ticks"
                                            StepFrequency="2"
                                            TickFrequency="2"
                                            TickPlacement="Outside"
                                            Value="{x:Bind ViewModel.LyricsStandardFontSize, Mode=TwoWay}" />
                                    </StackPanel>
                                </controls:SettingsCard>

                                <controls:SettingsCard x:Uid="SettingsPageLyricsDockFontSize" HeaderIcon="{ui:FontIcon FontFamily={StaticResource IconFontFamily}, Glyph=&#xE8E9;}">
                                    <StackPanel Orientation="Horizontal">
                                        <TextBlock x:Uid="SettingsPageSliderPrefix" VerticalAlignment="Center" />
                                        <TextBlock
                                            Margin="0,0,14,0"
                                            VerticalAlignment="Center"
                                            Text="{Binding ElementName=LyricsDockFontSizeSlider, Path=Value, Mode=OneWay}" />
                                        <Slider
                                            x:Name="LyricsDockFontSizeSlider"
                                            Maximum="96"
                                            Minimum="12"
                                            SnapsTo="Ticks"
                                            StepFrequency="2"
                                            TickFrequency="2"
                                            TickPlacement="Outside"
                                            Value="{x:Bind ViewModel.LyricsDockFontSize, Mode=TwoWay}" />
                                    </StackPanel>
                                </controls:SettingsCard>

                                <controls:SettingsCard x:Uid="SettingsPageLyricsDesktopFontSize" HeaderIcon="{ui:FontIcon FontFamily={StaticResource IconFontFamily}, Glyph=&#xE8E9;}">
                                    <StackPanel Orientation="Horizontal">
                                        <TextBlock x:Uid="SettingsPageSliderPrefix" VerticalAlignment="Center" />
                                        <TextBlock
                                            Margin="0,0,14,0"
                                            VerticalAlignment="Center"
                                            Text="{Binding ElementName=LyricsDesktopFontSizeSlider, Path=Value, Mode=OneWay}" />
                                        <Slider
                                            x:Name="LyricsDesktopFontSizeSlider"
                                            Maximum="96"
                                            Minimum="12"
                                            SnapsTo="Ticks"
                                            StepFrequency="2"
                                            TickFrequency="2"
                                            TickPlacement="Outside"
                                            Value="{x:Bind ViewModel.LyricsDesktopFontSize, Mode=TwoWay}" />
                                    </StackPanel>
                                </controls:SettingsCard>

                                <controls:SettingsCard x:Uid="SettingsPageLyricsLineSpacingFactor" HeaderIcon="{ui:FontIcon FontFamily={StaticResource IconFontFamily}, Glyph=&#xF579;}">
                                    <StackPanel Orientation="Horizontal">
                                        <TextBlock x:Uid="SettingsPageSliderPrefix" VerticalAlignment="Center" />
                                        <TextBlock VerticalAlignment="Center" Text="{Binding ElementName=LyricsLineSpacingFactorSlider, Path=Value, Mode=OneWay}" />
                                        <TextBlock
                                            x:Uid="SettingsPageLyricsLineSpacingFactorUnit"
                                            Margin="0,0,14,0"
                                            VerticalAlignment="Center" />
                                        <Slider
                                            x:Name="LyricsLineSpacingFactorSlider"
                                            Maximum="2"
                                            Minimum="0"
                                            SnapsTo="Ticks"
                                            StepFrequency="0.1"
                                            TickFrequency="0.1"
                                            TickPlacement="Outside"
                                            Value="{x:Bind ViewModel.LyricsLineSpacingFactor, Mode=TwoWay}" />
                                    </StackPanel>
                                </controls:SettingsCard>

                                <!--  Effect  -->

                                <TextBlock
                                    x:Uid="SettingsPageLyricsEffect"
                                    Style="{StaticResource SettingsSectionHeaderTextBlockStyle}"
                                    Text="Effect" />

                                <controls:SettingsCard x:Uid="SettingsPageLyricsVerticalEdgeOpacity" HeaderIcon="{ui:FontIcon FontFamily={StaticResource IconFontFamily}, Glyph=&#xF573;}">
                                    <StackPanel Orientation="Horizontal">
                                        <TextBlock x:Uid="SettingsPageSliderPrefix" VerticalAlignment="Center" />
                                        <TextBlock VerticalAlignment="Center" Text="{Binding ElementName=LyricsVerticalEdgeOpacitySlider, Path=Value, Mode=OneWay}" />
                                        <TextBlock
                                            Margin="0,0,14,0"
                                            VerticalAlignment="Center"
                                            Text=" %" />
                                        <Slider
                                            x:Name="LyricsVerticalEdgeOpacitySlider"
                                            Maximum="100"
                                            Minimum="0"
                                            SnapsTo="Ticks"
                                            StepFrequency="1"
                                            TickFrequency="1"
                                            TickPlacement="Outside"
                                            Value="{x:Bind ViewModel.LyricsVerticalEdgeOpacity, Mode=TwoWay}" />
                                    </StackPanel>
                                </controls:SettingsCard>

                                <controls:SettingsCard x:Uid="SettingsPageLyricsBlurAmount" HeaderIcon="{ui:FontIcon FontFamily={StaticResource IconFontFamily}, Glyph=&#xE727;}">
                                    <StackPanel Orientation="Horizontal">
                                        <TextBlock x:Uid="SettingsPageSliderPrefix" VerticalAlignment="Center" />
                                        <TextBlock
                                            Margin="0,0,14,0"
                                            VerticalAlignment="Center"
                                            Text="{Binding ElementName=LyricsBlurAmountSlider, Path=Value, Mode=OneWay}" />
                                        <Slider
                                            x:Name="LyricsBlurAmountSlider"
                                            Maximum="10"
                                            Minimum="0"
                                            SnapsTo="Ticks"
                                            StepFrequency="1"
                                            TickFrequency="1"
                                            TickPlacement="Outside"
                                            Value="{x:Bind ViewModel.LyricsBlurAmount, Mode=TwoWay}" />
                                    </StackPanel>
                                </controls:SettingsCard>

                                <controls:SettingsCard x:Uid="SettingsPageLyricsHighlightScope" HeaderIcon="{ui:FontIcon FontFamily={StaticResource IconFontFamily}, Glyph=&#xE7E6;}">
                                    <ComboBox SelectedIndex="{x:Bind ViewModel.LyricsHighlightScope, Mode=TwoWay, Converter={StaticResource EnumToIntConverter}}">
                                        <ComboBoxItem x:Uid="SettingsPageLyricsRendingScopeCurrentChar" />
                                        <ComboBoxItem x:Uid="SettingsPageLyricsRendingScopeLineStartToCurrentChar" />
                                        <ComboBoxItem x:Uid="SettingsPageLyricsRendingScopeCurrentLine" />
                                    </ComboBox>
                                </controls:SettingsCard>

                                <controls:SettingsExpander
                                    x:Uid="SettingsPageLyricsGlowEffect"
                                    HeaderIcon="{ui:FontIcon FontFamily={StaticResource IconFontFamily},
                                                             Glyph=&#xE9A9;}"
                                    IsExpanded="{x:Bind ViewModel.IsLyricsGlowEffectEnabled, Mode=OneWay}">
                                    <ToggleSwitch IsOn="{x:Bind ViewModel.IsLyricsGlowEffectEnabled, Mode=TwoWay}" />
                                    <controls:SettingsExpander.Items>
                                        <controls:SettingsCard x:Uid="SettingsPageScope" IsEnabled="{x:Bind ViewModel.IsLyricsGlowEffectEnabled, Mode=OneWay}">
                                            <ComboBox SelectedIndex="{x:Bind ViewModel.LyricsGlowEffectScope, Mode=TwoWay, Converter={StaticResource EnumToIntConverter}}">
                                                <ComboBoxItem x:Uid="SettingsPageLyricsRendingScopeCurrentChar" />
                                                <ComboBoxItem x:Uid="SettingsPageLyricsRendingScopeLineStartToCurrentChar" />
                                                <ComboBoxItem x:Uid="SettingsPageLyricsRendingScopeCurrentLine" />
                                            </ComboBox>
                                        </controls:SettingsCard>
                                    </controls:SettingsExpander.Items>
                                </controls:SettingsExpander>

                                <controls:SettingsCard x:Uid="SettingsPageLyricsFloatAnimation" HeaderIcon="{ui:FontIcon FontFamily={StaticResource IconFontFamily}, Glyph=&#xE8C5;}">
                                    <ToggleSwitch IsOn="{x:Bind ViewModel.IsLyricsFloatAnimationEnabled, Mode=TwoWay}" />
                                </controls:SettingsCard>

                                <controls:SettingsCard x:Uid="SettingsPageFan" HeaderIcon="{ui:FontIcon FontFamily={StaticResource IconFontFamily}, Glyph=&#xEBC5;}">
                                    <ToggleSwitch IsOn="{x:Bind ViewModel.IsFanLyricsEnabled, Mode=TwoWay}" />
                                </controls:SettingsCard>

                                <controls:SettingsExpander
                                    x:Uid="SettingsPageScrollEasing"
                                    HeaderIcon="{ui:FontIcon FontFamily={StaticResource IconFontFamily},
                                                             Glyph=&#xECE7;}"
                                    IsExpanded="True">
                                    <ComboBox SelectedIndex="{x:Bind ViewModel.LyricsScrollEasingType, Mode=TwoWay, Converter={StaticResource EnumToIntConverter}}">
                                        <ComboBoxItem x:Uid="SettingsPageEasingTypeLinear" />
                                        <ComboBoxItem x:Uid="SettingsPageEasingTypeSmoothStep" />
                                        <ComboBoxItem x:Uid="SettingsPageEasingTypeEaseInOutSine" />
                                        <ComboBoxItem x:Uid="SettingsPageEasingTypeEaseInOutQuad" />
                                        <ComboBoxItem x:Uid="SettingsPageEasingTypeEaseInOutCubic" />
                                        <ComboBoxItem x:Uid="SettingsPageEasingTypeEaseInOutQuart" />
                                        <ComboBoxItem x:Uid="SettingsPageEasingTypeEaseInOutQuint" />
                                        <ComboBoxItem x:Uid="SettingsPageEasingTypeEaseInOutExpo" />
                                        <ComboBoxItem x:Uid="SettingsPageEasingTypeEaseInOutCirc" />
                                        <ComboBoxItem x:Uid="SettingsPageEasingTypeEaseInOutBack" />
                                        <ComboBoxItem x:Uid="SettingsPageEasingTypeEaseInOutElastic" />
                                        <ComboBoxItem x:Uid="SettingsPageEasingTypeEaseInOutBounce" />
                                    </ComboBox>
                                    <controls:SettingsExpander.Items>
                                        <controls:SettingsCard x:Uid="SettingsPageScrollDuration">
                                            <StackPanel Orientation="Horizontal">
                                                <TextBlock x:Uid="SettingsPageSliderPrefix" VerticalAlignment="Center" />
                                                <TextBlock VerticalAlignment="Center" Text="{x:Bind ViewModel.LyricsScrollDuration, Mode=OneWay}" />
                                                <TextBlock
                                                    Margin="0,0,14,0"
                                                    VerticalAlignment="Center"
                                                    Text=" ms" />
                                                <Slider
                                                    Maximum="1000"
                                                    Minimum="100"
                                                    SnapsTo="Ticks"
                                                    StepFrequency="100"
                                                    TickFrequency="100"
                                                    TickPlacement="Outside"
                                                    Value="{x:Bind ViewModel.LyricsScrollDuration, Mode=TwoWay}" />
                                            </StackPanel>
                                        </controls:SettingsCard>
                                    </controls:SettingsExpander.Items>
                                </controls:SettingsExpander>

                            </StackPanel>
                        </controls:Case>

                        <!--  Lyrics translation  -->
                        <controls:Case Value="Translation">
                            <StackPanel Spacing="{StaticResource SettingsCardSpacing}">

                                <controls:SettingsCard x:Uid="SettingsPageTargetLanguage" HeaderIcon="{ui:FontIcon FontFamily={StaticResource IconFontFamily}, Glyph=&#xF2B7;}">
                                    <ComboBox SelectedIndex="{x:Bind ViewModel.SelectedTargetLanguageIndex, Mode=TwoWay}">
                                        <ComboBoxItem Content="العربية" Tag="ar" />
                                        <ComboBoxItem Content="Azərbaycan dili" Tag="az" />
                                        <ComboBoxItem Content="简体中文" Tag="zh-Hans" />
                                        <ComboBoxItem Content="繁體中文" Tag="zh-Hant" />
                                        <ComboBoxItem Content="Čeština" Tag="cs" />
                                        <ComboBoxItem Content="Dansk" Tag="da" />
                                        <ComboBoxItem Content="Nederlands" Tag="nl" />
                                        <ComboBoxItem Content="English" Tag="en" />
                                        <ComboBoxItem Content="Esperanto" Tag="eo" />
                                        <ComboBoxItem Content="Suomi" Tag="fi" />
                                        <ComboBoxItem Content="Français" Tag="fr" />
                                        <ComboBoxItem Content="Deutsch" Tag="de" />
                                        <ComboBoxItem Content="Ελληνικά" Tag="el" />
                                        <ComboBoxItem Content="עברית" Tag="he" />
                                        <ComboBoxItem Content="हिन्दी" Tag="hi" />
                                        <ComboBoxItem Content="Magyar" Tag="hu" />
                                        <ComboBoxItem Content="Bahasa Indonesia" Tag="id" />
                                        <ComboBoxItem Content="Gaeilge" Tag="ga" />
                                        <ComboBoxItem Content="Italiano" Tag="it" />
                                        <ComboBoxItem Content="日本語" Tag="ja" />
                                        <ComboBoxItem Content="한국어" Tag="ko" />
                                        <ComboBoxItem Content="فارسی" Tag="fa" />
                                        <ComboBoxItem Content="Polski" Tag="pl" />
                                        <ComboBoxItem Content="Português" Tag="pt" />
                                        <ComboBoxItem Content="Русский" Tag="ru" />
                                        <ComboBoxItem Content="Slovenčina" Tag="sk" />
                                        <ComboBoxItem Content="Español" Tag="es" />
                                        <ComboBoxItem Content="Svenska" Tag="sv" />
                                        <ComboBoxItem Content="Türkçe" Tag="tr" />
                                        <ComboBoxItem Content="Українська" Tag="uk" />
                                        <ComboBoxItem Content="Tiếng Việt" Tag="vi" />
                                    </ComboBox>
                                </controls:SettingsCard>

                                <controls:SettingsExpander
                                    x:Uid="SettingsPageTranslationConfig"
                                    HeaderIcon="{ui:FontIcon FontFamily={StaticResource IconFontFamily},
                                                             Glyph=&#xE8C1;}"
                                    IsExpanded="{x:Bind ViewModel.IsLibreTranslateEnabled, Mode=OneWay}">
                                    <ToggleSwitch IsOn="{x:Bind ViewModel.IsLibreTranslateEnabled, Mode=TwoWay}" />
                                    <controls:SettingsExpander.Items>
                                        <controls:SettingsCard x:Uid="SettingsPageLibreTranslateServer" IsEnabled="{x:Bind ViewModel.IsLibreTranslateEnabled, Mode=OneWay}">
                                            <StackPanel Orientation="Horizontal" Spacing="12">
                                                <TextBox
                                                    x:Name="LibreTranslateServerTextBox"
                                                    IsEnabled="{x:Bind ViewModel.IsLibreTranslateServerTesting, Converter={StaticResource BoolNegationConverter}, Mode=OneWay}"
                                                    PlaceholderText="http://localhost:5000"
                                                    Text="{x:Bind ViewModel.LibreTranslateServer, Mode=TwoWay}" />
                                                <Button
                                                    x:Uid="SettingsPageServerTestButton"
                                                    Command="{x:Bind ViewModel.LibreTranslateServerTestCommand}"
                                                    IsEnabled="{x:Bind ViewModel.IsLibreTranslateServerTesting, Converter={StaticResource BoolNegationConverter}, Mode=OneWay}" />
                                            </StackPanel>
                                        </controls:SettingsCard>
                                        <controls:SettingsCard x:Uid="SettingsPageTranslationInfo">
                                            <controls:SettingsCard.Description>
                                                <HyperlinkButton Margin="0,6,0,0" NavigateUri="https://github.com/LibreTranslate/LibreTranslate">
                                                    <TextBlock
                                                        x:Uid="SettingsPageTranslationInfoLink"
                                                        FontSize="14"
                                                        TextWrapping="Wrap" />
                                                </HyperlinkButton>
                                            </controls:SettingsCard.Description>
                                        </controls:SettingsCard>
                                    </controls:SettingsExpander.Items>
                                </controls:SettingsExpander>
                            </StackPanel>
                        </controls:Case>

                        <!--  About  -->
                        <controls:Case Value="About">
                            <StackPanel Spacing="{StaticResource SettingsCardSpacing}">

                                <controls:SettingsCard Header="BetterLyrics" HeaderIcon="{ui:BitmapIcon Source=ms-appx:///Assets/Logo.png}">
                                    <controls:SettingsCard.Description>
                                        <RichTextBlock>
                                            <Paragraph>
                                                <Run x:Uid="SettingsPageVersion" />
                                                <Run Text="{x:Bind ViewModel.Version, Mode=OneWay}" />
                                            </Paragraph>
                                        </RichTextBlock>
                                    </controls:SettingsCard.Description>
                                </controls:SettingsCard>

                                <controls:SettingsCard
                                    x:Uid="SettingsPageGitHub"
                                    ActionIcon="{ui:FontIcon FontFamily={StaticResource IconFontFamily},
                                                             Glyph=&#xE8A7;}"
                                    Command="{x:Bind ViewModel.LaunchProjectGitHubPageCommand}"
                                    HeaderIcon="{ui:FontIcon FontFamily={StaticResource IconFontFamily},
                                                             Glyph=&#xE943;}"
                                    IsClickEnabled="True" />

                                <controls:SettingsCard x:Uid="SettingsPageFAQ" HeaderIcon="{ui:FontIcon FontFamily={StaticResource IconFontFamily}, Glyph=&#xE897;}">
                                    <HyperlinkButton Content="https://github.com/jayfunc/BetterLyrics/blob/dev/FAQ/FAQ.md" NavigateUri="https://github.com/jayfunc/BetterLyrics/blob/dev/FAQ/FAQ.md" />
                                </controls:SettingsCard>

                                <controls:SettingsCard x:Uid="SettingsPageQQGroup" HeaderIcon="{ui:BitmapIcon Source=ms-appx:///Assets/QQ.png}">
                                    <Button x:Uid="SettingsPageJoinNowButton" Click="QQGroupButton_Click" />
                                </controls:SettingsCard>

                                <controls:SettingsCard x:Uid="SettingsPageDiscord" HeaderIcon="{ui:BitmapIcon Source=ms-appx:///Assets/Discord.png}">
                                    <Button x:Uid="SettingsPageJoinNowButton" Click="DiscodGroupButton_Click" />
                                </controls:SettingsCard>

                                <controls:SettingsCard x:Uid="SettingsPageTelegram" HeaderIcon="{ui:BitmapIcon Source=ms-appx:///Assets/Telegram.png}">
                                    <Button x:Uid="SettingsPageJoinNowButton" Click="TelegramGroupButton_Click" />
                                </controls:SettingsCard>

                            </StackPanel>
                        </controls:Case>

                        <!--  Dev  -->
                        <controls:Case Value="Dev">
                            <StackPanel Spacing="{StaticResource SettingsCardSpacing}">

                                <controls:SettingsCard x:Uid="SettingsPageMockMusicPlaying">
                                    <HyperlinkButton x:Uid="SettingsPagePlayingMockMusicButton" NavigateUri="https://soundcloud.com/carlyraejepsen/cut-to-the-feeling" />
                                </controls:SettingsCard>

                                <controls:SettingsCard x:Uid="SettingsPageCache">
                                    <Button x:Uid="SettingsPageOpenLogFolderButton" Command="{x:Bind ViewModel.OpenCacheFolderCommand}" />
                                </controls:SettingsCard>

                                <controls:SettingsCard x:Uid="SettingsPageDebugOverlay">
                                    <ToggleSwitch IsOn="{x:Bind ViewModel.IsDebugOverlayEnabled, Mode=TwoWay}" />
                                </controls:SettingsCard>

                                <controls:SettingsCard x:Uid="SettingsPageLyricsTimelineThreshold">
                                    <StackPanel Orientation="Horizontal">
                                        <TextBlock x:Uid="SettingsPageSliderPrefix" VerticalAlignment="Center" />
                                        <TextBlock VerticalAlignment="Center" Text="{x:Bind ViewModel.TimelineSyncThreshold, Mode=OneWay}" />
                                        <TextBlock
                                            Margin="0,0,14,0"
                                            VerticalAlignment="Center"
                                            Text=" ms" />
                                        <Slider
                                            Maximum="1000"
                                            Minimum="0"
                                            SnapsTo="Ticks"
                                            StepFrequency="100"
                                            TickFrequency="100"
                                            TickPlacement="Outside"
                                            Value="{x:Bind ViewModel.TimelineSyncThreshold, Mode=TwoWay}" />
                                    </StackPanel>
                                </controls:SettingsCard>

                                <controls:SettingsCard x:Uid="SettingsPageLXMusicServer">
                                    <StackPanel Orientation="Horizontal" Spacing="12">
                                        <TextBox
                                            IsEnabled="{x:Bind ViewModel.IsLXMusicServerTesting, Converter={StaticResource BoolNegationConverter}, Mode=OneWay}"
                                            PlaceholderText="http://127.0.0.1:23330"
                                            Text="{x:Bind ViewModel.LXMusicServer, Mode=TwoWay}" />
                                        <Button
                                            x:Uid="SettingsPageServerTestButton"
                                            Command="{x:Bind ViewModel.LXMusicServerTestCommand}"
                                            IsEnabled="{x:Bind ViewModel.IsLXMusicServerTesting, Converter={StaticResource BoolNegationConverter}, Mode=OneWay}" />
                                    </StackPanel>
                                </controls:SettingsCard>


                            </StackPanel>
                        </controls:Case>

                    </controls:SwitchPresenter>
                </Grid>
            </ScrollViewer>
        </NavigationView>

        <scontrols:NotificationPanel
            x:Name="TipContainerCenter"
            Margin="0,0,0,52"
            HorizontalAlignment="Center"
            VerticalAlignment="Bottom"
            Canvas.ZIndex="1"
            FlowDirection="RightToLeft"
            Loaded="TipContainerCenter_Loaded"
            Orientation="Vertical"
            Visibility="Collapsed" />

    </Grid>
</Page>
