StabilityMatrix/StabilityMatrix.Avalonia/Views/CheckpointBrowserPage.axaml

<UserControl
    x:Class="StabilityMatrix.Avalonia.Views.CheckpointBrowserPage"
    xmlns="https://github.com/avaloniaui"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:avalonia="clr-namespace:Projektanker.Icons.Avalonia;assembly=Projektanker.Icons.Avalonia"
    xmlns:checkpointBrowser="clr-namespace:StabilityMatrix.Avalonia.ViewModels.CheckpointBrowser"
    xmlns:controls="clr-namespace:StabilityMatrix.Avalonia.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:designData="clr-namespace:StabilityMatrix.Avalonia.DesignData"
    xmlns:lang="clr-namespace:StabilityMatrix.Avalonia.Languages"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:ui="clr-namespace:FluentAvalonia.UI.Controls;assembly=FluentAvalonia"
    xmlns:viewModels="clr-namespace:StabilityMatrix.Avalonia.ViewModels"
    xmlns:vm="clr-namespace:StabilityMatrix.Avalonia.ViewModels.CheckpointManager"
    xmlns:converters="clr-namespace:StabilityMatrix.Avalonia.Converters"
    d:DataContext="{x:Static designData:DesignData.CheckpointBrowserViewModel}"
    d:DesignHeight="700"
    d:DesignWidth="800"
    x:CompileBindings="True"
    x:DataType="viewModels:CheckpointBrowserViewModel"
    mc:Ignorable="d">

    <UserControl.Styles>
        <Style Selector="Border#HoverBorder Border#ModelCardBottom">
            <Setter Property="Background" Value="#99000000" />
        </Style>
        <Style Selector="Border#HoverBorder:pointerover Border#ModelCardBottom">
            <Setter Property="Background" Value="#CC000000" />
        </Style>
        <Style Selector="Border#HoverBorder">
            <Setter Property="BorderBrush" Value="Transparent" />
            <Setter Property="BorderThickness" Value="0" />
            <Setter Property="Cursor" Value="Arrow" />
            <Setter Property="Margin" Value="8" />
        </Style>
        <Style Selector="Border#HoverBorder:pointerover">
            <Setter Property="BorderBrush" Value="{DynamicResource SystemAccentColorDark1}" />
            <Setter Property="BorderThickness" Value="0,0,0,1" />
            <Setter Property="Cursor" Value="Hand" />
            <Setter Property="Margin" Value="8,4,8,12" />
        </Style>

        <Style Selector="Border#HoverBorder controls|BetterAdvancedImage" />
        <Style Selector="Border#HoverBorder:pointerover controls|BetterAdvancedImage" />
    </UserControl.Styles>

    <UserControl.Resources>
        <converters:KiloFormatterStringConverter x:Key="KiloFormatterConverter"/>
        <DataTemplate x:Key="CivitModelTemplate" DataType="{x:Type checkpointBrowser:CheckpointBrowserCardViewModel}">
            <Border
                Name="HoverBorder"
                Width="334"
                Height="404"
                Padding="0"
                HorizontalAlignment="Center"
                CornerRadius="8">
                <Button
                    Name="ModelCard"
                    Padding="-1"
                    HorizontalAlignment="Center"
                    HorizontalContentAlignment="Center"
                    VerticalContentAlignment="Top"
                    Command="{Binding ShowVersionDialogCommand}"
                    CommandParameter="{Binding CivitModel}"
                    CornerRadius="12"
                    IsEnabled="{Binding !IsImporting}">
                    <Grid HorizontalAlignment="Center" RowDefinitions="*, Auto">
                        <controls:BetterAdvancedImage
                            Grid.RowSpan="2"
                            Width="330"
                            Height="400"
                            HorizontalContentAlignment="Center"
                            VerticalContentAlignment="Top"
                            CornerRadius="8"
                            Source="{Binding CardImage}"
                            Stretch="UniformToFill"
                            StretchDirection="Both" />

                        <StackPanel
                            Grid.Row="0"
                            HorizontalAlignment="Right"
                            Orientation="Horizontal">
                            <Button
                                Margin="0,8,8,0"
                                HorizontalAlignment="Right"
                                VerticalAlignment="Top"
                                Classes="transparent-info"
                                Command="{Binding ToggleFavoriteCommand}"
                                FontSize="20"
                                IsVisible="{Binding !IsFavorite}">
                                <Grid>
                                    <ui:SymbolIcon Symbol="StarAdd" />
                                </Grid>
                            </Button>
                            <Button
                                Margin="0,8,8,0"
                                HorizontalAlignment="Right"
                                VerticalAlignment="Top"
                                Classes="success"
                                Command="{Binding ToggleFavoriteCommand}"
                                FontSize="20"
                                IsVisible="{Binding IsFavorite}">
                                <Grid>
                                    <ui:SymbolIcon Symbol="StarFilled" />
                                </Grid>
                            </Button>
                        </StackPanel>


                        <StackPanel Grid.Row="0" Orientation="Horizontal">
                            <controls:Card
                                Height="24"
                                Margin="8,8,0,0"
                                Padding="4"
                                HorizontalAlignment="Left"
                                VerticalAlignment="Top"
                                Classes="info">

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

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

                                <TextBlock
                                    HorizontalAlignment="Center"
                                    VerticalAlignment="Center"
                                    FontSize="11"
                                    FontWeight="Medium"
                                    Text="{Binding UpdateCardText}" />
                            </controls:Card>
                        </StackPanel>
                        <Border
                            Grid.Row="0"
                            Grid.RowSpan="2"
                            Margin="0,0,0,0"
                            HorizontalAlignment="Stretch"
                            VerticalAlignment="Stretch"
                            Background="#DD000000"
                            CornerRadius="8"
                            IsVisible="{Binding IsImporting}"
                            ZIndex="1" />
                        <StackPanel
                            Grid.Row="0"
                            Grid.RowSpan="2"
                            HorizontalAlignment="Stretch"
                            VerticalAlignment="Center"
                            IsVisible="{Binding IsImporting}"
                            Orientation="Vertical"
                            ZIndex="2">
                            <controls:ProgressRing
                                Width="120"
                                Height="120"
                                HorizontalAlignment="Center"
                                VerticalAlignment="Center"
                                EndAngle="450"
                                IsIndeterminate="False"
                                StartAngle="90"
                                Value="{Binding Value}" />
                            <TextBlock
                                Margin="0,8,0,0"
                                HorizontalAlignment="Center"
                                VerticalAlignment="Center"
                                Text="{Binding Text, TargetNullValue=Importing...}" />
                        </StackPanel>

                        <Border
                            Name="ModelCardBottom"
                            Grid.Row="1"
                            CornerRadius="0,0,8,8">
                            <Grid ColumnDefinitions="*, Auto" RowDefinitions="Auto, Auto, Auto">

                                <TextBlock
                                    Grid.ColumnSpan="2"
                                    MaxWidth="250"
                                    Margin="8,0,8,0"
                                    HorizontalAlignment="Left"
                                    VerticalAlignment="Center"
                                    FontWeight="SemiBold"
                                    Foreground="{DynamicResource TextControlForeground}"
                                    LetterSpacing="0.33"
                                    Text="{Binding CivitModel.Name}"
                                    TextTrimming="CharacterEllipsis"
                                    TextWrapping="NoWrap"
                                    ToolTip.Tip="{Binding CivitModel.Name}" />

                                <TextBlock
                                    Grid.Row="1"
                                    Grid.Column="0"
                                    Margin="8,-4,0,0"
                                    VerticalAlignment="Center"
                                    FontSize="11"
                                    Foreground="{DynamicResource TextControlForeground}"
                                    Text="{Binding CivitModel.LatestModelVersionName, FallbackValue=''}" />

                                <StackPanel
                                    Grid.Row="2"
                                    Grid.Column="0"
                                    Orientation="Horizontal">

                                    <controls:StarsRating
                                        Margin="8,8,0,8"
                                        Background="#66000000"
                                        FontSize="16"
                                        Foreground="{DynamicResource ThemeEldenRingOrangeColor}"
                                        Value="{Binding CivitModel.Stats.Rating}" />
                                    <TextBlock
                                        Margin="4,0,0,0"
                                        VerticalAlignment="Center"
                                        Text="{Binding CivitModel.Stats.RatingCount}"
                                        TextAlignment="Center" />
                                </StackPanel>

                                <StackPanel
                                    Grid.Row="2"
                                    Grid.Column="1"
                                    HorizontalAlignment="Right"
                                    Orientation="Horizontal">
                                    <avalonia:Icon Value="fa-solid fa-heart" />
                                    <TextBlock
                                        Margin="4,0"
                                        VerticalAlignment="Center"
                                        Text="{Binding CivitModel.Stats.FavoriteCount, Converter={StaticResource KiloFormatterConverter}}" />

                                    <avalonia:Icon Margin="4,0" Value="fa-solid fa-download" />
                                    <TextBlock
                                        Margin="0,0,4,0"
                                        VerticalAlignment="Center"
                                        Text="{Binding CivitModel.Stats.DownloadCount, Converter={StaticResource KiloFormatterConverter}}" />
                                </StackPanel>
                                <Button
                                    Grid.Row="0"
                                    Grid.Column="1"
                                    Width="32"
                                    Margin="0,4,4,0"
                                    HorizontalAlignment="Right"
                                    VerticalAlignment="Top"
                                    HorizontalContentAlignment="Right"
                                    VerticalContentAlignment="Top"
                                    BorderThickness="0"
                                    Classes="transparent">
                                    <ui:SymbolIcon FontSize="18" Symbol="MoreVertical" />
                                    <Button.Flyout>
                                        <MenuFlyout>
                                            <MenuItem Command="{Binding OpenModelCommand}" Header="{x:Static lang:Resources.Action_OpenOnCivitAi}">
                                                <MenuItem.Icon>
                                                    <ui:SymbolIcon Symbol="Open" />
                                                </MenuItem.Icon>
                                            </MenuItem>
                                        </MenuFlyout>
                                    </Button.Flyout>
                                </Button>
                            </Grid>
                        </Border>
                    </Grid>
                </Button>
            </Border>

        </DataTemplate>
    </UserControl.Resources>

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

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

                <TextBox
                    Margin="8,0,0,0"
                    HorizontalAlignment="Stretch"
                    KeyDown="InputElement_OnKeyDown"
                    Text="{Binding SearchQuery, Mode=TwoWay}"
                    Watermark="{x:Static lang:Resources.Label_ModelSearchWatermark}">
                    <TextBox.InnerRightContent>
                        <Button
                            Classes="transparent-full"
                            Command="{Binding ClearSearchQuery}"
                            IsVisible="{Binding SearchQuery.Length}">
                            <ui:SymbolIcon Symbol="Cancel" />
                        </Button>
                    </TextBox.InnerRightContent>
                </TextBox>

                <Button
                    Grid.Column="1"
                    Width="80"
                    Margin="8,0,8,0"
                    VerticalAlignment="Stretch"
                    Classes="accent"
                    Command="{Binding SearchModelsCommand}"
                    IsDefault="True">
                    <Grid>
                        <controls:ProgressRing
                            MinWidth="16"
                            MinHeight="16"
                            VerticalAlignment="Center"
                            BorderThickness="4"
                            IsIndeterminate="True"
                            IsVisible="{Binding SearchModelsCommand.IsRunning}" />
                        <TextBlock
                            VerticalAlignment="Center"
                            IsVisible="{Binding !SearchModelsCommand.IsRunning}"
                            Text="{x:Static lang:Resources.Action_Search}" />
                    </Grid>
                </Button>
            </Grid>
            <DockPanel>
                <StackPanel Margin="8,8,4,8" Orientation="Vertical">
                    <Label Content="{x:Static lang:Resources.Label_Sort}" />
                    <ComboBox
                        MinWidth="100"
                        ItemsSource="{Binding AllSortModes}"
                        SelectedItem="{Binding SortMode}" />
                </StackPanel>

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

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

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


                <CheckBox
                    Margin="8,8,8,0"
                    HorizontalAlignment="Right"
                    Content="{x:Static lang:Resources.Label_ShowNsfwContent}"
                    IsChecked="{Binding ShowNsfw, Mode=TwoWay}" />
            </DockPanel>

        </StackPanel>

        <ScrollViewer
            Grid.Row="1"
            Margin="8,0,8,0"
            ScrollChanged="ScrollViewer_OnScrollChanged">
            <ItemsRepeater ItemTemplate="{StaticResource CivitModelTemplate}" ItemsSource="{Binding ModelCards}">
                <ItemsRepeater.Layout>
                    <UniformGridLayout Orientation="Horizontal" />
                </ItemsRepeater.Layout>
            </ItemsRepeater>
        </ScrollViewer>

        <TextBlock
            Grid.Row="2"
            Margin="16,8"
            VerticalAlignment="Bottom"
            Text="{x:Static lang:Resources.Label_DataProvidedByCivitAi}" />

        <StackPanel
            Grid.Row="2"
            Margin="8"
            HorizontalAlignment="Center"
            IsVisible="{Binding HasSearched}"
            Orientation="Vertical">
            <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
                    Margin="0,0,8,0"
                    Command="{Binding FirstPage}"
                    IsEnabled="{Binding CanGoToFirstPage}"
                    ToolTip.Tip="{x:Static lang:Resources.Label_FirstPage}">
                    <avalonia:Icon Value="fa-solid fa-backward-fast" />
                </Button>
                <Button
                    Margin="0,0,8,0"
                    Command="{Binding PreviousPage}"
                    IsEnabled="{Binding CanGoToPreviousPage}"
                    ToolTip.Tip="{x:Static lang:Resources.Label_PreviousPage}">
                    <avalonia:Icon Value="fa-solid fa-caret-left" />
                </Button>
                <Button
                    Margin="0,0,8,0"
                    Command="{Binding NextPage}"
                    IsEnabled="{Binding CanGoToNextPage}"
                    ToolTip.Tip="{x:Static lang:Resources.Label_NextPage}">
                    <avalonia:Icon Value="fa-solid fa-caret-right" />
                </Button>
                <Button
                    Command="{Binding LastPage}"
                    IsEnabled="{Binding CanGoToLastPage}"
                    ToolTip.Tip="{x:Static lang:Resources.Label_LastPage}">
                    <avalonia:Icon Value="fa-solid fa-forward-fast" />
                </Button>
            </StackPanel>
        </StackPanel>

        <TextBlock
            Grid.Row="0"
            Grid.RowSpan="3"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            FontSize="20"
            IsVisible="{Binding NoResultsFound}"
            Text="{Binding NoResultsText, FallbackValue=No results found}" />

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