<?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="FlyoutTabSearch.Pages.MoonPhasePage"
             BackgroundColor="Black"
             Title="Moon Phase">

    <ContentPage.Resources>
        <ResourceDictionary>
            <Color x:Key="textColor">White</Color>
            <Color x:Key="boxColor">#44FFFFFF</Color>
            <Style TargetType="Label">
                <Setter Property="TextColor" Value="{StaticResource textColor}"/>
                <Setter Property="HorizontalOptions" Value="Center"/>
            </Style>
        </ResourceDictionary>
    </ContentPage.Resources>
    
    <Grid RowSpacing="10" ColumnSpacing="5" Padding="5"
          RowDefinitions="Auto,Auto,Auto,*"
          ColumnDefinitions="*,*,*,*">

        <Image Source="starfield.png" Aspect="AspectFill" Grid.Row="0" Grid.Column="0" Grid.RowSpan="4" Grid.ColumnSpan="4"/>

        <StackLayout Grid.Row="0" Grid.ColumnSpan="4">
            <Label x:Name="lblDate" FontAttributes="Bold"/>
            <Label x:Name="lblMoonPhaseIcon" FontSize="96"/>
            <Label x:Name="lblMoonPhaseText" FontAttributes="Bold"/>
        </StackLayout>

        <Label x:Name="lblPhaseIcon1" Grid.Column="0" Grid.Row="1" FontSize="48" />
        <Label x:Name="lblPhaseIcon2" Grid.Column="1" Grid.Row="1" FontSize="48" />
        <Label x:Name="lblPhaseIcon3" Grid.Column="2" Grid.Row="1" FontSize="48" />
        <Label x:Name="lblPhaseIcon4" Grid.Column="3" Grid.Row="1" FontSize="48" />

        <Label x:Name="lblPhaseText1" Grid.Column="0" Grid.Row="2" FontAttributes="Bold" FontSize="Small" />
        <Label x:Name="lblPhaseText2" Grid.Column="1" Grid.Row="2" FontAttributes="Bold" FontSize="Small" />
        <Label x:Name="lblPhaseText3" Grid.Column="2" Grid.Row="2" FontAttributes="Bold" FontSize="Small" />
        <Label x:Name="lblPhaseText4" Grid.Column="3" Grid.Row="2" FontAttributes="Bold" FontSize="Small" />
    </Grid>
</ContentPage>