<UserControl x:Class="EarTrumpet.UI.Views.AppItemView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:Theme="clr-namespace:EarTrumpet.UI.Themes"
             xmlns:ctl="clr-namespace:EarTrumpet.UI.Controls"
             Height="{DynamicResource Mutable_AppItemCellHeight}"
             IsTabStop="False">
    <Grid Name="GridRoot" Background="Transparent">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="{DynamicResource Mutable_IconCellWidth}" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="{DynamicResource Mutable_VolumeCellWidth}" />
        </Grid.ColumnDefinitions>
        <Grid Grid.Column="0" Margin="{StaticResource DeviceOrAppIconMargin}">
            <Border Width="{DynamicResource Mutable_AppIconSize}"
                    Height="{DynamicResource Mutable_AppIconSize}"
                    HorizontalAlignment="Center">
                <Border.Style>
                    <Style TargetType="Border">
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding IsMuted}" Value="true">
                                <Setter Property="Opacity" Value="{StaticResource MutedOpacity}" />
                            </DataTrigger>
                            <DataTrigger Binding="{Binding Source, ElementName=AppIcon}" Value="{x:Null}">
                                <Setter Property="Theme:Brush.Background" Value="SystemAccent" />
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </Border.Style>
                <Grid>
                    <ctl:ImageEx x:Name="AppIcon"
                                 Width="{DynamicResource Mutable_AppIconSize}"
                                 Height="{DynamicResource Mutable_AppIconSize}"
                                 SourceEx="{Binding}"
                                 Stretch="Fill" />
                    <Border>
                        <Border.Style>
                            <Style TargetType="{x:Type Border}">
                                <Setter Property="Visibility" Value="Collapsed" />
                                <Style.Triggers>
                                    <DataTrigger Binding="{Binding Source, ElementName=AppIcon}" Value="{x:Null}">
                                        <Setter Property="Visibility" Value="Visible" />
                                    </DataTrigger>
                                </Style.Triggers>
                            </Style>
                        </Border.Style>

                        <TextBlock Margin="0,-1,0,0"
                                   HorizontalAlignment="Center"
                                   VerticalAlignment="Center"
                                   Theme:Brush.Foreground="Text"
                                   FontSize="{DynamicResource Mutable_AppIconTextFontSize}"
                                   FontWeight="SemiBold"
                                   Text="{Binding IconText}"
                                   TextAlignment="Center" />
                    </Border>
                </Grid>
            </Border>
            <Button Name="MuteButton"
                    Width="{DynamicResource Mutable_AppIconSize}"
                    Height="{DynamicResource Mutable_AppIconSize}"
                    Command="{Binding ToggleMute}"
                    IsTabStop="False"
                    ToolTip="{Binding DisplayName}">
                <Button.Style>
                    <Style BasedOn="{StaticResource MuteButton}" TargetType="Button">
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding IsMuted}" Value="true">
                                <Setter Property="Opacity" Value="1" />
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </Button.Style>
                <Button.Content>
                    <TextBlock Theme:Brush.Foreground="{Binding (Theme:Brush.Foreground), RelativeSource={RelativeSource AncestorType=Button}}"
                               FontSize="{DynamicResource Mutable_DeviceVolumeTextFontSize}"
                               Opacity="0.8"
                               Style="{StaticResource GlyphTextBlockStyle}"
                               Text="&#xE74F;" />
                </Button.Content>
            </Button>
        </Grid>
        <ctl:VolumeSlider Grid.Column="1"
                          PeakValue1="{Binding PeakValue1}"
                          PeakValue2="{Binding PeakValue2}"
                          Value="{Binding Volume, Mode=TwoWay}">
            <ctl:VolumeSlider.Style>
                <Style BasedOn="{StaticResource {x:Type Slider}}" TargetType="Slider">
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding IsMuted}" Value="True">
                            <Setter Property="Opacity" Value="{StaticResource MutedOpacity}" />
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </ctl:VolumeSlider.Style>
        </ctl:VolumeSlider>
        <TextBlock Grid.Column="2" Text="{Binding Volume, Mode=OneWay}">
            <TextBlock.Style>
                <Style BasedOn="{StaticResource AppVolumeTextStyle}" TargetType="TextBlock">
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding IsMuted}" Value="True">
                            <Setter Property="Opacity" Value="{StaticResource MutedOpacity}" />
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </TextBlock.Style>
        </TextBlock>
    </Grid>
</UserControl>
