<Panel x:Class="GalaxyBudsClient.Interface.Controls.EarbudCompactStatusUnit"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       xmlns="https://github.com/avaloniaui"
       xmlns:controls="clr-namespace:GalaxyBudsClient.Interface.Controls"
       xmlns:ic="clr-namespace:FluentIcons.Avalonia.Fluent;assembly=FluentIcons.Avalonia.Fluent"
       xmlns:system="clr-namespace:System;assembly=System.Runtime"
       xmlns:ext="clr-namespace:GalaxyBudsClient.Interface.MarkupExtensions"
       xmlns:converters="clr-namespace:GalaxyBudsClient.Interface.Converters"
       xmlns:vm="clr-namespace:GalaxyBudsClient.Interface.ViewModels.Controls"
       xmlns:platform="clr-namespace:GalaxyBudsClient.Platform"
       xmlns:i18N="clr-namespace:GalaxyBudsClient.Generated.I18N"
       x:DataType="vm:EarbudCompactStatusUnitViewModel">

    <Design.DataContext>
        <vm:EarbudCompactStatusUnitViewModel />
    </Design.DataContext>

    <Panel.Resources>
        <system:Double x:Key="FontSizeBatteryIcons">20</system:Double>
        <system:Double x:Key="FontSizePercentage">19</system:Double>
        <system:Double x:Key="FontSizeOtherLabels">14</system:Double>
        <system:Double x:Key="FontSizeCaseLabel">13</system:Double>
        <converters:BatterySymbolConverter x:Key="BatterySymbolConverter" />
    </Panel.Resources>

    <Grid RowDefinitions="Auto,8,Auto,Auto"
          IsVisible="{Binding IsConnected, Source={x:Static platform:BluetoothImpl.Instance}}"
          HorizontalAlignment="Center"
          VerticalAlignment="Center">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="{Binding CenterColumnWidth}" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        
        <controls:EarbudIcon Grid.Row="0" Grid.Column="0" Side="L" />
        <controls:EarbudIcon Grid.Row="0" Grid.Column="2" Side="R" />

        <StackPanel Grid.Row="2" Grid.Column="0"
                    Spacing="0"
                    IsVisible="{Binding IsLeftOnline}"
                    Orientation="Horizontal"
                    HorizontalAlignment="Center">

            <TextBlock Text="{Binding LeftBattery, StringFormat={}{0}%}"
                       FontSize="{StaticResource FontSizePercentage}" />

            <ic:SymbolIcon Symbol="{Binding LeftBattery, Converter={StaticResource BatterySymbolConverter}}"
                           FontSize="{StaticResource FontSizeBatteryIcons}">
                <ic:SymbolIcon.RenderTransform>
                    <RotateTransform Angle="270" />
                </ic:SymbolIcon.RenderTransform>
            </ic:SymbolIcon>
        </StackPanel>
        
        <StackPanel Grid.Row="2" Grid.Column="2"
                    Spacing="0"
                    IsVisible="{Binding IsRightOnline}"
                    Orientation="Horizontal"
                    HorizontalAlignment="Center">

            <ic:SymbolIcon Symbol="{Binding RightBattery, Converter={StaticResource BatterySymbolConverter}}"
                           FontSize="{StaticResource FontSizeBatteryIcons}">
                <ic:SymbolIcon.RenderTransform>
                    <RotateTransform Angle="270" />
                </ic:SymbolIcon.RenderTransform>
            </ic:SymbolIcon>

            <TextBlock Text="{Binding RightBattery, StringFormat={}{0}%}"
                       FontSize="{StaticResource FontSizePercentage}" />

        </StackPanel>
        
        <StackPanel Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="3" 
                    Margin="0,-40,0,0">
            <Interaction.Behaviors>
                <ext:RequiresFeatureBehavior Feature="CaseBattery" />
            </Interaction.Behaviors>

            <TextBlock Text="{ext:Translate {x:Static i18N:Keys.Case}}"
                       TextAlignment="Center"
                       Opacity="0.5"
                       IsVisible="{Binding CaseBattery, Converter={x:Static ObjectConverters.IsNotNull}}"
                       FontSize="{StaticResource FontSizeCaseLabel}" />
            <TextBlock Text="{Binding CaseBattery, StringFormat={}{0}%}"
                       TextAlignment="Center"
                       IsVisible="{Binding CaseBattery, Converter={x:Static ObjectConverters.IsNotNull}}"
                       FontSize="{StaticResource FontSizeOtherLabels}" />
        </StackPanel>
    </Grid>

    <controls:EmptyView IsVisible="{Binding !IsConnected, Source={x:Static platform:BluetoothImpl.Instance}}"
                        Text="{ext:Translate {x:Static i18N:Keys.ConnlostDisconnected}}"
                        Symbol="WiFiOff" />
</Panel>
