<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ShoopNCook.Pages.SearchPage"
             xmlns:views="clr-namespace:ShoopNCook.Views"
             Title="SearchPage"
             BackgroundColor="{StaticResource BackgroundPrimary}">
    <Grid
        Margin="20, 20, 20, 0"
        RowDefinitions="Auto, Auto, Auto, Auto, *"
        RowSpacing="10">

        <!-- Search label and return button -->
        <Grid
            Grid.Row="0"
            Padding="10, 20, 0, 30"
            ColumnDefinitions="*"
            MaximumHeightRequest="60">

            <ImageButton 
                Grid.Column="0" 
                HeightRequest="50"
                WidthRequest="50"
                Source="arrow_back.svg"
                HorizontalOptions="Start"
                Clicked="OnBackButtonClicked"/>

            <Label 
                Grid.Column="0"
                FontSize="24"
                TextColor="{StaticResource TextColorPrimary}"
                Text="Search"
                MaximumHeightRequest="60"
                
                FontFamily="PoppinsBold"
                HorizontalOptions="Center"
                VerticalOptions="Center"/>
        </Grid>


        <!-- Search input and filter button -->
        
        <Grid 
            Grid.Row="1"
            ColumnSpacing="10"
            ColumnDefinitions="5*, *">
            <Border
                Grid.Column="0"
                Style="{StaticResource SecondaryBorderShadow}">
                <Entry
                    Style="{StaticResource UserInput}"
                    Placeholder="Cake, Lasagna, Vegetarian..."
                    x:Name="SearchPrompt"/>
            </Border>
            <Border
                Style="{StaticResource SecondaryBorderShadow}"
                Grid.Column="1"
                BackgroundColor="{StaticResource ActionButton}"
                Stroke="{StaticResource ActionButton}">
                <Label
                    BackgroundColor="Transparent"
                    Text="GO"
                    FontFamily="PoppinsMedium"
                    TextColor="White"
                    VerticalTextAlignment="Center"
                    HorizontalTextAlignment="Center"
                    HeightRequest="40"
                    WidthRequest="40">
                    <Label.GestureRecognizers>
                        <TapGestureRecognizer
                            Tapped="OnSearchClicked"/>
                    </Label.GestureRecognizers>
                </Label>
            </Border>
        </Grid>



        <!-- Selection result count -->
        <Label
            Grid.Row="2"
            Text="{Binding FoundRecipes.Count, StringFormat='{0} Recipes found'}"
            TextColor="{StaticResource TextColorSecondary}"
            FontSize="20"/>

        <!-- Search result items -->
        <ScrollView
            Grid.Row="4">
            <FlexLayout
                JustifyContent="Center"
                AlignItems="Start"
                AlignContent="Start"
                Direction="Row"
                Wrap="Wrap"
                BindableLayout.ItemsSource="{Binding FoundRecipes}">
                <BindableLayout.ItemTemplate>
                    <DataTemplate>
                        <ContentView Content="{Binding}" />
                    </DataTemplate>
                </BindableLayout.ItemTemplate>
                <BindableLayout.EmptyViewTemplate>
                    <DataTemplate>
                        <Label 
                            Style="{StaticResource h1}"
                            Text="No recipes found"/>
                    </DataTemplate>
                </BindableLayout.EmptyViewTemplate>
                
            </FlexLayout>

        </ScrollView>

    </Grid>
</ContentPage>