<Panel 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:local="clr-namespace:MercuryConverter.UI.Views"
        d:DesignWidth="800" d:DesignHeight="400"

        x:Class="MercuryConverter.UI.Views.Selection"
        xmlns:data="clr-namespace:MercuryConverter.Data"
>
    <DockPanel>
        <!-- Sidebar -->
        <TabControl Margin="8 8 0 0" Width="250" DockPanel.Dock="Right">
            <TabControl.Resources>
                <ResourceDictionary>
                    <Thickness x:Key="TabItemHeaderMargin">12 0 12 15</Thickness>
                    <Thickness x:Key="TabItemMargin">0 0 0 0</Thickness>
                </ResourceDictionary>
            </TabControl.Resources>

            <TabItem Header="Info" FontSize="16">
                <StackPanel Name="SelectionInfo">
                    <TextBlock Name="InfoId" FontFamily="monospace" Text="S00-000" HorizontalAlignment="Center"/>
                    <Image Name="InfoImageJacket" Margin="24 0 24 0" Source="/Assets/imgs/jacket-placeholder.png"/>
                    <TextBlock Name="InfoNameText" Text="Name" FontWeight="Bold" TextTrimming="WordEllipsis" TextAlignment="Center" HorizontalAlignment="Center" Margin="0 10 0 0" ToolTip.Tip="{Binding RelativeSource={RelativeSource Self}, Path=Text}"/>
                    <TextBlock Name="InfoArtistText" Text="Artist" TextTrimming="CharacterEllipsis" TextAlignment="Center" HorizontalAlignment="Center" ToolTip.Tip="{Binding RelativeSource={RelativeSource Self}, Path=Text}"/>
                    <TextBlock Name="InfoSourceText" Text="Source" HorizontalAlignment="Center" Margin="0 6 0 0"/>
                    <StackPanel Name="ChartInfoGroup" Margin="0 20 0 0"/>
                </StackPanel>
            </TabItem>
            <TabItem Header="Filters" FontSize="16">
                <StackPanel>
                    <!-- Sources Filter -->
                    <TextBlock Text="Sources" FontWeight="Medium" Margin="0 0 0 4"/>
                    <StackPanel Margin="10 0 0 0" Name="FilterSourceContainer"/>
                    <!-- Categories Filter -->
                    <TextBlock Text="Categories" FontWeight="Medium" Margin="0 20 0 4"/>
                    <StackPanel Margin="10 0 0 0" Name="FilterCategoryContainer"/>
                </StackPanel>
            </TabItem>
        </TabControl>
        <!-- Song Listing Table -->
        <DockPanel>
            <DockPanel Margin="0 4 0 8" DockPanel.Dock="Top">
                <TextBox Watermark="Search for title, artist, designer..."/>
            </DockPanel>
            <UserControl Background="{DynamicResource DataGridContentBackground}">
                <DataGrid Name="ListingTable" IsReadOnly="True" SelectionMode="Extended" ItemsSource="{x:Static data:Database.Songs}"
                    CanUserResizeColumns="True"
                >
                    <DataGrid.Columns>
                        <DataGridTextColumn Header="ID" Width="90" Binding="{Binding Id}"/>
                        <DataGridTextColumn Header="Title" Width="*" Binding="{Binding Name}"/>
                        <DataGridTextColumn Header="Artist" Width="*" Binding="{Binding Artist}"/>
                        <DataGridTextColumn Header="Version Released" Width="150" Binding="{Binding SourceName}" SortMemberPath="Source"/>
                    </DataGrid.Columns>
                    <DataGrid.Styles>
                        <Style Selector="DataGridCell">
                            <Setter Property="ToolTip.Tip" Value="{Binding RelativeSource={RelativeSource Self}, Path=Content.Text}" />
                        </Style>
                    </DataGrid.Styles>
                </DataGrid>
            </UserControl>
        </DockPanel>
    </DockPanel>
</Panel>