<UserControl x:Class="WinDynamicDesktop.WPF.ThemePreviewer"
             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"
             mc:Ignorable="d" d:DesignHeight="720" d:DesignWidth="1280"
             SnapsToDevicePixels="True" UseLayoutRounding="True"
             Foreground="White" Background="Gray">
    <UserControl.Resources>
        <FontFamily x:Key="FontAwesome">pack://application:,,,/resources/fonts/fontawesome-webfont.ttf#FontAwesome</FontFamily>
        <BooleanToVisibilityConverter x:Key="BoolVis" />
        <Style x:Key="CarouselButton" TargetType="{x:Type Button}">
            <Setter Property="Background" Value="#7F000000" />
            <Setter Property="Foreground" Value="White" />
            <Setter Property="HorizontalContentAlignment" Value="Center" />
            <Setter Property="VerticalContentAlignment" Value="Center" />
            <Setter Property="FontFamily" Value="{StaticResource FontAwesome}" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border Background="{TemplateBinding Background}" CornerRadius="5">
                            <ContentControl x:Name="Content" Content="{TemplateBinding Content}" Opacity="0.5"
                                                    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="Content" Property="Opacity" Value="1" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsEnabled" Value="False">
                    <Setter Property="Opacity" Value="0.5" />
                </Trigger>
            </Style.Triggers>
        </Style>
        <Storyboard x:Key="FadeAnimation">
            <DoubleAnimation Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:0.6" FillBehavior="Stop">
                <DoubleAnimation.EasingFunction>
                    <SineEase EasingMode="EaseInOut" />
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard>
    </UserControl.Resources>
    <UserControl.InputBindings>
        <KeyBinding Gesture="Left" Command="{Binding PreviousCommand}" />
        <KeyBinding Gesture="Right" Command="{Binding NextCommand}" />
    </UserControl.InputBindings>
    <Grid>
        <Grid.Resources>
            <Style x:Key="{x:Type Border}" TargetType="{x:Type Border}">
                <Setter Property="Background" Value="#7F000000" />
                <Setter Property="CornerRadius" Value="5" />
            </Style>
        </Grid.Resources>

        <Image x:Name="BackImage" Source="{Binding BackImage, Mode=OneWay}"
               Stretch="Fill" StretchDirection="Both" Focusable="False"
               RenderOptions.BitmapScalingMode="Fant" />
        <Image x:Name="FrontImage" Source="{Binding FrontImage, Mode=OneWay}"
               Stretch="Fill" StretchDirection="Both" Focusable="False"
               RenderOptions.BitmapScalingMode="Fant" Opacity="0" />

        <Grid Visibility="{Binding ControlsVisible, Converter={StaticResource BoolVis}}">
            <Button HorizontalAlignment="Left" VerticalAlignment="Stretch" Width="80" Command="{Binding PreviousCommand}"
                    Style="{StaticResource CarouselButton}" Background="Transparent"
                    Content="&#xf053;" FontSize="20" Cursor="Hand" FocusVisualStyle="{x:Null}">
            </Button>
            <Button HorizontalAlignment="Right" VerticalAlignment="Stretch" Width="80" Command="{Binding NextCommand}"
                    Style="{StaticResource CarouselButton}" Background="Transparent"
                    Content="&#xf054;" FontSize="20" Cursor="Hand" FocusVisualStyle="{x:Null}">
            </Button>

            <Border HorizontalAlignment="Left" VerticalAlignment="Top" Margin="20">
                <StackPanel Margin="10">
                    <TextBlock Text="{Binding Title, FallbackValue='Title'}" FontWeight="Bold" FontSize="19"/>
                    <TextBlock Text="{Binding PreviewText, FallbackValue='Preview Text'}" FontSize="16" Margin="0,4,0,0" />
                </StackPanel>
            </Border>

            <Button HorizontalAlignment="Right" VerticalAlignment="Top" MinWidth="40" MinHeight="40" Margin="20" FontSize="16" Cursor="Hand" Command="{Binding PlayCommand}">
                <Button.Style>
                    <Style TargetType="{x:Type Button}" BasedOn="{StaticResource CarouselButton}">
                        <Setter Property="Content" Value="&#xf04b;" />
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding IsPlaying}" Value="True">
                                <Setter Property="Content" Value="&#xf04c;" />
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </Button.Style>
            </Button>

            <Border HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="0,0,0,15"
                    Visibility="{Binding MessageVisible, Converter={StaticResource BoolVis}}">
                <TextBlock Text="{Binding Message}" FontSize="16" VerticalAlignment="Center" Margin="8,6,8,6"  />
            </Border>

            <ListBox HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="16" Focusable="False"
                     ItemsSource="{Binding Items}" SelectedIndex="{Binding SelectedIndex}" IsSynchronizedWithCurrentItem="True"
                     Visibility="{Binding CarouselIndicatorsVisible, Converter={StaticResource BoolVis}}">
                <ListBox.Style>
                    <Style TargetType="{x:Type ListBox}">
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate>
                                    <StackPanel Orientation="Horizontal" IsItemsHost="True" />
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                        <Style.Triggers>
                            <Trigger Property="IsEnabled" Value="False">
                                <Setter Property="Opacity" Value="0.5" />
                            </Trigger>
                        </Style.Triggers>
                    </Style>
                </ListBox.Style>
                <ListBox.ItemContainerStyle>
                    <Style TargetType="{x:Type ListBoxItem}">
                        <Setter Property="OverridesDefaultStyle" Value="true" />
                        <Setter Property="FocusVisualStyle" Value="{x:Null}" />
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="{x:Type ListBoxItem}">
                                    <Grid Height="32" Background="Transparent" Cursor="Hand">
                                        <Rectangle x:Name="Indicator" Fill="White" Height="3" Width="30" Margin="3,0" Opacity="0.5" />
                                    </Grid>
                                    <ControlTemplate.Triggers>
                                        <Trigger Property="IsSelected" Value="True">
                                            <Setter TargetName="Indicator" Property="Opacity" Value="1" />
                                        </Trigger>
                                    </ControlTemplate.Triggers>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </ListBox.ItemContainerStyle>
            </ListBox>
        </Grid>

        <Border HorizontalAlignment="Left" VerticalAlignment="Bottom"  Margin="-3,0,0,-3"
                Visibility="{Binding DownloadSizeVisible, Converter={StaticResource BoolVis}}">
            <TextBlock Text="{Binding DownloadSize, FallbackValue='Size'}" FontSize="16"
                       VerticalAlignment="Center" Margin="11,4,8,9" Opacity="0.5" />
        </Border>

        <Border HorizontalAlignment="Right" VerticalAlignment="Bottom"  Margin="0,0,-3,-3">
            <TextBlock Text="{Binding Author, FallbackValue='Author'}" FontSize="16"
                       VerticalAlignment="Center" Margin="8,4,11,9" Opacity="0.5" />
        </Border>
    </Grid>
</UserControl>
