<UserControl
    x:Class="Cerberus.MVVM.View.FeaturedView"
    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:vm="clr-namespace:Cerberus.MVVM.ViewModel"
    d:DesignHeight="675"
    d:DesignWidth="1100"
    Background="#272537"
    mc:Ignorable="d">

    <UserControl.DataContext>
        <vm:FeaturedViewModel />
    </UserControl.DataContext>

    <UserControl.Resources>
        <Style x:Key="HeaderStyle" TargetType="TextBlock">
            <Setter Property="FontFamily" Value="Segoe UI" />
            <Setter Property="FontSize" Value="24" />
            <Setter Property="FontWeight" Value="SemiBold" />
            <Setter Property="Foreground" Value="#FFFFFF" />
            <Setter Property="Margin" Value="0,0,0,20" />
        </Style>
        <Style x:Key="MovieTitleStyle" TargetType="TextBlock">
            <Setter Property="FontFamily" Value="Segoe UI" />
            <Setter Property="FontSize" Value="16" />
            <Setter Property="FontWeight" Value="SemiBold" />
            <Setter Property="Foreground" Value="#FFFFFF" />
            <Setter Property="Margin" Value="0,5,0,5" />
        </Style>
        <Style x:Key="MovieInfoStyle" TargetType="TextBlock">
            <Setter Property="FontFamily" Value="Segoe UI" />
            <Setter Property="FontSize" Value="14" />
            <Setter Property="Foreground" Value="#AAAAAA" />
            <Setter Property="Margin" Value="0,2,0,2" />
        </Style>
    </UserControl.Resources>

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

        <!--  Header  -->
        <TextBlock
            Margin="20,20,20,10"
            Style="{StaticResource HeaderStyle}"
            Text="POPULAR MOVIES THIS WEEK" />

        <!--  Content  -->
        <ScrollViewer Grid.Row="1" VerticalScrollBarVisibility="Auto">
            <ItemsControl ItemsSource="{Binding Movies}">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel Orientation="Vertical" />
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <Border
                            Margin="20,10"
                            Padding="0,0,0,20"
                            BorderBrush="#272537"
                            BorderThickness="0,0,0,1">
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>
                                <Image
                                    Grid.Column="0"
                                    Width="100"
                                    Height="150"
                                    Margin="10"
                                    HorizontalAlignment="Center"
                                    VerticalAlignment="Center"
                                    Source="{Binding Poster}"
                                    Stretch="UniformToFill">
                                    <Image.Clip>
                                        <RectangleGeometry
                                            RadiusX="5"
                                            RadiusY="5"
                                            Rect="0,0,100,150" />
                                    </Image.Clip>
                                </Image>
                                <StackPanel Grid.Column="1">
                                    <DockPanel>
                                        <TextBlock Style="{StaticResource MovieTitleStyle}" Text="{Binding Title}" />
                                        <TextBlock
                                            Margin="10,0,0,0"
                                            Style="{StaticResource MovieInfoStyle}"
                                            Text="{Binding Year}" />
                                    </DockPanel>
                                    <TextBlock Style="{StaticResource MovieInfoStyle}" Text="{Binding Genre}" />
                                    <TextBlock
                                        Margin="0,10,0,10"
                                        Style="{StaticResource MovieInfoStyle}"
                                        Text="{Binding Plot}"
                                        TextWrapping="Wrap" />
                                    <DockPanel>
                                        <TextBlock
                                            VerticalAlignment="Center"
                                            Style="{StaticResource MovieInfoStyle}"
                                            Text="{Binding Director}" />

                                    </DockPanel>
                                    <DockPanel>
                                        <TextBlock
                                            Width="100"
                                            Margin="0,0,0,0"
                                            VerticalAlignment="Top"
                                            FontSize="24"
                                            Style="{StaticResource MovieInfoStyle}"
                                            Text="{Binding IMDbRating}">
                                            <fa:FontAwesome
                                                Margin="10,0,0,0"
                                                FontSize="24"
                                                FontWeight="Bold"
                                                Foreground="Gold"
                                                Icon="Imdb" />
                                        </TextBlock>
                                        <Button
                                            HorizontalAlignment="Right"
                                            Command="{Binding DataContext.WatchTrailerCommand, RelativeSource={RelativeSource AncestorType=UserControl}}"
                                            CommandParameter="{Binding TrailerUrl}"
                                            Content="Watch Trailer"
                                            Style="{StaticResource TrailerButtonStyle}" />
                                    </DockPanel>

                                </StackPanel>
                            </Grid>
                        </Border>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </ScrollViewer>
    </Grid>
</UserControl>