<UserControl
    x:Class="FoxTube.Controls.PlaylistCard"
    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"
    MaxWidth="700"
    Opacity="0"
    Name="card"
    SizeChanged="Card_SizeChanged">

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

    <Button Padding="0" Margin="1" Background="{ThemeResource SystemControlBackgroundChromeMediumBrush}" Click="Button_Click">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition/>
                <RowDefinition Height="20"/>
                <RowDefinition Height="55"/>
            </Grid.RowDefinitions>
            
            <Image Source="/Assets/videoPlaceholder.png" Opacity=".0001" Stretch="Fill"/>
            <Image Name="thumbnail" Source="/Assets/videoThumbSample.png" Stretch="Fill" Opacity="0" ImageOpened="Thumbnail_ImageOpened"/>

            <Grid HorizontalAlignment="Right" Width="100">
                <Grid.Background>
                    <AcrylicBrush TintColor="#7F000000" BackgroundSource="Backdrop" AlwaysUseFallback="False" TintOpacity="1" Opacity="0.97"/>
                </Grid.Background>
                <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
                    <TextBlock HorizontalAlignment="Center" FontFamily="Segoe MDL2 Assets" Foreground="White" Text="&#xE90B;" FontSize="30"/>
                    <TextBlock Foreground="White" Text="[N/A]" HorizontalAlignment="Center" FontSize="20" Name="counter"/>
                </StackPanel>
            </Grid>
            
            <Grid Grid.Row="1">
                <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 Name="avatar" Grid.Column="0" Height="46" Margin="5,-30,5,0" BorderBrush="White" BorderThickness="10"/>

                <TextBlock HorizontalAlignment="Left" MaxWidth="200" TextTrimming="CharacterEllipsis" Name="channelName" Grid.Column="1" Text="[Channel name]" Foreground="Gray" Margin="0,2,0,0" FontSize="12"/>
                <TextBlock Grid.Column="1" Name="date" Text="[Published at]" HorizontalAlignment="Right" Foreground="Gray" Margin="0,2,2,0" FontSize="12"/>
            </Grid>
            
            <TextBlock Grid.Row="2" Name="title" Text="[Title]" TextWrapping="WrapWholeWords" TextTrimming="CharacterEllipsis" Margin="5" MaxLines="2"/>
        </Grid>
    </Button>
    <UserControl.ContextFlyout>
        <MenuFlyout>
            <MenuFlyoutItem x:Uid="/Cards/playlist" Icon="List" Text="View playlist" Click="Button_Click"/>
            <MenuFlyoutItem x:Uid="/Cards/channel" Icon="Contact" Text="View channel" Name="openChannel" Click="OpenChannel_Click"/>
            <MenuFlyoutSeparator/>
            <MenuFlyoutItem x:Uid="/Cards/getLink" Icon="Link" Text="Copy link" Name="getLink" Click="GetLink_Click"/>
            <MenuFlyoutItem x:Uid="/Cards/openWeb" Icon="Globe" Text="Open in browser" Name="inBrowser" Click="InBrowser_Click"/>
            <MenuFlyoutItem x:Uid="/Cards/share" Icon="Share" Text="Share" Name="share" Visibility="Collapsed"/>
        </MenuFlyout>
    </UserControl.ContextFlyout>
</UserControl>
