@page "/"

@rendermode RenderMode.InteractiveServer

<PageTitle>Home</PageTitle>

<FluentCard Width="auto"  Height="auto">
    <h2>Hello Fluent UI!</h2>
    <FluentIcon Value="@(new Icons.Regular.Size24.EmojiSmileSlight())" />
    <FluentIcon Value="@(Icon.FromImageUrl("/favicon.ico"))" />
    <FluentIcon Value="@(new Icons.Regular.Size24.EmojiSmileSlight())" />

    

    <h2 class="mt-5">Change Theme</h2>
    <FluentGrid>
        <FluentGridItem>
            <FluentSelect Label="Theme"
                          Width="250px"
                          Items="@(Enum.GetValues<DesignThemeModes>())"
                          @bind-SelectedOption="@Mode" />
        </FluentGridItem>

        <FluentGridItem>
            <FluentSelect Label="Color"
                          Items="@(Enum.GetValues<OfficeColor>().Select(i => (OfficeColor?)i))"
                          Height="200px"
                          Width="250px"
                          @bind-SelectedOption="@OfficeColor">
            </FluentSelect>
        </FluentGridItem>
    </FluentGrid>

    <FluentStack Style="margin: 30px 0px; padding: 30px; border: 1px solid var(--accent-fill-rest);">
        <FluentIcon Value="@(new Icons.Regular.Size24.Airplane())" />
        <FluentLabel>Example of content</FluentLabel>
        <FluentButton Appearance="Appearance.Outline">Outline</FluentButton>
        <FluentButton Appearance="Appearance.Accent">Accent</FluentButton>
    </FluentStack>
</FluentCard>

<FluentDesignTheme @bind-Mode="@Mode"
                   @bind-OfficeColor="@OfficeColor"
                   OnLoaded="@OnLoaded"
                   OnLuminanceChanged="@OnLuminanceChanged"
                   StorageName="theme" />

@code
{
    public DesignThemeModes Mode { get; set; }
    public OfficeColor? OfficeColor { get; set; }

    void OnLoaded(LoadedEventArgs e)
    {
        // DemoLogger.WriteLine($"Loaded: {(e.Mode == DesignThemeModes.System ? "System" : "")} {(e.IsDark ? "Dark" : "Light")}");
    }

    void OnLuminanceChanged(LuminanceChangedEventArgs e)
    {
        // DemoLogger.WriteLine($"Changed: {(e.Mode == DesignThemeModes.System ? "System" : "")} {(e.IsDark ? "Dark" : "Light")}");
    }
}