StabilityMatrix/StabilityMatrix.Avalonia/Views/CheckpointBrowserPage.axaml

<UserControl 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:controls="clr-namespace:FluentAvalonia.UI.Controls;assembly=FluentAvalonia"
             xmlns:controls1="clr-namespace:StabilityMatrix.Avalonia.Controls"
             xmlns:viewModels="clr-namespace:StabilityMatrix.Avalonia.ViewModels"
             xmlns:designData="clr-namespace:StabilityMatrix.Avalonia.DesignData"
             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
             x:DataType="viewModels:CheckpointBrowserViewModel"
             d:DataContext="{x:Static designData:DesignData.CheckpointBrowserViewModel}"
             x:CompileBindings="True"
             x:Class="StabilityMatrix.Avalonia.Views.CheckpointBrowserPage">
    
    <UserControl.Resources>
        <DataTemplate DataType="{x:Type viewModels:CheckpointBrowserCardViewModel}" x:Key="CivitModelTemplate">
            <controls1:Card
                Margin="8"
                MaxHeight="450"
                CornerRadius="20"
                Name="ModelCard"
                Width="330">

                <StackPanel Orientation="Vertical">
                    <TextBlock
                        Foreground="{DynamicResource TextControlForeground}"
                        Margin="0,0,0,0"
                        Text="{Binding CivitModel.Name}"
                        VerticalAlignment="Center" />
                    <TextBlock
                        FontSize="11"
                        Foreground="{DynamicResource TextControlForeground}"
                        Margin="0,2,0,0"
                        Text="{Binding CivitModel.ModelVersions[0].Name, FallbackValue=''}"
                        VerticalAlignment="Center" />
                    <Grid>
                        <Image
                            Margin="0,8,0,8"
                            MaxHeight="300"
                            Source="{Binding CardImage}"
                            Stretch="UniformToFill" />
                        
                        <!-- Appearance="Info" -->
                        <Button
                            Command="{Binding OpenModelCommand}"
                            CommandParameter="{Binding CivitModel}"
                            HorizontalAlignment="Right"
                            Margin="0,16,8,0"
                            VerticalAlignment="Top">
                            <Button.Content>
                                <controls:SymbolIcon Symbol="Open" />
                            </Button.Content>
                        </Button>

                        <controls1:Card
                            Background="#AA1467B5"
                            Height="20"
                            HorizontalAlignment="Left"
                            Padding="4"
                            Margin="4,16,0,0"
                            VerticalAlignment="Top">

                            <TextBlock
                                FontSize="10"
                                FontWeight="Medium"
                                Foreground="{DynamicResource TextControlForeground}"
                                HorizontalAlignment="Center"
                                Text="{Binding CivitModel.Type}"
                                VerticalAlignment="Center" />
                        </controls1:Card>

                        <Rectangle
                            Fill="#DD000000"
                            HorizontalAlignment="Stretch"
                            Margin="0,8,0,8"
                            VerticalAlignment="Stretch"
                            IsVisible="{Binding IsImporting, FallbackValue=True}" />
                        <StackPanel
                            HorizontalAlignment="Stretch"
                            Orientation="Vertical"
                            VerticalAlignment="Center"
                            IsVisible="{Binding IsImporting}">
                            <controls1:ProgressRing
                                HorizontalAlignment="Center"
                                IsIndeterminate="False"
                                Value="{Binding Value}"
                                VerticalAlignment="Center" />
                            <TextBlock
                                HorizontalAlignment="Center"
                                Margin="0,8,0,0"
                                Text="{Binding Text, FallbackValue=Importing...}"
                                VerticalAlignment="Center" />
                        </StackPanel>
                    </Grid>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="1*" />
                            <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>
                        <Button
                            Classes="accent"
                            Command="{Binding ImportCommand}"
                            CommandParameter="{Binding CivitModel}"
                            IsEnabled="{Binding !IsImporting}"
                            HorizontalAlignment="Stretch"
                            Margin="0,8,0,0">
                            <Button.Content>
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock Text="Import Latest -"/>
                                    <TextBlock Margin="4,0,0,0"
                                               Text="{Binding CivitModel.FullFilesSize}"/>
                                </StackPanel>
                            </Button.Content>
                        </Button>
                        
                        <Button Grid.Column="1"
                                   Margin="8,8,0,0"
                                   Classes="accent"
                                   IsEnabled="{Binding !IsImporting}"
                                   Command="{Binding ShowVersionDialogCommand}"
                                   CommandParameter="{Binding CivitModel}"
                                   Content="All Versions"/>
                    </Grid>
                </StackPanel>
            </controls1:Card>
        </DataTemplate>
    </UserControl.Resources>
    
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <StackPanel Margin="8" Orientation="Vertical">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>

                <TextBox
                    HorizontalAlignment="Stretch"
                    Margin="8,0,0,0"
                    Watermark="Search models, #tags, or @users"
                    Text="{Binding SearchQuery, Mode=TwoWay}" />

                <Button
                    Classes="accent"
                    Command="{Binding SearchModelsCommand}"
                    Grid.Column="1"
                    IsDefault="True"
                    Margin="8,0,8,0"
                    VerticalAlignment="Stretch"
                    Width="80">
                    <StackPanel Orientation="Horizontal">
                        <controls1:ProgressRing
                            Height="20"
                            IsIndeterminate="True"
                            VerticalAlignment="Center"
                            IsVisible="{Binding SearchModelsCommand.IsRunning}"
                            Width="20" />
                        <TextBlock
                            Text="Search"
                            VerticalAlignment="Center"
                            IsVisible="{Binding !SearchModelsCommand.IsRunning}" />
                    </StackPanel>
                </Button>
            </Grid>
            <DockPanel>
                <StackPanel Margin="8" Orientation="Vertical">
                    <Label Content="Sort" />
                    <ComboBox
                        ItemsSource="{Binding AllSortModes}"
                        MinWidth="100"
                        SelectedItem="{Binding SortMode}" />
                </StackPanel>

                <StackPanel Margin="0,8" Orientation="Vertical">
                    <Label Content="Period" />
                    <ComboBox
                        ItemsSource="{Binding AllCivitPeriods}"
                        MinWidth="100"
                        SelectedItem="{Binding SelectedPeriod}" />
                </StackPanel>

                <StackPanel Margin="8" Orientation="Vertical">
                    <Label Content="Model Type" />
                    <ComboBox
                        ItemsSource="{Binding AllModelTypes}"
                        MinWidth="100"
                        SelectedItem="{Binding SelectedModelType}" />
                </StackPanel>

                <CheckBox
                    Content="Show NSFW Content"
                    FontSize="12"
                    HorizontalAlignment="Right"
                    IsChecked="{Binding ShowNsfw, Mode=TwoWay}"
                    Margin="8,8,8,0" />
            </DockPanel>

        </StackPanel>
            <ScrollViewer Grid.Row="1">
                <ItemsRepeater ItemTemplate="{StaticResource CivitModelTemplate}"
                               ItemsSource="{Binding ModelCards}">
                    <ItemsRepeater.Layout>
                        <UniformGridLayout Orientation="Horizontal" />
                    </ItemsRepeater.Layout>
                </ItemsRepeater>
            </ScrollViewer>

        <TextBlock
            Grid.Row="2"
            Margin="16,8"
            Text="Data provided by CivitAI"
            VerticalAlignment="Bottom" />

        <StackPanel
            Grid.Row="2"
            HorizontalAlignment="Center"
            Margin="8"
            Orientation="Vertical"
            IsVisible="{Binding HasSearched}">
            <TextBlock Margin="0,0,4,4" TextAlignment="Center">
                <Run Text="Page" />
                <Run Text="{Binding CurrentPageNumber, FallbackValue=1}" />
                <Run Text="/" />
                <Run Text="{Binding TotalPages, FallbackValue=5}" />
            </TextBlock>
            <StackPanel HorizontalAlignment="Center" Orientation="Horizontal">
                <Button
                    Command="{Binding PreviousPageCommand}"
                    IsEnabled="{Binding CanGoToPreviousPage}"
                    Margin="0,0,8,0">
                    <controls:SymbolIcon Symbol="PreviousFilled" />
                </Button>
                <Button Command="{Binding NextPageCommand}" IsEnabled="{Binding CanGoToNextPage}">
                    <controls:SymbolIcon Symbol="NextFilled" />
                </Button>
            </StackPanel>
        </StackPanel>

        <TextBlock
            Grid.Row="0"
            Grid.RowSpan="3"
            FontSize="20"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Text="{Binding NoResultsText, FallbackValue=No results found}"
            IsVisible="{Binding NoResultsFound}" />
        
        <controls1:ProgressRing
            Grid.Row="0"
            Grid.RowSpan="3"
            IsIndeterminate="True"
            IsVisible="{Binding ShowMainLoadingSpinner, FallbackValue=False}" />
    </Grid>
</UserControl>