@page "/demo"
@using LucideBlazor
@using MoonlightServers.Frontend.UI.Components
@using ShadcnBlazor.Buttons
@using ShadcnBlazor.Cards
@using ShadcnBlazor.Extras.Dialogs

@inject DialogService DialogService

<div class="grid grid-cols-1 lg:grid-cols-2 gap-5">
    <Card ClassName="col-span-1">
        <CardHeader>
            <CardTitle>Demo</CardTitle>
            <CardDescription>A cool demo page</CardDescription>
        </CardHeader>
        <CardContent>
            You successfully used the plugin template to create your moonlight plugin :)
        </CardContent>
        <CardFooter>
            <Button>
                <Slot>
                    <a @attributes="context" href="https://moonlightpa.nl/dev">
                        <ExternalLinkIcon/>
                        Visit documentation
                    </a>
                </Slot>
            </Button>
        </CardFooter>
    </Card>
    <Card>
        <CardContent>
            <Button @onclick="LaunchFormAsync" Variant="ButtonVariant.Outline">
                Open Form
            </Button>
        </CardContent>
    </Card>
</div>

@code
{
    private async Task LaunchFormAsync()
        => await DialogService.LaunchAsync<FormDialog>();
}