<?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..."/>
            </Border>
            
            <Border
                Style="{StaticResource SecondaryBorderShadow}"
                Grid.Column="1"
                BackgroundColor="{StaticResource ActionButton}"
                Stroke="{StaticResource ActionButton}">
                <ImageButton
                    Source="search_options.svg"
                    HeightRequest="40"
                    WidthRequest="40"/>
            </Border>
        </Grid>



        <!-- Selection result count -->
        <Label
            Grid.Row="2"
            Text="%Nb_Recipes% Recipes Found"
            TextColor="{StaticResource TextColorSecondary}"
            FontSize="20"/>

        <!-- Sort selection -->
        <Grid
            Grid.Row="3"
            ColumnSpacing="10"
            ColumnDefinitions="*, *">
            
            <Button 
                Grid.Column="0"
                Text="Most Relevent"
                Style="{StaticResource UserButton}"
                TextColor="{StaticResource White}"
                BackgroundColor="{StaticResource Selected}">
            </Button>

            <Button
                Grid.Column="1"
                Text="Most Recent"
                Style="{StaticResource UserButton}"
                TextColor="{StaticResource TextColorSecondary}"
                BackgroundColor="{StaticResource BackgroundSecondary}">
            </Button>

        </Grid>

        <!-- Search result items -->
        <ScrollView
            Grid.Row="4">
            <FlexLayout
                JustifyContent="Center"
                AlignItems="Start"
                AlignContent="Start"
                Direction="Row"
                Wrap="Wrap"
                x:Name="ResultSearchView">
                
            </FlexLayout>
        </ScrollView>

    </Grid>
</ContentPage>