<Page
    x:Class="Unigram.Views.PlaygroundPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Unigram.Views"
    xmlns:controls="using:Unigram.Controls"
    xmlns:messages="using:Unigram.Controls.Messages"
    xmlns:tl="using:Telegram.Api.TL"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Page.Resources>
        <Color x:Key="SystemAccentColorLight3">#a6d8ff</Color>
        <Color x:Key="SystemAccentColorLight2">#76b9ed</Color>
        <Color x:Key="SystemAccentColorLight1">#429ce3</Color>
        <Color x:Key="SystemAccentColor">#0078d7</Color>
        <Color x:Key="SystemAccentColorDark1">#005a9e</Color>
        <Color x:Key="SystemAccentColorDark2">#004275</Color>
        <Color x:Key="SystemAccentColorDark3">#002642</Color>

        <SolidColorBrush x:Key="MessageForegroundBrush" Color="#000000"/>
        <SolidColorBrush x:Key="MessageBackgroundBrush" Color="{ThemeResource SystemAccentColorLight3}"/>
        <SolidColorBrush x:Key="MessageBorderBrush" Color="{ThemeResource SystemAccentColorLight2}"/>
        <SolidColorBrush x:Key="MessageSubtleLabelBrush" Color="{ThemeResource SystemAccentColorLight1}"/>
        <SolidColorBrush x:Key="MessageSubtleGlyphBrush" Color="{ThemeResource SystemAccentColorLight1}"/>

        <SolidColorBrush x:Key="MessageHeaderForegroundBrush" Color="{ThemeResource SystemAccentColorDark1}"/>
        <SolidColorBrush x:Key="MessageHeaderBorderBrush" Color="{ThemeResource SystemAccentColorDark1}"/>

        <SolidColorBrush x:Key="MessageMediaForegroundBrush" Color="{ThemeResource SystemAccentColorDark1}"/>
        <SolidColorBrush x:Key="MessageMediaBackgroundBrush" Color="{ThemeResource SystemAccentColorLight2}"/>

        <HorizontalAlignment x:Key="MessageHorizontalAlignment">Right</HorizontalAlignment>
    </Page.Resources>

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Padding="12">
        <Border x:Name="LayoutRoot"
                Margin="{ThemeResource MessageContentMargin}"
                Padding="{ThemeResource MessageContentPadding}"
                CornerRadius="{ThemeResource MessageCornerRadius}"
                Background="{ThemeResource MessageBackgroundBrush}"
                BorderBrush="{ThemeResource MessageBorderBrush}"
                BorderThickness="0,0,0,2"
                HorizontalAlignment="Right"
                VerticalAlignment="Center">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <controls:MessageReference Title="Fela Ameghino" Grid.Row="1">
                    <controls:MessageReference.Message>
                        <tl:TLMessage Message="Ciao!!!"/>
                    </controls:MessageReference.Message>
                </controls:MessageReference>

                <TextBlock
                    x:Name="MessageControl"
                    Text="Test message yoyoy yoyoy yoyoyoyo"
                    Style="{ThemeResource BodyTextBlockStyle}"
                    Foreground="{ThemeResource MessageForegroundBrush}"
                    Grid.Row="2"/>

                <StackPanel x:Name="StatusControl"
                            Orientation="Horizontal"
                            VerticalAlignment="Bottom"
                            HorizontalAlignment="Right"
                            Padding="0,0,6,0"
                            Margin="0,0,-6,0"
                            Grid.Row="4">
                    <StackPanel Orientation="Horizontal">
                        <FontIcon Glyph="&#xE607;" FontFamily="{ThemeResource TelegramThemeFontFamily}" FontSize="11" Foreground="{ThemeResource MessageSubtleGlyphBrush}" Margin="0,0,4,2" VerticalAlignment="Bottom"/>
                        <TextBlock Text="1K" Foreground="{ThemeResource MessageSubtleLabelBrush}" Margin="0,2,12,0" Style="{ThemeResource CaptionTextBlockStyle}"/>
                    </StackPanel>
                    <TextBlock Text="edited" FontStyle="Italic" Foreground="{ThemeResource MessageSubtleLabelBrush}" Margin="0,2,4,0" Style="{ThemeResource CaptionTextBlockStyle}"/>
                    <TextBlock x:Name="StatusLabel" Text="14:59" Style="{ThemeResource CaptionTextBlockStyle}" Foreground="{ThemeResource MessageSubtleLabelBrush}" TextAlignment="Right" Margin="0,2,0,0"/>
                    <FontIcon x:Name="StatusGlyph" Glyph="&#xE601;" FontFamily="{ThemeResource TelegramThemeFontFamily}" Height="10" Width="18" FontSize="10" Foreground="{ThemeResource MessageSubtleGlyphBrush}" Margin="4,0,0,3" VerticalAlignment="Bottom"/>
                </StackPanel>
            </Grid>
        </Border>
    </Grid>
</Page>