<UserControl x:Class="Hearthstone_Deck_Tracker.Controls.GridCardImages"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:hearthstoneDeckTracker="clr-namespace:Hearthstone_Deck_Tracker"
             DataContext="{Binding RelativeSource={RelativeSource Self}}"
             mc:Ignorable="d"
             d:DesignHeight="300" d:DesignWidth="300">
    <UserControl.Resources>
        <Storyboard x:Key="AnimateGrid">
            <DoubleAnimation Storyboard.TargetName="CardsGrid" Duration="0:0:0.2" Storyboard.TargetProperty="Opacity" To="1" From="0" />
        </Storyboard>
    </UserControl.Resources>
    <Border x:Name="CardsGrid"
            RenderTransformOrigin="0.5,0.5"
            Background="#CC2E3235"
            CornerRadius="10"
            Opacity="0">
        <Border.RenderTransform>
            <ScaleTransform/>
        </Border.RenderTransform>
        <Grid MaxWidth="{Binding GridWidth}" MaxHeight="{Binding GridHeight}"
              HorizontalAlignment="Center" VerticalAlignment="Center">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>

            <!-- Title TextBlock on top -->
            <Border Background="#1C2022" Grid.Row="0" CornerRadius="{Binding TitleCornerRadius}">
                <hearthstoneDeckTracker:HearthstoneTextBlock
                    FontSize="17" TextAlignment="Center" HorizontalAlignment="Center" VerticalAlignment="Center"
                    Text="{Binding Title}"
                    Margin="10"
                />
            </Border>

            <!-- ItemsControl for cards -->
            <ItemsControl ItemsSource="{Binding Cards}" Grid.Row="1" Margin="5" Visibility="{Binding CardsGridVisibility}">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <WrapPanel HorizontalAlignment="Center" VerticalAlignment="Center" Orientation="Horizontal" />
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <Grid Width="{Binding DataContext.CardWidth, RelativeSource={RelativeSource AncestorType=UserControl}}"
                              Height="{Binding DataContext.CardHeight, RelativeSource={RelativeSource AncestorType=UserControl}}"
                              HorizontalAlignment="Center" VerticalAlignment="Center"
                              Margin="{Binding CardMargin, RelativeSource={RelativeSource AncestorType=UserControl}}"
                              >
                            <Image Source="{Binding CardImagePath}"
                                   Stretch="Uniform"
                                   RenderOptions.BitmapScalingMode="Fant" />
                        </Grid>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </Grid>
    </Border>
</UserControl>
