<UserControl
    x:Class="FoxTube.Controls.Adverts.CardAdvert"
    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"
    mc:Ignorable="d"
    HorizontalAlignment="Stretch"
    VerticalAlignment="Top"
    d:DesignHeight="290"
    d:DesignWidth="384"
    Visibility="Collapsed"
    Opacity="0"
    Name="card">

    <UserControl.Resources>
        <Storyboard x:Name="show">
            <DoubleAnimation Storyboard.TargetName="card" Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="{StaticResource CardOpacityDuration}"/>
        </Storyboard>
        <Storyboard x:Name="hide">
            <DoubleAnimation Storyboard.TargetName="card" Storyboard.TargetProperty="Opacity" From="1" To="0" Duration="{StaticResource CardOpacityDuration}"/>
        </Storyboard>
        <Storyboard x:Name="showThumb">
            <DoubleAnimation Storyboard.TargetName="image" Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="{StaticResource CardOpacityDuration}"/>
        </Storyboard>
        <Storyboard x:Name="hideThumb">
            <DoubleAnimation Storyboard.TargetName="image" Storyboard.TargetProperty="Opacity" From="1" To="0" Duration="{StaticResource CardOpacityDuration}"/>
        </Storyboard>
    </UserControl.Resources>

    <Button Padding="0" Background="{ThemeResource SystemControlBackgroundChromeMediumBrush}">
        <Grid Name="grid">
            <Grid.RowDefinitions>
                <RowDefinition/>
                <RowDefinition Height="20"/>
                <RowDefinition Height="55"/>
            </Grid.RowDefinitions>
            
            <Image Source="/Assets/videoPlaceholder.png" Opacity=".0001" Stretch="Fill"/>
            <Image Name="image" Stretch="Fill" ImageOpened="Image_ImageOpened"/>
            
            <StackPanel Margin="0,0,5,5" Background="Orange" VerticalAlignment="Bottom" BorderBrush="OrangeRed" BorderThickness="1" HorizontalAlignment="Right" Padding="5,2,5,3">
                <TextBlock Name="info" Text="CALL TO ACTION TEXT" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="Gray" FontSize="12"/>
            </StackPanel>
            
            <StackPanel Margin="5" Background="Orange" VerticalAlignment="Top" CornerRadius="5" Opacity=".75" BorderThickness="1" HorizontalAlignment="Left" Padding="5,2,5,3">
                <TextBlock Text="Sponsored content" x:Uid="/Cards/sponsored" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="Black" FontSize="12"/>
            </StackPanel>
            
            <Grid Grid.Row="1" Name="contentGrid">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="60"/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <Ellipse Grid.Column="0" Height="50" Width="50" Margin="5,-30,5,10" Fill="{ThemeResource SystemControlBackgroundChromeMediumBrush}"/>
                <PersonPicture FontFamily="Segoe MDL2 Assets" Initials="&#xEC24;" Name="icon" Grid.Column="0" Height="46" Margin="5,-30,5,0" BorderBrush="White" BorderThickness="10"/>

                <TextBlock Name="sponsor" HorizontalAlignment="Left" Grid.Column="1" Text="[Sponsored by]" TextTrimming="CharacterEllipsis" Foreground="Gray" Margin="0,2,0,0" FontSize="12"/>
                <TextBlock Grid.Column="1" Name="desc" Text="[Description]" HorizontalAlignment="Right" Foreground="Gray" Margin="0,2,2,0" FontSize="12"/>
            </Grid>
            
            <TextBlock Grid.Row="2" Name="title" Text="[Title]" TextWrapping="WrapWholeWords" Margin="5" MaxLines="2" TextTrimming="CharacterEllipsis"/>
        </Grid>
    </Button>
</UserControl>
