<?xml version="1.0" encoding="utf-8" ?>
<abstract:CalendarEventComposePageAbstract
    x:Class="Wino.Calendar.Views.CalendarEventComposePage"
    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:calendarViewModels="using:Wino.Calendar.ViewModels"
    xmlns:controls="using:Wino.Controls"
    xmlns:coreControls="using:Wino.Mail.WinUI.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:data="using:Wino.Calendar.ViewModels.Data"
    xmlns:domain="using:Wino.Core.Domain"
    xmlns:helpers="using:Wino.Helpers"
    xmlns:mailControls="using:Wino.Mail.Controls"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:shared="using:Wino.Core.Domain.Entities.Shared"
    xmlns:toolkit="using:CommunityToolkit.WinUI.Controls"
    Style="{StaticResource PageStyle}"
    mc:Ignorable="d">

    <Page.Resources>
        <Style
            x:Key="FieldToggleButtonStyle"
            BasedOn="{StaticResource DefaultToggleButtonStyle}"
            TargetType="ToggleButton">
            <Setter Property="Padding" Value="12,6" />
            <Setter Property="MinWidth" Value="0" />
            <Setter Property="MinHeight" Value="0" />
            <Setter Property="CornerRadius" Value="4" />
        </Style>

    </Page.Resources>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <!--  Top Bar  -->
        <Border
            Background="{ThemeResource WinoContentZoneBackgroud}"
            BorderBrush="{StaticResource CardStrokeColorDefaultBrush}"
            BorderThickness="1"
            CornerRadius="7">
            <Grid Padding="12,6" ColumnSpacing="12">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>

                <!--  Left: Calendar, Show As, Reminder  -->
                <StackPanel Orientation="Horizontal" Spacing="12">

                    <!--  Calendar  -->
                    <StackPanel
                        VerticalAlignment="Center"
                        Orientation="Horizontal"
                        Spacing="8">
                        <coreControls:WinoFontIcon FontSize="14" Icon="Calendar" />
                        <Button
                            Padding="10,6"
                            HorizontalContentAlignment="Left"
                            Style="{StaticResource DefaultButtonStyle}">
                            <Button.Flyout>
                                <Flyout x:Name="CalendarSelectionFlyout" Placement="BottomEdgeAlignedLeft">
                                    <ScrollViewer MaxHeight="360">
                                        <ItemsControl ItemsSource="{x:Bind ViewModel.AvailableCalendarGroups, Mode=OneWay}">
                                            <ItemsControl.ItemTemplate>
                                                <DataTemplate x:DataType="data:GroupedAccountCalendarViewModel">
                                                    <StackPanel
                                                        MinWidth="320"
                                                        Padding="0,0,0,12"
                                                        Spacing="6">
                                                        <TextBlock FontWeight="SemiBold">
                                                            <Run Text="{x:Bind Account.Name}" />
                                                            <Run Text=" (" />
                                                            <Run Text="{x:Bind Account.Address}" />
                                                            <Run Text=")" />
                                                        </TextBlock>

                                                        <ListView
                                                            IsItemClickEnabled="True"
                                                            ItemClick="ComposeCalendarClicked"
                                                            ItemsSource="{x:Bind AccountCalendars}"
                                                            SelectionMode="None">
                                                            <ListView.ItemTemplate>
                                                                <DataTemplate x:DataType="data:AccountCalendarViewModel">
                                                                    <Grid ColumnSpacing="10">
                                                                        <Grid.ColumnDefinitions>
                                                                            <ColumnDefinition Width="Auto" />
                                                                            <ColumnDefinition Width="*" />
                                                                        </Grid.ColumnDefinitions>

                                                                        <Ellipse
                                                                            Width="14"
                                                                            Height="14"
                                                                            VerticalAlignment="Center"
                                                                            Fill="{x:Bind helpers:XamlHelpers.GetSolidColorBrushFromHex(BackgroundColorHex), Mode=OneWay}" />

                                                                        <TextBlock
                                                                            Grid.Column="1"
                                                                            VerticalAlignment="Center"
                                                                            Text="{x:Bind Name}" />
                                                                    </Grid>
                                                                </DataTemplate>
                                                            </ListView.ItemTemplate>
                                                        </ListView>
                                                    </StackPanel>
                                                </DataTemplate>
                                            </ItemsControl.ItemTemplate>
                                        </ItemsControl>
                                    </ScrollViewer>
                                </Flyout>
                            </Button.Flyout>
                            <StackPanel Orientation="Horizontal" Spacing="8">
                                <Ellipse
                                    Width="10"
                                    Height="10"
                                    VerticalAlignment="Center"
                                    Fill="{x:Bind helpers:XamlHelpers.GetSolidColorBrushFromHex(ViewModel.SelectedCalendar.BackgroundColorHex), Mode=OneWay}" />
                                <StackPanel Spacing="0">
                                    <TextBlock Text="{x:Bind ViewModel.SelectedCalendarDisplayText, Mode=OneWay}" />
                                    <TextBlock
                                        FontSize="11"
                                        Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                                        Text="{x:Bind ViewModel.SelectedCalendarAccountText, Mode=OneWay}"
                                        Visibility="{x:Bind helpers:XamlHelpers.StringToVisibilityConverter(ViewModel.SelectedCalendarAccountText), Mode=OneWay}" />
                                </StackPanel>
                                <FontIcon Glyph="&#xE70D;" />
                            </StackPanel>
                        </Button>
                    </StackPanel>

                    <!--  Show As  -->
                    <StackPanel
                        VerticalAlignment="Center"
                        Orientation="Horizontal"
                        Spacing="8">
                        <coreControls:WinoFontIcon FontSize="14" Icon="CalendarShowAs" />
                        <ComboBox
                            VerticalAlignment="Center"
                            ItemsSource="{x:Bind ViewModel.ShowAsOptions}"
                            SelectedItem="{x:Bind ViewModel.SelectedShowAsOption, Mode=TwoWay}">
                            <ComboBox.ItemTemplate>
                                <DataTemplate x:DataType="calendarViewModels:ShowAsOption">
                                    <TextBlock Text="{x:Bind DisplayText}" />
                                </DataTemplate>
                            </ComboBox.ItemTemplate>
                        </ComboBox>
                    </StackPanel>

                    <!--  Reminder  -->
                    <StackPanel
                        VerticalAlignment="Center"
                        Orientation="Horizontal"
                        Spacing="8">
                        <coreControls:WinoFontIcon FontSize="14" Icon="Reminder" />
                        <ComboBox
                            VerticalAlignment="Center"
                            ItemsSource="{x:Bind ViewModel.ReminderOptions}"
                            SelectedItem="{x:Bind ViewModel.SelectedReminderOption, Mode=TwoWay}">
                            <ComboBox.ItemTemplate>
                                <DataTemplate x:DataType="calendarViewModels:ReminderOption">
                                    <TextBlock Text="{x:Bind DisplayText}" />
                                </DataTemplate>
                            </ComboBox.ItemTemplate>
                        </ComboBox>
                    </StackPanel>
                </StackPanel>

                <StackPanel
                    Grid.Column="1"
                    Orientation="Horizontal"
                    Spacing="4">
                    <AppBarButton Command="{x:Bind ViewModel.CancelCommand}" Label="{x:Bind domain:Translator.Buttons_Discard}">
                        <AppBarButton.Icon>
                            <coreControls:WinoFontIcon Icon="Delete" />
                        </AppBarButton.Icon>
                    </AppBarButton>
                    <AppBarButton Command="{x:Bind ViewModel.CreateCommand}" Label="{x:Bind domain:Translator.Buttons_Save}">
                        <AppBarButton.Icon>
                            <coreControls:WinoFontIcon Icon="Save" />
                        </AppBarButton.Icon>
                    </AppBarButton>
                </StackPanel>
            </Grid>
        </Border>

        <!--  Scrollable Content  -->
        <ScrollViewer Grid.Row="1" MaxWidth="1200">
            <StackPanel
                Padding="40,24,40,40"
                HorizontalAlignment="Stretch"
                Spacing="0">

                <!--  Title  -->
                <TextBox
                    FontSize="24"
                    PlaceholderText="{x:Bind domain:Translator.CalendarEventCompose_TitlePlaceholder}"
                    Text="{x:Bind ViewModel.Title, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
                    <TextBox.Style>
                        <Style BasedOn="{StaticResource DefaultTextBoxStyle}" TargetType="TextBox">
                            <Setter Property="Background" Value="Transparent" />
                            <Setter Property="BorderThickness" Value="0" />
                            <Setter Property="BorderBrush" Value="Transparent" />
                            <!--<Setter Property="Padding" Value="0,8" />-->
                        </Style>
                    </TextBox.Style>
                </TextBox>

                <!--  Divider  -->
                <Border
                    Height="1"
                    Margin="0,0,0,20"
                    Background="{ThemeResource DividerStrokeColorDefaultBrush}" />

                <!--  Date Row  -->
                <StackPanel
                    Margin="0,0,0,12"
                    Orientation="Horizontal"
                    Spacing="12">
                    <DatePicker Date="{x:Bind ViewModel.StartDate, Mode=TwoWay}" Header="{x:Bind domain:Translator.CalendarEventCompose_StartDate}" />

                    <ToggleButton
                        VerticalAlignment="Bottom"
                        Content="{x:Bind domain:Translator.CalendarEventCompose_AllDay}"
                        IsChecked="{x:Bind ViewModel.IsAllDay, Mode=TwoWay}"
                        Style="{StaticResource FieldToggleButtonStyle}" />
                </StackPanel>

                <!--  Time Row  -->
                <StackPanel
                    Margin="0,0,0,8"
                    Orientation="Horizontal"
                    Spacing="12"
                    Visibility="{x:Bind helpers:XamlHelpers.ReverseBoolToVisibilityConverter(ViewModel.IsAllDay), Mode=OneWay}">
                    <TimePicker
                        ClockIdentifier="{x:Bind ViewModel.TimePickerClockIdentifier, Mode=OneWay}"
                        Header="{x:Bind domain:Translator.CalendarEventCompose_StartTime}"
                        SelectedTime="{x:Bind ViewModel.StartTime, Mode=TwoWay}" />

                    <TextBlock
                        Margin="0,28,0,0"
                        VerticalAlignment="Center"
                        Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                        Text="—" />

                    <TimePicker
                        ClockIdentifier="{x:Bind ViewModel.TimePickerClockIdentifier, Mode=OneWay}"
                        Header="{x:Bind domain:Translator.CalendarEventCompose_EndTime}"
                        SelectedTime="{x:Bind ViewModel.EndTime, Mode=TwoWay}" />
                </StackPanel>

                <!--  All Day End Date  -->
                <DatePicker
                    Margin="0,0,0,8"
                    Date="{x:Bind ViewModel.AllDayEndDate, Mode=TwoWay}"
                    Header="{x:Bind domain:Translator.CalendarEventCompose_EndDate}"
                    Visibility="{x:Bind ViewModel.IsAllDay, Mode=OneWay}" />

                <!--  Date/Time Summary  -->
                <TextBlock
                    Margin="0,0,0,16"
                    FontSize="13"
                    Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                    Text="{x:Bind ViewModel.RecurrenceSummary, Mode=OneWay}"
                    TextWrapping="Wrap" />

                <!--  Location  -->
                <TextBox
                    Margin="0,0,0,12"
                    PlaceholderText="{x:Bind domain:Translator.CalendarEventCompose_LocationPlaceholder}"
                    Text="{x:Bind ViewModel.Location, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />

                <!--  Recurring Toggle  -->
                <ToggleButton
                    Margin="0,0,0,4"
                    IsChecked="{x:Bind ViewModel.IsRecurring, Mode=TwoWay}"
                    Style="{StaticResource FieldToggleButtonStyle}">
                    <StackPanel Orientation="Horizontal" Spacing="8">
                        <coreControls:WinoFontIcon FontSize="14" Icon="CalendarEventRepeat" />
                        <TextBlock Text="{x:Bind domain:Translator.CalendarEventCompose_Recurring}" />
                    </StackPanel>
                </ToggleButton>

                <!--  Recurrence Panel  -->
                <Border
                    Margin="0,8,0,4"
                    Padding="16"
                    Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
                    CornerRadius="{StaticResource ControlCornerRadius}"
                    Visibility="{x:Bind ViewModel.IsRecurring, Mode=OneWay}">
                    <StackPanel Spacing="12">
                        <Grid ColumnSpacing="8">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>

                            <TextBlock VerticalAlignment="Center" Text="{x:Bind domain:Translator.CalendarEventCompose_RepeatEvery}" />
                            <ComboBox
                                Grid.Column="1"
                                ItemsSource="{x:Bind ViewModel.RecurrenceIntervalOptions}"
                                SelectedItem="{x:Bind ViewModel.SelectedRecurrenceInterval, Mode=TwoWay}" />
                            <TextBlock
                                Grid.Column="2"
                                VerticalAlignment="Center"
                                Text="{x:Bind domain:Translator.CalendarEventCompose_Every}" />
                            <ComboBox
                                Grid.Column="3"
                                ItemsSource="{x:Bind ViewModel.RecurrenceFrequencyOptions}"
                                SelectedItem="{x:Bind ViewModel.SelectedRecurrenceFrequencyOption, Mode=TwoWay}">
                                <ComboBox.ItemTemplate>
                                    <DataTemplate x:DataType="calendarViewModels:CalendarComposeFrequencyOption">
                                        <TextBlock Text="{x:Bind DisplayText}" />
                                    </DataTemplate>
                                </ComboBox.ItemTemplate>
                            </ComboBox>
                            <TextBlock
                                Grid.Column="4"
                                VerticalAlignment="Center"
                                Text="{x:Bind domain:Translator.CalendarEventCompose_ForWeekdays}"
                                Visibility="{x:Bind ViewModel.IsDailyRecurrenceSelected, Mode=OneWay}" />
                            <ItemsControl
                                Grid.Column="5"
                                IsEnabled="{x:Bind ViewModel.IsDailyRecurrenceSelected, Mode=OneWay}"
                                ItemsSource="{x:Bind ViewModel.WeekdayOptions}"
                                Visibility="{x:Bind ViewModel.IsDailyRecurrenceSelected, Mode=OneWay}">
                                <ItemsControl.ItemsPanel>
                                    <ItemsPanelTemplate>
                                        <StackPanel Orientation="Horizontal" Spacing="4" />
                                    </ItemsPanelTemplate>
                                </ItemsControl.ItemsPanel>
                                <ItemsControl.ItemTemplate>
                                    <DataTemplate x:DataType="calendarViewModels:CalendarComposeWeekdayOption">
                                        <ToggleButton
                                            Width="32"
                                            Height="32"
                                            Padding="0"
                                            IsChecked="{x:Bind IsSelected, Mode=TwoWay}">
                                            <TextBlock HorizontalAlignment="Center" Text="{x:Bind Label}" />
                                        </ToggleButton>
                                    </DataTemplate>
                                </ItemsControl.ItemTemplate>
                            </ItemsControl>
                            <TextBlock
                                Grid.Column="6"
                                VerticalAlignment="Center"
                                Text="{x:Bind domain:Translator.CalendarEventCompose_Until}" />
                            <CalendarDatePicker
                                Grid.Column="7"
                                Date="{x:Bind ViewModel.RecurrenceEndDate, Mode=TwoWay}"
                                PlaceholderText="{x:Bind domain:Translator.CalendarEventCompose_NoEndDate}" />
                            <Button
                                Grid.Column="8"
                                Command="{x:Bind ViewModel.ClearRecurrenceEndDateCommand}"
                                Style="{StaticResource TransparentActionButtonStyle}">
                                <coreControls:WinoFontIcon FontSize="14" Icon="Dismiss" />
                            </Button>
                        </Grid>
                    </StackPanel>
                </Border>

                <!--  People & Attachments Toggle Row  -->
                <StackPanel
                    Margin="0,12,0,4"
                    Orientation="Horizontal"
                    Spacing="8">
                    <ToggleButton x:Name="PeopleToggle" Style="{StaticResource FieldToggleButtonStyle}">
                        <StackPanel Orientation="Horizontal" Spacing="8">
                            <coreControls:WinoFontIcon FontSize="14" Icon="People" />
                            <TextBlock Text="{x:Bind domain:Translator.CalendarEventDetails_People}" />
                        </StackPanel>
                    </ToggleButton>

                    <ToggleButton x:Name="AttachmentsToggle" Style="{StaticResource FieldToggleButtonStyle}">
                        <StackPanel Orientation="Horizontal" Spacing="8">
                            <coreControls:WinoFontIcon FontSize="14" Icon="Attachment" />
                            <TextBlock Text="{x:Bind domain:Translator.CalendarEventDetails_Attachments}" />
                        </StackPanel>
                    </ToggleButton>
                </StackPanel>

                <!--  People Pane  -->
                <Border
                    Margin="0,8,0,0"
                    Padding="16"
                    Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
                    CornerRadius="{StaticResource ControlCornerRadius}"
                    Visibility="{x:Bind PeopleToggle.IsChecked, Mode=OneWay}">
                    <StackPanel Spacing="8">
                        <toolkit:TokenizingTextBox
                            x:Name="AttendeeBox"
                            BorderThickness="0"
                            ItemsSource="{x:Bind ViewModel.Attendees, Mode=OneWay}"
                            LostFocus="AddressBoxLostFocus"
                            PlaceholderText="{x:Bind domain:Translator.CalendarEventDetails_InviteSomeone}"
                            SuggestedItemTemplate="{StaticResource ContactSuggestionTemplate}"
                            TokenDelimiter=";"
                            TokenItemAdding="TokenItemAdding"
                            TokenItemTemplate="{StaticResource ContactTokenTemplate}" />

                        <ListView
                            Margin="-8,0,-8,-8"
                            ItemsSource="{x:Bind ViewModel.Attendees, Mode=OneWay}"
                            SelectionMode="None">
                            <ListView.ItemContainerStyle>
                                <Style TargetType="ListViewItem">
                                    <Setter Property="Padding" Value="8,4" />
                                    <Setter Property="MinHeight" Value="0" />
                                </Style>
                            </ListView.ItemContainerStyle>
                            <ListView.ItemTemplate>
                                <DataTemplate x:DataType="data:CalendarComposeAttendeeViewModel">
                                    <Grid ColumnSpacing="10">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="Auto" />
                                            <ColumnDefinition Width="*" />
                                            <ColumnDefinition Width="Auto" />
                                        </Grid.ColumnDefinitions>

                                        <controls:ImagePreviewControl
                                            Width="32"
                                            Height="32"
                                            Address="{x:Bind Email}"
                                            DisplayNameOverride="{x:Bind DisplayName}"
                                            PreviewContact="{x:Bind ResolvedContact}" />

                                        <StackPanel
                                            Grid.Column="1"
                                            VerticalAlignment="Center"
                                            Spacing="1">
                                            <TextBlock
                                                FontSize="13"
                                                Text="{x:Bind DisplayName}"
                                                TextTrimming="CharacterEllipsis" />
                                            <TextBlock
                                                FontSize="11"
                                                Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                                                Text="{x:Bind Email}"
                                                TextTrimming="CharacterEllipsis"
                                                Visibility="{x:Bind HasDistinctDisplayName}" />
                                        </StackPanel>

                                        <Button
                                            Grid.Column="2"
                                            Padding="6,4"
                                            VerticalAlignment="Center"
                                            Click="RemoveAttendeeClicked"
                                            Style="{StaticResource TransparentActionButtonStyle}"
                                            Tag="{x:Bind}">
                                            <coreControls:WinoFontIcon FontSize="12" Icon="Delete" />
                                        </Button>
                                    </Grid>
                                </DataTemplate>
                            </ListView.ItemTemplate>
                        </ListView>
                    </StackPanel>
                </Border>

                <!--  Attachments Pane  -->
                <Border
                    x:Name="AttachmentsPane"
                    Margin="0,8,0,0"
                    Padding="16"
                    AllowDrop="True"
                    Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
                    CornerRadius="{StaticResource ControlCornerRadius}"
                    DragLeave="AttachmentsPane_DragLeave"
                    DragOver="AttachmentsPane_DragOver"
                    Drop="AttachmentsPane_Drop"
                    ToolTipService.ToolTip="{x:Bind ViewModel.AttachmentsDisabledTooltipText, Mode=OneWay}"
                    Visibility="{x:Bind AttachmentsToggle.IsChecked, Mode=OneWay}">
                    <StackPanel Spacing="8">
                        <Button
                            HorizontalAlignment="Left"
                            Command="{x:Bind ViewModel.AddAttachmentsCommand}"
                            IsEnabled="{x:Bind ViewModel.CanAddAttachments, Mode=OneWay}"
                            Style="{StaticResource TransparentActionButtonStyle}">
                            <StackPanel Orientation="Horizontal" Spacing="8">
                                <coreControls:WinoFontIcon FontSize="14" Icon="AttachmentNew" />
                                <TextBlock
                                    FontSize="18"
                                    FontWeight="SemiBold"
                                    Text="+" />
                            </StackPanel>
                        </Button>

                        <GridView
                            Margin="-8,0,-8,-8"
                            ItemsSource="{x:Bind ViewModel.Attachments, Mode=OneWay}"
                            SelectionMode="None">
                            <!--<ListView.ItemContainerStyle>
                                <Style BasedOn="{StaticResource DefaultListViewItemStyle}" TargetType="ListViewItem">
                                    <Setter Property="Padding" Value="8,4" />
                                    <Setter Property="MinHeight" Value="0" />
                                </Style>
                            </ListView.ItemContainerStyle>-->
                            <GridView.ItemTemplate>
                                <DataTemplate x:DataType="data:CalendarComposeAttachmentViewModel">
                                    <Grid Height="44" ColumnSpacing="8">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="32" />
                                            <ColumnDefinition Width="*" />
                                            <ColumnDefinition Width="Auto" />
                                        </Grid.ColumnDefinitions>

                                        <ContentControl
                                            VerticalAlignment="Center"
                                            Content="{x:Bind AttachmentType}"
                                            ContentTemplateSelector="{StaticResource FileTypeIconSelector}" />

                                        <StackPanel
                                            Grid.Column="1"
                                            VerticalAlignment="Center"
                                            Spacing="1">
                                            <TextBlock
                                                FontSize="13"
                                                Text="{x:Bind FileName}"
                                                TextTrimming="CharacterEllipsis" />
                                            <TextBlock
                                                FontSize="11"
                                                Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                                                Text="{x:Bind ReadableSize}" />
                                        </StackPanel>

                                        <Button
                                            Grid.Column="2"
                                            Padding="6,4"
                                            VerticalAlignment="Center"
                                            Click="RemoveAttachmentClicked"
                                            Style="{StaticResource TransparentActionButtonStyle}"
                                            Tag="{x:Bind}">
                                            <coreControls:WinoFontIcon
                                                FontSize="20"
                                                Foreground="{ThemeResource DeleteBrush}"
                                                Icon="Delete" />
                                        </Button>
                                    </Grid>
                                </DataTemplate>
                            </GridView.ItemTemplate>
                        </GridView>
                    </StackPanel>
                </Border>

                <!--  Notes Header  -->
                <StackPanel
                    Margin="0,20,0,8"
                    Orientation="Horizontal"
                    Spacing="8">
                    <coreControls:WinoFontIcon
                        FontSize="14"
                        Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                        Icon="Draft" />
                    <TextBlock Style="{StaticResource BodyStrongTextBlockStyle}" Text="{x:Bind domain:Translator.CalendarEventCompose_Notes}" />
                </StackPanel>
                <!--  Notes Editor  -->
                <mailControls:EditorTabbedCommandBarControl CommandTarget="{x:Bind NotesEditor}">
                    <mailControls:EditorTabbedCommandBarControl.PaneCustomContent>
                        <toolkit:TabbedCommandBarItem
                            CommandAlignment="Right"
                            IsDynamicOverflowEnabled="True"
                            OverflowButtonAlignment="Left">
                            <AppBarButton Click="ToggleNotesEditorThemeClicked" ToolTipService.ToolTip="{x:Bind GetEditorThemeToolTip(NotesEditor.IsEditorDarkMode), Mode=OneWay}">
                                <AppBarButton.Icon>
                                    <coreControls:WinoFontIcon Icon="{x:Bind GetEditorThemeIcon(NotesEditor.IsEditorDarkMode), Mode=OneWay}" />
                                </AppBarButton.Icon>
                            </AppBarButton>
                        </toolkit:TabbedCommandBarItem>
                    </mailControls:EditorTabbedCommandBarControl.PaneCustomContent>
                </mailControls:EditorTabbedCommandBarControl>
                <mailControls:WebViewEditorControl
                    x:Name="NotesEditor"
                    MinHeight="500"
                    IsEditorDarkMode="{x:Bind ViewModel.IsDarkWebviewRenderer, Mode=OneWay}" />
            </StackPanel>
        </ScrollViewer>
    </Grid>
</abstract:CalendarEventComposePageAbstract>

