<?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.HomePage"
             xmlns:views="clr-namespace:ShoopNCook.Views"
             Title="HomePage"
             BackgroundColor="{StaticResource BackgroundPrimary}">
    
    <ScrollView>
        <Grid RowDefinitions="Auto,Auto,Auto,*">
            <FlexLayout
                Grid.Row="0"
                JustifyContent="SpaceBetween"
                AlignItems="Center"
                AlignContent="Center"
                Margin="20,35,20,20">

                <Border 
                    Style="{StaticResource SecondaryBorder}"
                    BackgroundColor="{StaticResource BackgroundSecondary}" 
                    StrokeShape="RoundRectangle 1500">
                    <ImageButton 
                        x:Name="ProfilePictureImage" 
                        WidthRequest="65" 
                        HeightRequest="65"/>
                </Border>

                <Label Style="{StaticResource h1}" x:Name="ProfilePictureName"/>
            </FlexLayout>
            <Grid 
                ColumnDefinitions="*,Auto"
                Grid.Row="1"
                Margin="20">

                <Border
                    Margin="0,10,10,7"
                    Style="{StaticResource SecondaryBorder}">
                    <Entry
                        Style="{StaticResource UserInput}"
                        Grid.Column="0"
                        Placeholder="Search here..."/>
                </Border>

                <ImageButton 
                    Grid.Column="1" 
                    Source="syncalt.svg" 
                    Padding="5" 
                    BackgroundColor="{StaticResource ActionButton}" 
                    WidthRequest="65" 
                    HeightRequest="65" 
                    CornerRadius="15"
                    Margin="0,5,5,0"
                    Clicked="OnSyncButtonClicked">
                </ImageButton>
            </Grid>

            <VerticalStackLayout
                Grid.Row="2">
                <FlexLayout
                    JustifyContent="SpaceBetween"
                    AlignItems="Center"
                    Margin="20"
                    HeightRequest="30">
                    <Label 
                        Text="Popular recipes" 
                        Style="{StaticResource h2}"/>

                    <Label 
                        Text="Show All"
                        TextColor="{StaticResource TextColorSecondary}"/>

                </FlexLayout>

                <ScrollView
                    Orientation="Horizontal">
                    <HorizontalStackLayout 
                        Spacing="10"
                        Padding="0,0,0,40"
                        x:Name="PopularsList">
                        
                    </HorizontalStackLayout>
                </ScrollView>

            </VerticalStackLayout>
            
            <VerticalStackLayout
                Grid.Row="3">
                <FlexLayout
                    JustifyContent="SpaceBetween"
                    AlignItems="Center"
                    Margin="20,0,20,20"
                    HeightRequest="30"
                    >
                    <Label 
                        Text="Recommended for you" 
                        Style="{StaticResource h2}"/>

                    <Label 
                        Text="Show All"
                        TextColor="{StaticResource TextColorSecondary}"/>

                </FlexLayout>
                <ScrollView>
                    <FlexLayout
                        JustifyContent="Center"
                        AlignItems="Start"
                        AlignContent="Start"
                        Direction="Row"
                        Wrap="Wrap"
                        x:Name="RecommendedList">
                    
                    </FlexLayout>
                </ScrollView>
            </VerticalStackLayout>

        </Grid>
    </ScrollView>
</ContentPage>