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:StabilityMatrix.Avalonia.Controls"
             xmlns:viewModels="clr-namespace:StabilityMatrix.Avalonia.ViewModels"
             xmlns:designData="clr-namespace:StabilityMatrix.Avalonia.DesignData"
             xmlns:ui="clr-namespace:FluentAvalonia.UI.Controls;assembly=FluentAvalonia"
             xmlns:vm="clr-namespace:StabilityMatrix.Avalonia.ViewModels.CheckpointManager"
             xmlns:checkpointBrowser="clr-namespace:StabilityMatrix.Avalonia.ViewModels.CheckpointBrowser"
             xmlns:avalonia="clr-namespace:Projektanker.Icons.Avalonia;assembly=Projektanker.Icons.Avalonia"
             xmlns:lang="clr-namespace:StabilityMatrix.Avalonia.Languages"
             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="700"
             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 checkpointBrowser:CheckpointBrowserCardViewModel}" x:Key="CivitModelTemplate">
            <controls:Card
                Margin="8"
                MaxHeight="450"
                CornerRadius="8"
                Name="ModelCard"
                Width="330">

                <StackPanel Orientation="Vertical">
                    <Grid ColumnDefinitions="*, Auto"
                          Margin="0,-4,0,0">
                        <TextBlock
                            Foreground="{DynamicResource TextControlForeground}"
                            Text="{Binding CivitModel.Name}"
                            VerticalAlignment="Center" />
                        <Button
                            Grid.Column="1"
                            HorizontalContentAlignment="Right"
                            HorizontalAlignment="Right"
                            VerticalContentAlignment="Top"
                            VerticalAlignment="Top"
                            Padding="4,2"
                            Margin="4,0,0,0"
                            Classes="transparent"
                            Width="24"
                            BorderThickness="0">
                            <ui:SymbolIcon FontSize="18" Symbol="MoreVertical" />
                            <Button.Flyout>
                                <MenuFlyout>
                                    <MenuItem Header="{x:Static lang:Resources.Action_OpenOnCivitAi}"
                                              Command="{Binding OpenModelCommand}">
                                        <MenuItem.Icon>
                                            <ui:SymbolIcon Symbol="Open" />
                                        </MenuItem.Icon>
                                    </MenuItem>
                                </MenuFlyout>
                            </Button.Flyout>
                        </Button>
                    </Grid>
                    <TextBlock
                        FontSize="11"
                        Foreground="{DynamicResource TextControlForeground}"
                        Margin="0,2,0,0"
                        Text="{Binding CivitModel.LatestModelVersionName, FallbackValue=''}"
                        VerticalAlignment="Center" />
                    <Grid>
                        <controls:BetterAdvancedImage
                            Margin="0,8,0,8"
                            Height="300"
                            StretchDirection="Both"
                            CornerRadius="8"
                            VerticalContentAlignment="Top"
                            HorizontalContentAlignment="Center"
                            Source="{Binding CardImage}"
                            Stretch="UniformToFill" />

                        <Button
                            Command="{Binding ToggleFavoriteCommand}"
                            HorizontalAlignment="Right"
                            Margin="0,16,8,0"
                            FontSize="20"
                            Classes="info"
                            IsVisible="{Binding !IsFavorite}"
                            VerticalAlignment="Top">
                                <Grid>
                                    <ui:SymbolIcon Symbol="StarAdd" />
                                </Grid>
                        </Button>
                        <Button
                            Command="{Binding ToggleFavoriteCommand}"
                            HorizontalAlignment="Right"
                            Margin="0,16,8,0"
                            FontSize="20"
                            Classes="success"
                            IsVisible="{Binding IsFavorite}"
                            VerticalAlignment="Top">
                            <Grid>
                                <ui:SymbolIcon Symbol="StarFilled" />
                            </Grid>
                        </Button>
                        
                        <StackPanel Orientation="Horizontal">
                            <controls:Card
                                Classes="info"
                                Height="24"
                                HorizontalAlignment="Left"
                                Padding="4"
                                Margin="4,16,0,0"
                                VerticalAlignment="Top">

                                <TextBlock
                                    FontSize="11"
                                    FontWeight="Medium"
                                    HorizontalAlignment="Center"
                                    Text="{Binding CivitModel.Type}"
                                    VerticalAlignment="Center" />
                            </controls:Card>
                            
                            <controls:Card
                                Classes="info"
                                Height="24"
                                HorizontalAlignment="Left"
                                Padding="4"
                                Margin="4,16,0,0"
                                VerticalAlignment="Top">

                                <TextBlock
                                    FontSize="11"
                                    FontWeight="Medium"
                                    HorizontalAlignment="Center"
                                    Text="{Binding CivitModel.BaseModelType}"
                                    VerticalAlignment="Center" />
                            </controls:Card>

                            <controls:Card
                                Classes="success"
                                Height="24"
                                HorizontalAlignment="Left"
                                Padding="4"
                                IsVisible="{Binding ShowUpdateCard}"
                                Margin="4,16,0,0"
                                VerticalAlignment="Top">

                                <TextBlock
                                    FontSize="11"
                                    FontWeight="Medium"
                                    HorizontalAlignment="Center"
                                    Text="{Binding UpdateCardText}"
                                    VerticalAlignment="Center" />
                            </controls:Card>
                        </StackPanel>
                        <Rectangle
                            Fill="#DD000000"
                            HorizontalAlignment="Stretch"
                            Margin="0,8,0,8"
                            VerticalAlignment="Stretch"
                            IsVisible="{Binding IsImporting}" />
                        <StackPanel
                            HorizontalAlignment="Stretch"
                            Orientation="Vertical"
                            VerticalAlignment="Center"
                            IsVisible="{Binding IsImporting}">
                            <controls:ProgressRing
                                HorizontalAlignment="Center"
                                IsIndeterminate="False"
                                Width="120"
                                Height="120"
                                StartAngle="90"
                                EndAngle="450"
                                Value="{Binding Value}"
                                VerticalAlignment="Center" />
                            <TextBlock
                                HorizontalAlignment="Center"
                                Margin="0,8,0,0"
                                Text="{Binding Text, TargetNullValue=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="{x:Static lang:Resources.Label_ImportLatest}" />
                                    <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="{x:Static lang:Resources.Label_AllVersions}" />
                    </Grid>
                </StackPanel>
            </controls:Card>
        </DataTemplate>
    </UserControl.Resources>

    <Grid RowDefinitions="Auto,*,Auto" Margin="0,8,0,0">

        <StackPanel Margin="8" Orientation="Vertical">
            <Grid ColumnDefinitions="*,Auto">

                <TextBox
                    HorizontalAlignment="Stretch"
                    Margin="8,0,0,0"
                    Watermark="{x:Static lang:Resources.Label_ModelSearchWatermark}"
                    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">
                    <Grid>
                        <controls:ProgressRing
                            MinHeight="16"
                            IsIndeterminate="True"
                            VerticalAlignment="Center"
                            BorderThickness="4"
                            IsVisible="{Binding SearchModelsCommand.IsRunning}"
                            MinWidth="16" />
                        <TextBlock
                            Text="{x:Static lang:Resources.Action_Search}"
                            VerticalAlignment="Center"
                            IsVisible="{Binding !SearchModelsCommand.IsRunning}" />
                    </Grid>
                </Button>
            </Grid>
            <DockPanel>
                <StackPanel Margin="4, 8" Orientation="Vertical">
                    <Label Content="{x:Static lang:Resources.Label_Sort}" />
                    <ComboBox
                        ItemsSource="{Binding AllSortModes}"
                        MinWidth="100"
                        SelectedItem="{Binding SortMode}" />
                </StackPanel>

                <StackPanel Margin="4, 8" Orientation="Vertical">
                    <Label Content="{x:Static lang:Resources.Label_TimePeriod}" />
                    <ComboBox
                        ItemsSource="{Binding AllCivitPeriods}"
                        MinWidth="100"
                        SelectedItem="{Binding SelectedPeriod}" />
                </StackPanel>

                <StackPanel Margin="4, 8" Orientation="Vertical">
                    <Label Content="{x:Static lang:Resources.Label_ModelType}" />
                    <ComboBox
                        ItemsSource="{Binding AllModelTypes}"
                        MinWidth="100"
                        SelectedItem="{Binding SelectedModelType}" />
                </StackPanel>
                
                <StackPanel Margin="4, 8" Orientation="Vertical">
                    <Label Content="{x:Static lang:Resources.Label_BaseModel}" />
                    <ComboBox
                        ItemsSource="{Binding BaseModelOptions}"
                        MinWidth="100"
                        SelectedItem="{Binding SelectedBaseModelType}" />
                </StackPanel>
                

                <CheckBox
                    Content="{x:Static lang:Resources.Label_ShowNsfwContent}"
                    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="{x:Static lang:Resources.Label_DataProvidedByCivitAi}"
            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="{x:Static lang:Resources.Label_Page}" />
                <Run Text="{Binding CurrentPageNumber, FallbackValue=1}" />
                <Run Text="/" />
                <Run Text="{Binding TotalPages, FallbackValue=5}" />
            </TextBlock>
            <StackPanel HorizontalAlignment="Center" Orientation="Horizontal">
                <Button
                    Command="{Binding FirstPage}"
                    IsEnabled="{Binding CanGoToFirstPage}"
                    ToolTip.Tip="{x:Static lang:Resources.Label_FirstPage}"
                    Margin="0,0,8,0">
                    <avalonia:Icon Value="fa-solid fa-backward-fast"/>
                </Button>
                <Button
                    Command="{Binding PreviousPage}"
                    ToolTip.Tip="{x:Static lang:Resources.Label_PreviousPage}"
                    IsEnabled="{Binding CanGoToPreviousPage}"
                    Margin="0,0,8,0">
                    <avalonia:Icon Value="fa-solid fa-caret-left"/>
                </Button>
                <Button Command="{Binding NextPage}" 
                        IsEnabled="{Binding CanGoToNextPage}"
                        ToolTip.Tip="{x:Static lang:Resources.Label_NextPage}"
                        Margin="0,0,8,0">
                    <avalonia:Icon Value="fa-solid fa-caret-right"/>
                </Button>
                <Button
                    Command="{Binding LastPage}"
                    ToolTip.Tip="{x:Static lang:Resources.Label_LastPage}"
                    IsEnabled="{Binding CanGoToLastPage}">
                    <avalonia:Icon Value="fa-solid fa-forward-fast"/>
                </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}" />

        <controls:ProgressRing
            Grid.Row="1"
            IsIndeterminate="True"
            Width="128"
            Height="128"
            HorizontalAlignment="Stretch"
            VerticalAlignment="Stretch"
            IsVisible="{Binding ShowMainLoadingSpinner, FallbackValue=False}" />
    </Grid>
</UserControl>