<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:vm="clr-namespace:Harmonia.UI.ViewModels"
			 xmlns:converter="clr-namespace:Harmonia.UI.Converters"
			 xmlns:controls="clr-namespace:Harmonia.UI.Controls"
			 xmlns:ia="using:Avalonia.Xaml.Interactions.Animated"
             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
			 DataContext="{x:Static vm:ViewModelLocator.PlaylistViewModel}"
             x:Class="Harmonia.UI.Views.PlaylistView"
             x:DataType="vm:PlaylistViewModel">
	<UserControl.Resources>
		<SolidColorBrush x:Key="SongItemTitleBrush" Color="#dddddd"/>
		<SolidColorBrush x:Key="SongItemSubtitleBrush" Color="#aaaaaa"/>
	</UserControl.Resources>
	<UserControl.Styles>
		<Style Selector="Border.SongImage">
			<Setter Property="Width" Value="60"/>
			<Setter Property="Height" Value="60"/>
			<Setter Property="Margin" Value="0 0 10 0"/>
		</Style>
		<Style Selector="TextBlock.SongTitle">
			<Setter Property="FontSize" Value="14"/>
			<Setter Property="FontWeight" Value="SemiBold"/>
			<Setter Property="TextTrimming" Value="CharacterEllipsis"/>
			<Setter Property="Foreground" Value="{StaticResource SongItemTitleBrush}"/>
		</Style>
		<Style Selector="TextBlock.SongSubtitle">
			<Setter Property="FontSize" Value="12"/>
			<Setter Property="TextTrimming" Value="CharacterEllipsis"/>
			<Setter Property="Foreground" Value="{StaticResource SongItemSubtitleBrush}"/>
		</Style>
		<Style Selector="TextBlock.SongMetaData">
			<Setter Property="FontSize" Value="12"/>
			<Setter Property="HorizontalAlignment" Value="Right"/>
			<Setter Property="Foreground" Value="{StaticResource SongItemTitleBrush}"/>
		</Style>
		<Style Selector="TextBlock.SongMetaData.Subtitle">
			<Setter Property="FontSize" Value="12"/>
			<Setter Property="Foreground" Value="{StaticResource SongItemSubtitleBrush}"/>
		</Style>

		<Style Selector="Grid.Playing TextBlock">
			<Setter Property="Foreground" Value="{StaticResource HighlightTextColor}"/>
			<!-- Light Blue for Highlight -->
		</Style>
	</UserControl.Styles>
	<Grid Margin="0">
		<Grid.RowDefinitions>
			<RowDefinition Height="Auto"></RowDefinition>
			<RowDefinition Height="*"></RowDefinition>
		</Grid.RowDefinitions>
		<Canvas Background="#99000000" Grid.RowSpan="2"></Canvas> <!-- Was 99 !-->
		<Grid Grid.Row="0" Margin="10">
			<Grid.ColumnDefinitions>
				<ColumnDefinition Width="*"></ColumnDefinition>
				<ColumnDefinition Width="Auto"></ColumnDefinition>
			</Grid.ColumnDefinitions>
			<TextBox Grid.Column="0" HorizontalAlignment="Stretch" Watermark="Filter" Text="{Binding Filter, Mode=TwoWay}"></TextBox>
			<StackPanel Grid.Column="1" Orientation="Horizontal">
				<Button Classes="Flat" Foreground="#7FD184" Margin="10 0 0 0" CornerRadius="32">
					<Button.Content>
						<PathIcon Classes="FlatButtonIcon" Foreground="#7FD184" Data="{StaticResource SemiIconPlus}"></PathIcon>
					</Button.Content>
					<Button.Flyout>
						<controls:AnimatedMenuFlyout Placement="Bottom">
							<MenuItem Command="{Binding AddFilesCommand}" HotKey="Insert" InputGesture="Insert">
								<MenuItem.Header>
									<TextBlock Text="Add Files..." Margin="8 0 8 0"></TextBlock>
								</MenuItem.Header>
								<MenuItem.Icon>
									<PathIcon Data="{StaticResource SemiIconFile}"></PathIcon>
								</MenuItem.Icon>
							</MenuItem>
							<MenuItem Command="{Binding AddFolderCommand}" HotKey="Ctrl+Insert" InputGesture="Ctrl+Insert">
								<MenuItem.Header>
									<TextBlock Text="Add Folder..." Margin="8 0 8 0"></TextBlock>
								</MenuItem.Header>
								<MenuItem.Icon>
									<PathIcon Data="{StaticResource SemiIconFolder}"></PathIcon>
								</MenuItem.Icon>
							</MenuItem>
						</controls:AnimatedMenuFlyout>
					</Button.Flyout>
				</Button>
				<Button Classes="Flat" Foreground="#F9F9F9" Margin="10 0 0 0" CornerRadius="32">
					<Button.Content>
						<PathIcon Classes="FlatButtonIcon" Data="{StaticResource SemiIconMore}"></PathIcon>
					</Button.Content>
					<Button.Flyout>
						<controls:AnimatedMenuFlyout Placement="Bottom">
							<MenuItem Command="{Binding RefreshTagsCommand}">
								<MenuItem.Header>
									<TextBlock Text="Refresh Tags" Margin="8 0 8 0"></TextBlock>
								</MenuItem.Header>
								<MenuItem.Icon>
									<PathIcon Data="{StaticResource RefreshIcon}"></PathIcon>
								</MenuItem.Icon>
							</MenuItem>
							<MenuItem Command="{Binding RemoveDuplicateSongsCommand}">
								<MenuItem.Header>
									<TextBlock Text="Remove Duplicates" Margin="8 0 8 0"></TextBlock>
								</MenuItem.Header>
							</MenuItem>
							<MenuItem Command="{Binding RemoveMissingSongsCommand}">
								<MenuItem.Header>
									<TextBlock Text="Remove Missing" Margin="8 0 8 0"></TextBlock>
								</MenuItem.Header>
							</MenuItem>
							<MenuItem>
								<MenuItem.Header>
									<TextBlock Text="Lock Playlist" Margin="8 0 8 0"></TextBlock>
								</MenuItem.Header>
								<MenuItem.Icon>
									<PathIcon Data="{StaticResource LockIcon}"></PathIcon>
								</MenuItem.Icon>
							</MenuItem>
							<Separator/>
							<MenuItem>
								<MenuItem.Styles>
									<Style Selector="TextBlock">
										<Setter Property="Foreground" Value="#ff99a4"/>
									</Style>
								</MenuItem.Styles>
								<MenuItem.Header>
									<TextBlock Text="Remove Playlist" Margin="8 0 8 0"></TextBlock>
								</MenuItem.Header>
								<MenuItem.Icon>
									<PathIcon Data="{StaticResource DeleteIcon}" Foreground="#ff99a4"></PathIcon>
								</MenuItem.Icon>
							</MenuItem>
							<Separator/>
							<MenuItem>
								<MenuItem.Header>
									<TextBlock Text="Settings" Margin="8 0 8 0"></TextBlock>
								</MenuItem.Header>
								<MenuItem.Icon>
									<PathIcon Data="{StaticResource SettingsIcon}"></PathIcon>
								</MenuItem.Icon>
							</MenuItem>
						</controls:AnimatedMenuFlyout>
					</Button.Flyout>
				</Button>
			</StackPanel>
		</Grid>
		<ListBox
			Name="PlaylistListBox"
			Grid.Row="1"
			ItemsSource="{Binding FilteredPlaylistSongs, Mode=OneWay}"
			SelectedItems="{Binding SelectedPlaylistSongs, Mode=OneWay}"
			DragDrop.AllowDrop="True"
			DragDrop.Drop="OnPlaylistListBoxDrop"
			DoubleTapped="ListBox_DoubleTapped"
			SelectionMode="Multiple">
			<!--<ListBox.Styles>
				<Style Selector="ListBoxItem:nth-child(odd):not(:pointerover):not(:selected)">
					<Setter Property="Background" Value="#00000000"/>
					-->
			<!-- Light Gray -->
			<!--
				</Style>
				<Style Selector="ListBoxItem:nth-child(even):not(:pointerover):not(:selected)">
					<Setter Property="Background" Value="#22AAAAAA"/>
					-->
			<!-- Slightly Darker Gray -->
			<!--
				</Style>
			</ListBox.Styles>-->
			<ListBox.ItemTemplate>
				<DataTemplate>
					<Grid Loaded="Grid_Loaded">
						<Grid.ColumnDefinitions>
							<ColumnDefinition Width="70"></ColumnDefinition>
							<ColumnDefinition Width="*"></ColumnDefinition>
							<ColumnDefinition Width="70"></ColumnDefinition>
						</Grid.ColumnDefinitions>
						<Grid.RowDefinitions>
							<RowDefinition></RowDefinition>
							<RowDefinition></RowDefinition>
							<RowDefinition></RowDefinition>
						</Grid.RowDefinitions>
						<Border Grid.Row="0" Grid.Column="0" Grid.RowSpan="3" Classes="SongImage">
							<Grid>
								<Image Loaded="Image_Loaded" Unloaded="Image_Unloaded"></Image>
								<Canvas Background="#19000000"></Canvas>
							</Grid>
						</Border>
						<TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding Song, Mode=OneWay, Converter={StaticResource SongTitle}}" Classes="SongTitle" />
						<TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding Song.Artists, Mode=OneWay, Converter={StaticResource ArtistsToString}}" Classes="SongSubtitle" />
						<TextBlock Grid.Row="2" Grid.Column="1" Text="{Binding Song.Album, Mode=OneWay}" Classes="SongSubtitle" />
						<TextBlock Grid.Row="0" Grid.Column="2" Text="{Binding Song.Length.TotalSeconds, Mode=OneWay, Converter={StaticResource SecondsToString}}" Classes="SongMetaData" />
						<TextBlock Grid.Row="1" Grid.Column="2" Text="{Binding Song.FileType, Mode=OneWay}" Classes="SongMetaData Subtitle" />
						<TextBlock Grid.Row="2" Grid.Column="2" Classes="SongMetaData Subtitle">
							<Run Text="{Binding Song.BitRate, Mode=OneWay}"></Run><Run Text=" kbps"></Run>
						</TextBlock>
					</Grid>
				</DataTemplate>
			</ListBox.ItemTemplate>
			<ListBox.ContextMenu>
				<ContextMenu Name="PlaylistContextMenu" Padding="10" Background="#EE444444">
					<MenuItem Command="{Binding PlaySongCommand}" HotKey="Enter" InputGesture="Enter">
						<MenuItem.Header>
							<TextBlock Text="Play" FontWeight="Bold" Margin="8 0 8 0"></TextBlock>
						</MenuItem.Header>
						<MenuItem.Icon>
							<PathIcon Data="{StaticResource SemiIconPlay}"></PathIcon>
						</MenuItem.Icon>
					</MenuItem>
					<Separator />
					<!--<MenuItem Command="{Binding AddFilesCommand}" HotKey="Insert" InputGesture="Insert">
						<MenuItem.Header>
							<TextBlock Text="Add Files..." Margin="8 0 8 0"></TextBlock>
						</MenuItem.Header>
						<MenuItem.Icon>
							<PathIcon Data="{StaticResource SemiIconFile}"></PathIcon>
						</MenuItem.Icon>
					</MenuItem>
					<MenuItem Command="{Binding AddFolderCommand}" HotKey="Ctrl+Insert" InputGesture="Ctrl+Insert">
						<MenuItem.Header>
							<TextBlock Text="Add Folder..." Margin="8 0 8 0"></TextBlock>
						</MenuItem.Header>
						<MenuItem.Icon>
							<PathIcon Data="{StaticResource SemiIconFolder}"></PathIcon>
						</MenuItem.Icon>
					</MenuItem>
					<Separator />-->
					<MenuItem Command="{Binding RemoveSongsCommand}"  HotKey="Delete" InputGesture="Delete">
						<MenuItem.Styles>
							<Style Selector="TextBlock">
								<Setter Property="Foreground" Value="#ff99a4"/>
							</Style>
						</MenuItem.Styles>
						<MenuItem.Header>
							<TextBlock Text="Remove" Margin="8 0 8 0"></TextBlock>
						</MenuItem.Header>
						<MenuItem.Icon>
							<PathIcon Data="{StaticResource DeleteIcon}" Foreground="#ff99a4"></PathIcon>
						</MenuItem.Icon>
					</MenuItem>
					<Separator />
					<MenuItem Command="{Binding CutSongsCommand}" HotKey="Ctrl+X" InputGesture="Ctrl+X">
						<MenuItem.Header>
							<TextBlock Text="Cut" Margin="8 0 8 0"></TextBlock>
						</MenuItem.Header>
						<MenuItem.Icon>
							<PathIcon Data="{StaticResource CutIcon}"></PathIcon>
						</MenuItem.Icon>
					</MenuItem>
					<MenuItem Command="{Binding CopySongsCommand}" HotKey="Ctrl+C" InputGesture="Ctrl+C">
						<MenuItem.Header>
							<TextBlock Text="Copy" Margin="8 0 8 0"></TextBlock>
						</MenuItem.Header>
						<MenuItem.Icon>
							<PathIcon Data="{StaticResource CopyIcon}"></PathIcon>
						</MenuItem.Icon>
					</MenuItem>
					<MenuItem Command="{Binding PasteSongsCommand}" HotKey="Ctrl+V" InputGesture="Ctrl+V">
						<MenuItem.Header>
							<TextBlock Text="Paste" Margin="8 0 8 0"></TextBlock>
						</MenuItem.Header>
						<MenuItem.Icon>
							<PathIcon Data="{StaticResource PasteIcon}"></PathIcon>
						</MenuItem.Icon>
					</MenuItem>
					<Separator />
					<MenuItem Command="{Binding OpenFileLocationCommand}" HotKey="Alt+O" InputGesture="Alt+O">
						<MenuItem.Header>
							<TextBlock Text="Open File Location" Margin="8 0 8 0"></TextBlock>
						</MenuItem.Header>
						<MenuItem.Icon>
							<PathIcon Data="{StaticResource SemiIconFolderOpen}"></PathIcon>
						</MenuItem.Icon>
					</MenuItem>
				</ContextMenu>
			</ListBox.ContextMenu>
			<ListBox.KeyBindings>
				<KeyBinding Gesture="Enter" Command="{Binding PlaySongCommand}" />
			</ListBox.KeyBindings>
		</ListBox>
	</Grid>

</UserControl>
