<UserControl
    x:Class="Cerberus.MVVM.View.LikedView"
    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:fa="http://schemas.fontawesome.io/icons/"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:Cerberus.Controls"
    xmlns:viewModel="clr-namespace:Cerberus.MVVM.ViewModel"
    d:DesignHeight="675"
    d:DesignWidth="1100"
    Background="#272537"
    mc:Ignorable="d">

    <UserControl.DataContext>
        <viewModel:LikedViewModel />
    </UserControl.DataContext>


    <UserControl.Resources>
        <Style x:Key="MovieCardStyle" TargetType="Border">
            <Setter Property="Background" Value="#2A2A2A" />
            <Setter Property="CornerRadius" Value="8" />
            <Setter Property="Margin" Value="10" />
        </Style>
    </UserControl.Resources>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <!--  Header  -->
        <Grid Grid.Row="0" Margin="20,20,20,10">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <TextBlock
                FontSize="24"
                FontWeight="Bold"
                Foreground="#E0E0E0"
                Text="Things You Liked" />
            <TextBox
                x:Name="SearchTextBox"
                Margin="0,0,10,0"
                Padding="25,5,5,5"
                HorizontalAlignment="Right"
                VerticalAlignment="Center"
                KeyDown="SearchTextBox_KeyDown"
                Style="{StaticResource ModernTextboxForLike}"
                Text="{Binding SearchText, UpdateSourceTrigger=PropertyChanged}" >
                
                
            </TextBox>
          
            <Button
                Grid.Column="1"
                Padding="15,8"
                Background="#3A3F44"
                BorderBrush="Transparent"
                BorderThickness="0"
                Content="Delete"
                Foreground="#E0E0E0">
                <Button.Resources>
                    <Style TargetType="Border">
                        <Setter Property="CornerRadius" Value="10" />
                    </Style>
                </Button.Resources>
            </Button>
        </Grid>

        <!--  Movie Grid  -->
        <ScrollViewer Grid.Row="1" VerticalScrollBarVisibility="Auto">
            <ItemsControl x:Name="LikedItemsControl" ItemsSource="{Binding LikedItems}">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <local:TwoColumnResponsivePanel />
                        <!-- Make sure to add the namespace -->
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <Border Style="{StaticResource MovieCardStyle}" Margin="10">
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>
                                <Image
                            Grid.Column="0"
                            Width="120"
                            Height="180"
                            Source="{Binding Poster}"
                            Stretch="UniformToFill"
                            VerticalAlignment="Top"
                            HorizontalAlignment="Left"
                            Margin="0,0,10,0">
                                    <Image.Clip>
                                        <RectangleGeometry
                                    RadiusX="5"
                                    RadiusY="5"
                                    Rect="0,0,120,180" />
                                    </Image.Clip>
                                </Image>
                                <!--  Movie Details  -->
                                <StackPanel Grid.Column="1" Margin="0,0,10,0">
                                    <TextBlock
                                FontSize="18"
                                FontWeight="Bold"
                                Foreground="White"
                                Text="{Binding Title}"
                                TextWrapping="Wrap" />
                                    <TextBlock
                                Margin="0,5,0,0"
                                FontSize="14"
                                Foreground="#A0A0A0"
                                Text="{Binding Decade}" />
                                    <!--  Rating  -->
                                    <StackPanel Margin="0,10,0,0" Orientation="Horizontal">
                                        <TextBlock FontSize="18" Foreground="White">
                                    <Run Text="{Binding ImdbRating}" />
                                    <Run Text=" " />
                                    <fa:FontAwesome
                                        FontSize="18"
                                        Foreground="Gold"
                                        Icon="Imdb" />
                                        </TextBlock>
                                    </StackPanel>
                                    <!--  Genre  -->
                                    <TextBox
                                Margin="0,10,0,0"
                                Padding="5,2"
                                Background="#3A3F44"
                                BorderThickness="0"
                                FontSize="14"
                                Foreground="#E0E0E0"
                                IsReadOnly="True"
                                Text="{Binding Genre, Mode=TwoWay}"
                                TextWrapping="Wrap" />
                                </StackPanel>
                            </Grid>
                        </Border>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </ScrollViewer>
    </Grid>
</UserControl>