<UserControl
    x:Class="AmbientSounds.Controls.ShareResultsControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="using:AmbientSounds.Controls"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
    xmlns:viewmodels="using:AmbientSounds.ViewModels"
    d:DesignHeight="300"
    d:DesignWidth="400"
    mc:Ignorable="d">

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <TextBlock
            x:Uid="ShareResultsMessage"
            MaxWidth="360"
            TextWrapping="WrapWholeWords" />

        <muxc:ProgressRing
            x:Name="LoadingRing"
            Grid.Row="1"
            Width="20"
            Height="20"
            Margin="0,24,0,12"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            x:Load="{x:Bind ViewModel.Loading, Mode=OneWay}" />

        <ListView
            Grid.Row="1"
            Margin="0,12,0,0"
            ItemsSource="{x:Bind ViewModel.Sounds}"
            SelectionMode="None">
            <ListView.ItemContainerStyle>
                <Style TargetType="ListViewItem">
                    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                </Style>
            </ListView.ItemContainerStyle>
            <ListView.ItemTemplate>
                <DataTemplate x:DataType="viewmodels:OnlineSoundViewModel">
                    <Grid Margin="0,2">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="80" />
                        </Grid.ColumnDefinitions>

                        <TextBlock
                            VerticalAlignment="Center"
                            Text="{x:Bind Name}"
                            TextTrimming="CharacterEllipsis" />
                        <Grid
                            Grid.Column="1"
                            Margin="8,0,0,0"
                            HorizontalAlignment="Right"
                            VerticalAlignment="Center">
                            <FontIcon
                                x:Name="DownloadedCheckMark"
                                Margin="0,0,10,0"
                                x:Load="{x:Bind IsInstalled, Mode=OneWay}"
                                FontFamily="{StaticResource FluentUIGlyphs}"
                                Glyph="&#xE9A2;" />
                            <Grid x:Name="DownloadElements" x:Load="{x:Bind NotInstalled, Mode=OneWay}">
                                <Button
                                    x:Name="BuyButton"
                                    x:Uid="BuyButton"
                                    x:Load="{x:Bind CanBuy, Mode=OneWay}"
                                    Background="Transparent"
                                    Command="{x:Bind BuyCommand}">
                                    <TextBlock Text="{x:Bind Price, Mode=OneWay}" />
                                </Button>
                                <Button
                                    x:Uid="DownloadSoundButton"
                                    Command="{x:Bind DownloadCommand}"
                                    Style="{StaticResource TransparentRoundButtonStyle}"
                                    Visibility="{x:Bind IsOwned, Mode=OneWay}">
                                    <FontIcon
                                        VerticalAlignment="Center"
                                        FontFamily="{StaticResource FluentUIGlyphs}"
                                        Glyph="&#xE9B9;" />
                                </Button>
                                <muxc:ProgressRing
                                    x:Name="DownloadProgressRing"
                                    Width="40"
                                    Height="40"
                                    x:Load="{x:Bind DownloadProgressVisible, Mode=OneWay}" />
                            </Grid>
                        </Grid>
                    </Grid>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </Grid>
</UserControl>
