<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:dx="http://schemas.devexpress.com/maui"
             xmlns:models="clr-namespace:CrmDemo.DataModel.Models;assembly=CrmDemo.DataModel"
             xmlns:viewsP="clr-namespace:CrmDemo.Views.Products"
             x:Class="CrmDemo.Views.Products.ProductsPage"
             Title="Products">
    <Grid IgnoreSafeArea="{dx:OnOrientation Landscape=False, Portrait=True}">
        <dx:DXCollectionView x:Name="collectionView"
                ItemsSource="{Binding Items}"
                BackgroundColor="{dx:ThemeColor Key=Surface}"
                TapCommand="{Binding Source={RelativeSource Mode=Self}, Path=Commands.ShowDetailForm}"
                DetailFormTemplate="{DataTemplate viewsP:ProductDetailPage}"
                CreateDetailFormViewModel="DXCollectionView_CreateDetailFormViewModel"
                IsPullToRefreshEnabled="True"
                IsRefreshing="{Binding IsDataLoading}"
                PullToRefresh="OnCollectionViewPullToRefresh">
            <dx:DXCollectionView.ItemTemplate>
                <DataTemplate x:DataType="{x:Type models:Product}">
                    <dx:DXBorder CornerRadius="12" Margin="16,8" Padding="16" BackgroundColor="{dx:ThemeColor SurfaceContainer}">
                        <Grid ColumnDefinitions="*,Auto" ColumnSpacing="16">
                            <dx:DXStackLayout ItemSpacing="8">
                                <Label Text="{Binding Name}" TextColor="{dx:ThemeColor OnSurface}" FontSize="18" FontAttributes="Bold" />
                                <Label Text="{Binding ItemsLeft, StringFormat='{0} Items Left'}" FontSize="16" TextColor="{dx:ThemeColor OnSurface}" VerticalOptions="End"/>
                            </dx:DXStackLayout>
                            <Label Text="{Binding UnitPrice,  StringFormat='{0:c}'}" FontSize="14" TextColor="{dx:ThemeColor OnSurfaceVariant}" Grid.Column="1" VerticalOptions="Center"/>
                        </Grid>
                    </dx:DXBorder>
                </DataTemplate>
            </dx:DXCollectionView.ItemTemplate>
        </dx:DXCollectionView>
    </Grid>
</ContentPage>
