<UserControl x:Class="HavenSoft.HexManiac.WPF.Controls.TutorialControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:res="clr-namespace:HavenSoft.HexManiac.WPF.Resources">
   <Canvas ClipToBounds="False" Width="100" Height="450" Name="ContentPanel" HorizontalAlignment="Left">
      <Canvas.Resources>
         <res:IconConverter x:Key="IconConverter" />
      </Canvas.Resources>
      <Canvas.Style>
         <Style TargetType="Canvas">
            <Style.Triggers>
               <DataTrigger Binding="{Binding CompletionPercent}" Value="100.00%">
                  <Setter Property="Visibility" Value="Collapsed" />
               </DataTrigger>
            </Style.Triggers>
         </Style>
      </Canvas.Style>
      <ItemsControl Name="Tutorials" ItemsSource="{Binding Tutorials}" Width="400" Height="450" Canvas.Left="0">
         <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
               <Canvas ClipToBounds="True" />
            </ItemsPanelTemplate>
         </ItemsControl.ItemsPanel>
         <ItemsControl.ItemTemplate>
            <!-- Each card is 400x90, with 100x90 on the left for the icon/title and 300x90 for the description. -->
            <DataTemplate>
               <Border BorderThickness="1" BorderBrush="{DynamicResource Secondary}" Background="{DynamicResource Backlight}" MouseEnter="OnEnterTutorial">
                  <Canvas Width="398" Height="88">
                     <Decorator Width="98" Height="78">
                        <Path Data="{Binding Icon, Converter={StaticResource IconConverter}}" Stretch="Uniform" Margin="5,20,5,5" Fill="{DynamicResource Secondary}" />
                     </Decorator>
                     <TextBlock FontWeight="Bold" Width="98" TextAlignment="Center" Text="{Binding Title}" Canvas.Top="2" />
                     <TextBlock FontStyle="Italic" Width="98" TextAlignment="Center" Text="{Binding IndexText}" Canvas.Bottom="2" />
                     <Decorator Width="300" Height="88" Canvas.Left="98">
                        <TextBlock TextWrapping="Wrap" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="10" Text="{Binding Content}" />
                     </Decorator>
                     <Button Command="{res:MethodCommand Close}" Width="20" Height="20" Canvas.Top="1" Canvas.Right="1">
                        <Path Fill="{DynamicResource Secondary}" Data="{res:Icon Exit}" Stretch="Uniform" />
                     </Button>
                  </Canvas>
               </Border>
            </DataTemplate>
         </ItemsControl.ItemTemplate>
         <ItemsControl.ItemContainerStyle>
            <Style TargetType="FrameworkElement">
               <Setter Property="Canvas.Top" Value="{Binding TopEdge}" />
               <Setter Property="Canvas.Left" Value="0" />
               <Setter Property="Visibility" Value="{Binding Incomplete, Converter={StaticResource BoolToVisibility}}" />
            </Style>
         </ItemsControl.ItemContainerStyle>
      </ItemsControl>
      <Path Name="Check" Data="{res:Icon Check}" Fill="{DynamicResource Stream2}" Stretch="Uniform" Width="60" Height="60" Opacity="0" Canvas.Top="0" Canvas.Right="0" IsHitTestVisible="False" />
      <Border Canvas.Top="-20" Canvas.Right="0" Height="20" Width="110" Background="{DynamicResource Backlight}" BorderBrush="{StaticResource Secondary}"
              BorderThickness="1" Visibility="{Binding IsMouseOver, ElementName=ContentPanel, Converter={StaticResource BoolToVisibility}}">
         <Border.ContextMenu>
            <ContextMenu>
               <MenuItem Header="Dismiss All" Command="{res:MethodCommand DismissAll}" />
               <MenuItem Header="Restart All" Command="{res:MethodCommand Reset}" />
            </ContextMenu>
         </Border.ContextMenu>
         <TextBlock HorizontalAlignment="Center">
            <Run Text="Tutorials (" />
            <Run Text="{Binding CompletionPercent, Mode=OneWay}" />
            <Run Text=")" />
         </TextBlock>
      </Border>
      <Border Canvas.Bottom="0" Canvas.Right="0" Height="20" Width="110" Visibility="{Binding SeeMore, Converter={StaticResource BoolToVisibility}}">
         <Border Background="{DynamicResource Backlight}" BorderBrush="{StaticResource Secondary}" ToolTipService.InitialShowDelay="0"
               BorderThickness="1" Visibility="{Binding IsMouseOver, ElementName=ContentPanel, Converter={StaticResource BoolToVisibility}}">
            <Border.ToolTip>
               <ToolTip>
                  <TextBlock>
                     Complete actions to clear tutorials.
                     <LineBreak />
                     Additional tutorials will show until you've completed them all.
                  </TextBlock>
               </ToolTip>
            </Border.ToolTip>
            <TextBlock HorizontalAlignment="Center" Text="See More..."/>
         </Border>
      </Border>
   </Canvas>
</UserControl>
