<?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"
             xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
             x:Class="ex_CustomToolbar.MainPage">

    <ContentPage.Behaviors>
        <toolkit:StatusBarBehavior
            StatusBarColor="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource PrimaryDark}}"
            StatusBarStyle="{AppThemeBinding Light=LightContent, Dark=DarkContent}"  />
    </ContentPage.Behaviors>

    <Shell.TitleView>
        <Grid ColumnDefinitions="Auto, *, Auto, Auto, Auto" HorizontalOptions="Fill">
            <Image Source="vinyl.png" HeightRequest="36"/>
            <Label Grid.Column="1" Margin="10, 0, 0, 0"
                Text="My Music App"
                TextColor="{AppThemeBinding Light={StaticResource White}, Dark={StaticResource PrimaryDarkText}}" 
                VerticalTextAlignment="Center"
                VerticalOptions="Center"
                HeightRequest="36"
                FontSize="Medium"/>
            <ImageButton Source="hare.png" Grid.Column="2" MaximumHeightRequest="24" MinimumHeightRequest="24"
                         BackgroundColor="Transparent">
                <ImageButton.Behaviors>
                    <toolkit:IconTintColorBehavior TintColor="{AppThemeBinding Light={StaticResource White}, Dark={StaticResource PrimaryDarkText}}"  />
                </ImageButton.Behaviors>
            </ImageButton>
            <ImageButton Source="info_circle.png" Grid.Column="3" MaximumHeightRequest="24"  MinimumHeightRequest="24"
                         BackgroundColor="Transparent">
                <ImageButton.Behaviors>
                    <toolkit:IconTintColorBehavior TintColor="{AppThemeBinding Light={StaticResource White}, Dark={StaticResource PrimaryDarkText}}"  />
                </ImageButton.Behaviors>
            </ImageButton>
            <ImageButton Source="ellipsis_vert.png" Grid.Column="4" MaximumHeightRequest="24"  MinimumHeightRequest="24" Clicked="EllipsisClicked"
                         BackgroundColor="Transparent">
                <ImageButton.Behaviors>
                    <toolkit:IconTintColorBehavior TintColor="{AppThemeBinding Light={StaticResource White}, Dark={StaticResource PrimaryDarkText}}"  />
                </ImageButton.Behaviors>
            </ImageButton>
        </Grid>
    </Shell.TitleView>

    <AbsoluteLayout>
        <ScrollView AbsoluteLayout.LayoutFlags="All"
                    AbsoluteLayout.LayoutBounds="0, 0, 1, 1">
            <VerticalStackLayout 
                Padding="30,0"
                Spacing="25">
                <Image
                    Source="dotnet_bot.png"
                    HeightRequest="185"
                    Aspect="AspectFit"
                    SemanticProperties.Description="dot net bot in a race car number eight" />

                <Label
                    Text="Hello, World!"
                    Style="{StaticResource Headline}"
                    SemanticProperties.HeadingLevel="Level1" />

                <Label
                    Text="Welcome to &#10;.NET Multi-platform App UI"
                    Style="{StaticResource SubHeadline}"
                    SemanticProperties.HeadingLevel="Level2"
                    SemanticProperties.Description="Welcome to dot net Multi platform App U I" />

                <Button
                    x:Name="CounterBtn"
                    Text="Click me" 
                    SemanticProperties.Hint="Counts the number of times you click"
                    Clicked="OnCounterClicked"
                    HorizontalOptions="Fill" />
            </VerticalStackLayout>
        </ScrollView>
        <AbsoluteLayout AbsoluteLayout.LayoutFlags="All"
                        AbsoluteLayout.LayoutBounds="0, 0, 1, 1"
                        x:Name="secondaryMenu"
                        IsVisible="false">
            <AbsoluteLayout.GestureRecognizers>
                <TapGestureRecognizer Tapped="BackgroundClicked"/>
            </AbsoluteLayout.GestureRecognizers>
            <Frame AbsoluteLayout.LayoutFlags="PositionProportional"
                    AbsoluteLayout.LayoutBounds="1, 0, 120, 72"
                    BackgroundColor="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource PrimaryDark}}"
                    Padding="4">
                <VerticalStackLayout>
                    <HorizontalStackLayout MaximumHeightRequest="{OnPlatform 24, WinUI=40}" Margin="{OnPlatform '0,6', WinUI='0,4'}">
                        <ImageButton Source="captions_bubble.png"
                                     MinimumHeightRequest="{OnPlatform 16, WinUI=24}" 
                                     MinimumWidthRequest="{OnPlatform 16, WinUI=24}" 
                                     HeightRequest="{OnPlatform 16, WinUI=24}" 
                                     Margin="{OnPlatform '12,0', WinUI='0,0,4,0', Android='0'}"
                                     BackgroundColor="Transparent" VerticalOptions="Center">
                            <ImageButton.Behaviors>
                                <toolkit:IconTintColorBehavior TintColor="{AppThemeBinding Light={StaticResource White}, Dark={StaticResource PrimaryDarkText}}"  />
                            </ImageButton.Behaviors>
                        </ImageButton>
                        <Label Text="Menu 1" VerticalOptions="Center" TextColor="{AppThemeBinding Light={StaticResource White}, Dark={StaticResource PrimaryDarkText}}"
                               FontSize="{OnPlatform Small, WinUI=Micro}"/>
                    </HorizontalStackLayout>

                    <HorizontalStackLayout MaximumHeightRequest="{OnPlatform 24, WinUI=40}" Margin="{OnPlatform '0,6', WinUI='0,4'}" >
                        <ImageButton Source="quote_bubble.png"
                                     MinimumHeightRequest="{OnPlatform 16, WinUI=24}" 
                                     MinimumWidthRequest="{OnPlatform 16, WinUI=24}" 
                                     HeightRequest="{OnPlatform 16, WinUI=24}" 
                                     Margin="{OnPlatform '12,0', WinUI='0,0,4,0', Android='0'}"
                                     BackgroundColor="Transparent" VerticalOptions="Center">
                            <ImageButton.Behaviors>
                                <toolkit:IconTintColorBehavior TintColor="{AppThemeBinding Light={StaticResource White}, Dark={StaticResource PrimaryDarkText}}"  />
                            </ImageButton.Behaviors>
                        </ImageButton>
                        <Label Text="Menu 2" VerticalOptions="Center"
                               FontSize="{OnPlatform Small, WinUI=Micro}"
                               TextColor="{AppThemeBinding Light={StaticResource White}, Dark={StaticResource PrimaryDarkText}}" />
                    </HorizontalStackLayout>
                </VerticalStackLayout>
            </Frame>
        </AbsoluteLayout>
    </AbsoluteLayout>
</ContentPage>
