<UserControl
    x:Class="FoxTube.Controls.Adverts.PlayerAdvert"
    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"
    d:DesignHeight="53"
    d:DesignWidth="1920"
    Name="card"
    Visibility="Collapsed"
    Height="0"
    Opacity="0">

    <UserControl.Resources>
        <Storyboard x:Name="show">
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="card">
                <DiscreteObjectKeyFrame KeyTime="0">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Collapsed</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
                <DiscreteObjectKeyFrame KeyTime="0:0:0.1">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Visible</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
            </ObjectAnimationUsingKeyFrames>
            
            <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" Storyboard.TargetName="card" Storyboard.TargetProperty="Height">
                <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="0" />
                <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="53" />
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" Storyboard.TargetName="card" Storyboard.TargetProperty="Opacity">
                <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="0" />
                <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="1" />
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimation Storyboard.TargetName="countdown" Storyboard.TargetProperty="Value" EnableDependentAnimation="True" From="0" To="100" Duration="0:0:10"/>
        </Storyboard>
        
        <Storyboard x:Name="hide">
            <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" Storyboard.TargetName="card" Storyboard.TargetProperty="Height">
                <EasingDoubleKeyFrame KeyTime="0:0:0" Value="53" />
                <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0" />
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="card" Storyboard.TargetProperty="Opacity">
                <EasingDoubleKeyFrame KeyTime="0:0:0" Value="1" />
                <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0" />
            </DoubleAnimationUsingKeyFrames>
            
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="card">
                <DiscreteObjectKeyFrame KeyTime="0:0:0.3">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Visible</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
                <DiscreteObjectKeyFrame KeyTime="0:0:0.4">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Collapsed</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
            </ObjectAnimationUsingKeyFrames>
        </Storyboard>
    </UserControl.Resources>

    <Grid Height="53" Background="{ThemeResource SystemChromeMediumColor}">
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>

        <Grid Name="grid" HorizontalAlignment="Stretch" Background="#02000000">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>

            <StackPanel Grid.Column="1" Padding="5">
                <StackPanel Orientation="Horizontal">
                    <TextBlock Name="title" FontWeight="Bold" Text="Title"/>
                    <TextBlock Name="info" Foreground="Gray" VerticalAlignment="Center" Margin="10,0" Style="{StaticResource CaptionTextBlockStyle}" Text=""/>
                </StackPanel>
                <TextBlock Name="description" Text="Description" TextTrimming="CharacterEllipsis"/>
            </StackPanel>

            <Button Name="cta" Content="CALL TO ACTION" Grid.Column="2" Margin="10,0"/>
        </Grid>

        <Button Grid.Column="1" Width="50" Height="50" HorizontalAlignment="Right" FontFamily="Segoe MDL2 Assets" Content="&#xE106;" Background="Transparent" Click="Button_Click"/>

        <ProgressBar Name="countdown" VerticalAlignment="Bottom" Grid.Row="1" Grid.ColumnSpan="2"/>
    </Grid>
</UserControl>
