<?xml version="1.0" encoding="utf-8" ?>
<l:AppContentPage
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:l="clr-namespace:Blahblah.FlowerApp"
    xmlns:ctl="clr-namespace:Blahblah.FlowerApp.Controls"
    x:Class="Blahblah.FlowerApp.HomePage"
    x:Name="homePage"
    x:DataType="l:HomePage"
    Title="{l:Lang myGarden, Default=My Garden}">

    <!--<Shell.SearchHandler>
        <l:ItemSearchHandler TextColor="{AppThemeBinding Light={OnPlatform Android={StaticResource Primary}, iOS={StaticResource White}}, Dark={StaticResource White}}"
                             PlaceholderColor="{AppThemeBinding Light={StaticResource Gray200}, Dark={StaticResource Gray500}}"
                             Placeholder="{l:Lang flowerSearchPlaceholder, Default=Enter flower name to search...}"
                             Flowers="{Binding Flowers, Source={x:Reference homePage}}" DisplayMemberName="Name"
                             FontFamily="OpenSansRegular" FontSize="14"
                             SearchBoxVisibility="Collapsible" ShowsResults="True"/>
    </Shell.SearchHandler>-->
    <ContentPage.ToolbarItems>
        <ToolbarItem Text="{l:Lang add, Default=Add}" Clicked="AddFlower_Clicked"/>
    </ContentPage.ToolbarItems>

    <ContentPage.Resources>
        <Style x:Key="secondaryLabel" TargetType="Label">
            <Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource Gray300}, Dark={StaticResource Gray600}}"/>
            <Setter Property="FontSize" Value="12"/>
            <Setter Property="VerticalOptions" Value="Center"/>
        </Style>
        <DataTemplate x:Key="flowerTemplate" x:DataType="ctl:FlowerClientItem">
            <Frame Padding="0" CornerRadius="12" BorderColor="Transparent"
                   AbsoluteLayout.LayoutFlags="XProportional"
                   AbsoluteLayout.LayoutBounds="{Binding Bounds}">
                <Grid RowDefinitions="*,30,16" RowSpacing="0" ColumnSpacing="4">
                    <Image Source="{Binding Cover}"/>
                    <!--<Frame Grid.Row="1" Margin="0" Padding="0"
                           WidthRequest="30" HeightRequest="30" CornerRadius="15"
                           BorderColor="Transparent" BackgroundColor="LightGray"
                           VerticalOptions="Center"></Frame>-->
                    <Label Grid.Row="1" Text="{Binding Name}" VerticalOptions="Center" Margin="0,4,0,0"/>
                    <Grid Grid.Row="2" ColumnSpacing="4" ColumnDefinitions="*,Auto,Auto">
                        <Label Text="{Binding Days}" Style="{StaticResource secondaryLabel}"/>
                        <Label Grid.Column="1" FontFamily="FontAwesomeSolid" Text="{x:Static l:Res.Heart}" Style="{StaticResource secondaryLabel}"/>
                        <Label Grid.Column="2" Text="0" Style="{StaticResource secondaryLabel}"/>
                    </Grid>
                </Grid>
            </Frame>
        </DataTemplate>
    </ContentPage.Resources>

    <Grid RowDefinitions="Auto,Auto,*" BindingContext="{x:Reference homePage}">
        <SearchBar Text="{Binding SearchKey}" Placeholder="{l:Lang flowerSearchPlaceholder, Default=Enter flower name to search...}"/>
        <Grid Grid.Row="1" ColumnDefinitions="*,Auto">
            <Label VerticalOptions="Center" Text="{Binding CurrentCount}" Margin="12,0"
                   TextColor="{AppThemeBinding Light={StaticResource Gray400}, Dark={StaticResource Gray600}}"/>
            <Button Grid.Column="1" BackgroundColor="Transparent" TextColor="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource White}}"
                    FontFamily="FontAwesomeSolid" Text="{x:Static l:Res.Filter}" FontSize="18"/>
        </Grid>
        <RefreshView Grid.Row="2" Refreshing="RefreshView_Refreshing" IsRefreshing="{Binding IsRefreshing}">
            <ScrollView>
                <AbsoluteLayout Margin="12,0,12,12"
                                BindableLayout.ItemsSource="{Binding Flowers}"
                                BindableLayout.ItemTemplate="{StaticResource flowerTemplate}">
                    <BindableLayout.EmptyView>
                        <Grid AbsoluteLayout.LayoutFlags="SizeProportional" AbsoluteLayout.LayoutBounds="0,20,1,1"
                              RowDefinitions="Auto,Auto,*">
                            <Image Source="empty_flower.jpg" MaximumWidthRequest="200" MaximumHeightRequest="133"/>
                            <Label Grid.Row="1" Text="{l:Lang noFlower, Default=Click Add in the upper right corner to usher in the first plant in the garden.}"
                                   HorizontalTextAlignment="Center" Margin="0,10"/>
                        </Grid>
                    </BindableLayout.EmptyView>
                </AbsoluteLayout>
            </ScrollView>
        </RefreshView>
    </Grid>

</l:AppContentPage>
