Wino-Mail/Wino.Mail.WinUI/Views/ProviderSelectionPage.xaml

<abstract:ProviderSelectionPageAbstract
    x:Class="Wino.Views.ProviderSelectionPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:abstract="using:Wino.Mail.WinUI.Views.Abstract"
    xmlns:accounts="using:Wino.Core.Domain.Models.Accounts"
    xmlns:coreViewModelData="using:Wino.Core.ViewModels.Data"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:domain="using:Wino.Core.Domain"
    xmlns:helpers="using:Wino.Helpers"
    xmlns:interfaces="using:Wino.Core.Domain.Interfaces"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
    mc:Ignorable="d">

    <ScrollViewer HorizontalAlignment="Center" VerticalScrollBarVisibility="Auto">
        <StackPanel
            Margin="0,12"
            HorizontalAlignment="Stretch"
            Spacing="20">

            <!--  Title  -->
            <StackPanel Spacing="4">
                <TextBlock Style="{StaticResource SubtitleTextBlockStyle}" Text="{x:Bind domain:Translator.ProviderSelection_Title}" />
                <TextBlock
                    Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                    Style="{StaticResource BodyTextBlockStyle}"
                    Text="{x:Bind domain:Translator.ProviderSelection_Subtitle}" />
            </StackPanel>

            <!--  Account Name + Color Picker  -->
            <Grid ColumnSpacing="12">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>

                <TextBox
                    Header="{x:Bind domain:Translator.ProviderSelection_AccountNameHeader}"
                    PlaceholderText="{x:Bind domain:Translator.ProviderSelection_AccountNamePlaceholder}"
                    Text="{x:Bind ViewModel.AccountName, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />

                <Button Grid.Column="1" VerticalAlignment="Bottom">
                    <Grid>
                        <!--  No color selected placeholder  -->
                        <FontIcon
                            FontSize="16"
                            Glyph="&#xE771;"
                            Visibility="{x:Bind helpers:XamlHelpers.ReverseBoolToVisibilityConverter(ViewModel.IsColorSelected), Mode=OneWay}" />
                        <!--  Color swatch  -->
                        <Ellipse
                            Width="16"
                            Height="16"
                            Fill="{x:Bind helpers:XamlHelpers.GetSolidColorBrushFromHex(ViewModel.SelectedColor.Hex), Mode=OneWay}"
                            Visibility="{x:Bind helpers:XamlHelpers.BoolToVisibilityConverter(ViewModel.IsColorSelected), Mode=OneWay}" />
                    </Grid>
                    <Button.Flyout>
                        <Flyout Placement="TopEdgeAlignedLeft">
                            <StackPanel Spacing="8">
                                <GridView
                                    Width="150"
                                    ItemTemplate="{StaticResource AccountColorTemplate}"
                                    ItemsSource="{x:Bind ViewModel.AvailableColors, Mode=OneWay}"
                                    SelectedItem="{x:Bind ViewModel.SelectedColor, Mode=TwoWay}" />
                                <HyperlinkButton
                                    HorizontalAlignment="Center"
                                    Command="{x:Bind ViewModel.ClearColorCommand}"
                                    Content="{x:Bind domain:Translator.ProviderSelection_ClearColor}"
                                    Visibility="{x:Bind helpers:XamlHelpers.BoolToVisibilityConverter(ViewModel.IsColorSelected), Mode=OneWay}" />
                            </StackPanel>
                        </Flyout>
                    </Button.Flyout>
                </Button>
            </Grid>

            <Border
                MaxWidth="600"
                Padding="12"
                Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
                BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
                BorderThickness="1"
                CornerRadius="8">
                <StackPanel Spacing="10">
                    <StackPanel Spacing="2">
                        <TextBlock FontWeight="SemiBold" Text="{x:Bind domain:Translator.AccountCreation_InitialSynchronization_Title}" />
                        <TextBlock
                            Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                            Style="{StaticResource CaptionTextBlockStyle}"
                            Text="{x:Bind domain:Translator.AccountCreation_InitialSynchronization_Description}"
                            TextWrapping="WrapWholeWords" />
                    </StackPanel>

                    <ListView
                        HorizontalAlignment="Center"
                        HorizontalContentAlignment="Stretch"
                        ItemsSource="{x:Bind ViewModel.InitialSynchronizationRanges, Mode=OneWay}"
                        SelectedItem="{x:Bind ViewModel.SelectedInitialSynchronizationRange, Mode=TwoWay}">
                        <ListView.ItemsPanel>
                            <ItemsPanelTemplate>
                                <ItemsStackPanel Orientation="Horizontal" />
                            </ItemsPanelTemplate>
                        </ListView.ItemsPanel>
                        <ListView.ItemTemplate>
                            <DataTemplate x:DataType="accounts:InitialSynchronizationRangeOption">
                                <TextBlock Text="{x:Bind DisplayText}" />
                            </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>

                    <muxc:InfoBar
                        Title="{x:Bind domain:Translator.GeneralTitle_Warning}"
                        Margin="0,2,0,0"
                        IsOpen="True"
                        Message="{x:Bind domain:Translator.AccountCreation_InitialSynchronization_EverythingWarning}"
                        Severity="Warning"
                        Visibility="{x:Bind ViewModel.IsInitialSynchronizationWarningVisible, Mode=OneWay}" />
                </StackPanel>
            </Border>

            <!--  Provider List  -->
            <ItemsView
                HorizontalContentAlignment="Stretch"
                ItemsSource="{x:Bind ViewModel.Providers, Mode=OneWay}"
                SelectionChanged="ProviderSelectionChanged"
                SelectionMode="Single">

                <ItemsView.ItemTemplate>
                    <DataTemplate x:DataType="interfaces:IProviderDetail">
                        <ItemContainer Padding="12,10" HorizontalAlignment="Stretch">
                            <Grid Padding="16" ColumnSpacing="12">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>
                                <Image
                                    Width="32"
                                    Height="32"
                                    Source="{x:Bind ProviderImage}" />
                                <StackPanel
                                    Grid.Column="1"
                                    VerticalAlignment="Center"
                                    Spacing="2">
                                    <TextBlock FontWeight="SemiBold" Text="{x:Bind Name}" />
                                    <TextBlock
                                        Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                                        Style="{StaticResource CaptionTextBlockStyle}"
                                        Text="{x:Bind Description}" />
                                </StackPanel>
                            </Grid>
                        </ItemContainer>
                    </DataTemplate>
                </ItemsView.ItemTemplate>
            </ItemsView>

            <!--  Continue Button  -->
            <Button
                HorizontalAlignment="Stretch"
                Command="{x:Bind ViewModel.ProceedCommand}"
                Content="{x:Bind domain:Translator.ProviderSelection_ContinueButton}"
                IsEnabled="{x:Bind ViewModel.CanProceed, Mode=OneWay}"
                Style="{StaticResource AccentButtonStyle}" />

        </StackPanel>
    </ScrollViewer>
</abstract:ProviderSelectionPageAbstract>