<Page
    x:Class="AppStudio.Views.AcercaDeDetail"
    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:vm="using:AppStudio.ViewModels"
    mc:Ignorable="d"
    x:Name="PageRoot">

    <Grid Background="{StaticResource AppBackground}">
        <Grid.ChildrenTransitions>
            <TransitionCollection>
                <EntranceThemeTransition/>
            </TransitionCollection>
        </Grid.ChildrenTransitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="140"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <FlipView x:Name="Flip" Grid.Row="1" ItemsSource="{Binding Items}" SelectedItem="{Binding SelectedItem, Mode=TwoWay}" VerticalAlignment="Top"
            DataContext="{Binding AcercaDeModel}"
            d:DataContext="{d:DesignData Source=/Assets/Data/AcercaDeDataSource.json, Type=vm:AcercaDeViewModel, IsDesignTimeCreatable=true}"
            ItemTemplate="{StaticResource AcercaDe1DetailDetail}" />

        <!-- Back button and page title -->
        <ContentPresenter x:Name="HeaderHost" Grid.Row="0" ContentTemplate="{StaticResource PageHeader}" Content="{Binding NavigationHelper}" />

        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState x:Name="SnappedView">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderHost" Storyboard.TargetProperty="ContentTemplate">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PageHeaderSnapped}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Flip" Storyboard.TargetProperty="ItemTemplate">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <DataTemplate>
                                        <ScrollViewer HorizontalScrollBarVisibility="Disabled">
                                            <ContentPresenter ContentTemplate="{StaticResource AcercaDe1DetailDetailSnapped}" />
                                        </ScrollViewer>
                                    </DataTemplate>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="PortraitView">
                </VisualState>
                <VisualState x:Name="FullscreenView"/>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>

    <Page.BottomAppBar>
        <CommandBar Background="{StaticResource AppBarBackground}" BorderBrush="{StaticResource AppBarBackground}">
            <AppBarButton x:Uid="SmallTextButton" DataContext="{Binding AcercaDeModel}" Command="{Binding ChangeFontSizeCommand}" CommandParameter="Small">
                <AppBarButton.Icon>
                    <FontIcon FontFamily="Segoe UI" Glyph="&#x0041;" FontSize="10"/>
                </AppBarButton.Icon>
            </AppBarButton>
            <AppBarButton x:Uid="NormalTextButton" DataContext="{Binding AcercaDeModel}" Command="{Binding ChangeFontSizeCommand}" CommandParameter="Normal">
                <AppBarButton.Icon>
                    <FontIcon FontFamily="Segoe UI" Glyph="&#x0041;" FontSize="15"/>
                </AppBarButton.Icon>
            </AppBarButton>
            <AppBarButton x:Uid="BigTextButton" DataContext="{Binding AcercaDeModel}" Command="{Binding ChangeFontSizeCommand}" CommandParameter="Big">
                <AppBarButton.Icon>
                    <FontIcon FontFamily="Segoe UI" Glyph="&#x0041;" FontSize="20"/>
                </AppBarButton.Icon>
            </AppBarButton>
            <AppBarButton x:Uid="GoToSourceButton" Icon="Globe" DataContext="{Binding AcercaDeModel}" Command="{Binding GoToSourceCommand}" Visibility="{Binding GoToSourceVisibility}"/>
        </CommandBar>
    </Page.BottomAppBar>
</Page>
