<UserControl
    x:Class="AmbientSounds.Controls.PlayerControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:converters="using:AmbientSounds.Converters"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="using:AmbientSounds.Controls"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    d:DesignHeight="300"
    d:DesignWidth="400"
    mc:Ignorable="d">

    <StackPanel Orientation="Horizontal">
        <Button
            AutomationProperties.Name="{x:Bind converters:LocalizationConverter.ConvertPlayerButtonState(ViewModel.IsPaused), Mode=OneWay}"
            Command="{x:Bind ViewModel.TogglePlayStateCommand}"
            CornerRadius="30"
            Style="{StaticResource TransparentRoundButtonStyle}"
            ToolTipService.ToolTip="{x:Bind converters:LocalizationConverter.ConvertPlayerButtonState(ViewModel.IsPaused), Mode=OneWay}">
            <Grid>
                <!--  play  -->
                <FontIcon
                    FontFamily="{StaticResource FluentUIGlyphs}"
                    Glyph="&#xEB21;"
                    Visibility="{x:Bind ViewModel.IsPaused, Mode=OneWay}" />

                <!--  pause  -->
                <FontIcon
                    FontFamily="{StaticResource FluentUIGlyphs}"
                    Glyph="&#xEAF4;"
                    Visibility="{x:Bind ViewModel.IsPlaying, Mode=OneWay}" />
            </Grid>
        </Button>
        <Button Margin="12,0,0,0" Style="{StaticResource TransparentRoundButtonStyle}">
            <FontIcon FontFamily="{StaticResource FluentUIGlyphs}" Glyph="&#xEB7D;" />
            <Button.Flyout>
                <Flyout Placement="Top">
                    <StackPanel Margin="4" Background="Transparent">
                        <TextBlock x:Uid="GlobalVolume" HorizontalAlignment="Center" />
                        <Slider
                            x:Uid="VolumeSlider"
                            Width="120"
                            Margin="0,4,0,0"
                            Value="{x:Bind ViewModel.Volume, Mode=TwoWay}" />
                    </StackPanel>
                </Flyout>
            </Button.Flyout>
        </Button>

        <!--<Button
            x:Uid="RandomButton"
            Margin="12,0,0,0"
            Command="{x:Bind ViewModel.RandomCommand}"
            Style="{StaticResource TransparentRoundButtonStyle}"
            Visibility="Collapsed">
            <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE14B;" />
        </Button>-->

    </StackPanel>
</UserControl>
