<?xml version="1.0" encoding="utf-8"?>
<UserControl
    x:Class="Sonex.Client.Layouts.ItemsAndContentLayout"
    x:Name="Root"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="using:Sonex.Client.Layouts"
    mc:Ignorable="d">

    <UserControl.Resources>
        <DataTemplate x:Key="DefaultItemTemplate" x:DataType="local:ItemsAndContentListItem">
            <Grid Padding="0 8 0 8">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>

                <PersonPicture Grid.Column="0"
                               Margin="0,0,8,0"
                               Width="{x:Bind PictureSize, Mode=OneWay}"
                               Height="{x:Bind PictureSize, Mode=OneWay}"
                               Initials="{x:Bind Initials, Mode=OneWay}"
                               VerticalAlignment="Center"
                               DisplayName="{x:Bind Title, Mode=OneWay}"
                               ProfilePicture="{x:Bind Picture, Mode=OneWay}"
                               PreferSmallImage="{x:Bind PreferSmallImage, Mode=OneWay}"
                               Opacity="{x:Bind Opacity, Mode=OneWay}"
                               Background="{ThemeResource AccentFillColorTertiaryBrush}"
                               Foreground="{ThemeResource TextOnAccentFillColorPrimaryBrush}"
                               Visibility="{x:Bind PictureVisibility, Mode=OneWay}" />

                <StackPanel Grid.Column="1"
                            Spacing="2"
                            VerticalAlignment="Center">

                    <TextBlock Text="{x:Bind Title, Mode=OneWay}"
                               Opacity="{x:Bind Opacity, Mode=OneWay}"
                               TextTrimming="CharacterEllipsis"
                               Style="{ThemeResource BaseTextBlockStyle}" />

                    <TextBlock Text="{x:Bind Subtitle, Mode=OneWay}"
                               Opacity="{x:Bind Opacity, Mode=OneWay}"
                               TextTrimming="CharacterEllipsis"
                               TextWrapping="NoWrap"
                               Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                               Style="{ThemeResource BodyTextBlockStyle}"
                               Visibility="{x:Bind SubtitleVisibility, Mode=OneWay}" />

                    <TextBlock Text="{x:Bind Description, Mode=OneWay}"
                               Opacity="{x:Bind Opacity, Mode=OneWay}"
                               TextTrimming="CharacterEllipsis"
                               MaxLines="2"
                               Foreground="{ThemeResource TextFillColorTertiaryBrush}"
                               Style="{ThemeResource CaptionTextBlockStyle}"
                               Visibility="{x:Bind DescriptionVisibility, Mode=OneWay}" />
                </StackPanel>

                <Button Grid.Column="2"
                        Margin="8,0,0,0"
                        VerticalAlignment="Center"
                        ToolTipService.ToolTip="{x:Bind DeleteToolTip, Mode=OneWay}"
                        Visibility="{x:Bind ItemDeleteButtonVisibility, Mode=OneWay}"
                        Click="ItemDeleteButton_Click"
                        Foreground="{ThemeResource TextFillColorTertiaryBrush}"
                        Style="{StaticResource SubtleButtonStyle}">
                    <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE74D;" FontSize="16" />
                </Button>
            </Grid>
        </DataTemplate>
    </UserControl.Resources>

    <Grid CornerRadius="10 0 0 0" BorderBrush="{ThemeResource SurfaceStrokeColorFlyoutBrush}" BorderThickness="1 1 0 0">
        <Grid.ColumnDefinitions>
            <ColumnDefinition x:Name="LeftPaneColumn" Width="{Binding LeftPaneWidth, ElementName=Root}" />
            <ColumnDefinition x:Name="RightPaneColumn" Width="*" />
        </Grid.ColumnDefinitions>

        <Border x:Name="LeftPaneBorder"
                Grid.Column="0"
                BorderBrush="{ThemeResource SurfaceStrokeColorFlyoutBrush}"
                BorderThickness="0 0 1 0"
                Padding="0">

            <Grid Background="{StaticResource CardBackgroundFillColorDefaultBrush}" RowSpacing="6" Padding="8 2 8 2">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="*" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>

                <Border x:Name="ToolbarBorder" Grid.Row="0">
                    <Grid ColumnSpacing="0" Margin="0" Padding="0" >
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>
                        <Grid.Resources>
                            <Style BasedOn="{StaticResource DefaultAppBarButtonStyle}" TargetType="AppBarButton">
                                <Setter Property="LabelPosition" Value="Collapsed" />
                                <Setter Property="Width" Value="48" />
                                <Setter Property="Margin" Value="0" />
                                <Setter Property="Padding" Value="0" />
                                <Setter Property="Height" Value="48" />
                            </Style>
                        </Grid.Resources>

                        <AutoSuggestBox x:Name="SearchBox"
                                        VerticalAlignment="Center"
                                        Height="32"
                                        Grid.Column="0"
                                        QueryIcon="Find"
                                        PlaceholderText="{Binding SearchPlaceholder, ElementName=Root}"
                                        TextChanged="SearchBox_TextChanged"
                                        Visibility="Visible" />

                        <AppBarButton x:Name="SortButton" Grid.Column="1" Icon="Sort" Label="{x:Bind SortToolTip, Mode=OneWay}" ToolTipService.ToolTip="{x:Bind SortToolTip, Mode=OneWay}">
                            <AppBarButton.Flyout>
                                <MenuFlyout>
                                    <ToggleMenuFlyoutItem x:Name="SortByTitleMenuItem"
                                                          Text=""
                                                          Click="SortByTitleMenuItem_Click" />
                                    <ToggleMenuFlyoutItem x:Name="SortBySubtitleMenuItem"
                                                          Text=""
                                                          Click="SortBySubtitleMenuItem_Click" />
                                    <ToggleMenuFlyoutItem x:Name="SortByDescriptionMenuItem"
                                                          Text=""
                                                          Click="SortByDescriptionMenuItem_Click" />
                                    <ToggleMenuFlyoutItem x:Name="SortByKeyMenuItem"
                                                          Text=""
                                                          Click="SortByKeyMenuItem_Click" />
                                    <ToggleMenuFlyoutItem x:Name="SortByIdMenuItem"
                                                          Text=""
                                                          Click="SortByIdMenuItem_Click" />
                                    <ToggleMenuFlyoutItem x:Name="SortByIsEnabledMenuItem"
                                                          Text=""
                                                          Click="SortByIsEnabledMenuItem_Click" />
                                    <MenuFlyoutSeparator x:Name="SortOptionsSeparator" />
                                    <ToggleMenuFlyoutItem x:Name="SortDescendingMenuItem"
                                                          Text="Descending"
                                                          Click="SortDescendingMenuItem_Click" />
                                </MenuFlyout>
                            </AppBarButton.Flyout>
                        </AppBarButton>
                        <AppBarButton x:Name="AddButton" Grid.Column="2" Icon="Add" Label="{x:Bind AddToolTip, Mode=OneWay}" Click="AddButton_Click" ToolTipService.ToolTip="{x:Bind AddToolTip, Mode=OneWay}"/>
                    </Grid>
                </Border>

                <ListView x:Name="PART_ListView"
                          Grid.Row="1"
                          SelectionMode="Single"
                          DoubleTapped="PART_ListView_DoubleTapped"
                          SelectionChanged="PART_ListView_SelectionChanged">
                    <ListView.ItemContainerTransitions>
                        <TransitionCollection />
                    </ListView.ItemContainerTransitions>
                </ListView>

                <Border x:Name="FooterBorder"
                        Grid.Row="2"
                        Padding="8"
                        BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
                        BorderThickness="0,1,0,0"
                        Visibility="Collapsed">
                    <ContentPresenter Content="{Binding Footer, ElementName=Root}" />
                </Border>
            </Grid>
        </Border>

        <Grid x:Name="DetailPaneContainer" Grid.Column="1">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>

            <Button x:Name="BackButton"
                    Grid.Row="0"
                    Margin="8,8,8,0"
                    HorizontalAlignment="Left"
                    Click="BackButton_Click"
                    Style="{StaticResource SubtleButtonStyle}"
                    Visibility="Collapsed">
                <StackPanel Orientation="Horizontal" Spacing="6">
                    <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE72B;" FontSize="11" />
                    <TextBlock Text="Back" />
                </StackPanel>
            </Button>

            <ContentPresenter Grid.Row="1"
                              Content="{Binding DetailContent, ElementName=Root}" />
        </Grid>
    </Grid>
</UserControl>
