@page "/docs/templates"
@namespace Lumeo.Docs.Pages.Docs

<PageTitle>dotnet new Templates — Lumeo</PageTitle>

<Container MaxWidth="3xl" Padding="0" Center="false">
<Stack Gap="10">

    <!-- Intro -->
    <Stack>
        <Stack Gap="4">
            <Heading Level="1" Size="3xl">dotnet new Templates</Heading>
            <Lumeo.Text Size="base" Color="muted" Leading="relaxed">
                Lumeo ships a NuGet package of <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">dotnet new</code> item
                templates so you can scaffold pages, forms, and components that follow the conventions described in these docs
                without copy-pasting boilerplate. The package is called <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">Lumeo.Templates</code>.
            </Lumeo.Text>
        </Stack>
    </Stack>

    <Separator Class="my-4" />

    <!-- Install -->
    <Stack>
        <Stack Gap="4">
            <Heading Level="2">Install</Heading>
            <Lumeo.Text Size="base" Color="muted" Leading="relaxed">
                Install the templates globally on your machine:
            </Lumeo.Text>
            <Stack Class="code-block rounded-lg border border-border/40 bg-muted px-4 py-3 font-mono text-sm text-foreground">
                dotnet new install Lumeo.Templates
            </Stack>
            <Lumeo.Text Size="sm" Color="muted">
                After install, <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">dotnet new list lumeo</code> will list the three item templates below.
                To remove them, run <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">dotnet new uninstall Lumeo.Templates</code>.
            </Lumeo.Text>
        </Stack>
    </Stack>

    <Separator Class="my-4" />

    <!-- lumeo-page -->
    <Stack>
        <Stack Gap="4">
            <Heading Level="2">lumeo-page</Heading>
            <Lumeo.Text Size="base" Color="muted" Leading="relaxed">
                Scaffolds a new <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">.razor</code> page with an
                <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">@@page</code> directive, a
                <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">Stack</code> layout,
                a heading, and a starter <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">Card</code> with a
                <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">Button</code>.
            </Lumeo.Text>

            <Heading Level="3" Size="base">Command</Heading>
            <Stack Class="code-block rounded-lg border border-border/40 bg-muted px-4 py-3 font-mono text-sm text-foreground">
                dotnet new lumeo-page --name Dashboard --route dashboard
            </Stack>

            <Heading Level="3" Size="base">Produces <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">Dashboard.razor</code></Heading>
            <Stack Class="code-block rounded-lg border border-border/40 bg-muted px-4 py-3 font-mono text-sm text-foreground whitespace-pre">@@page "/dashboard"

&lt;PageTitle&gt;Dashboard&lt;/PageTitle&gt;

&lt;Stack Gap="6"&gt;
    &lt;Stack Gap="2"&gt;
        &lt;Heading Level="1" Size="3xl"&gt;Dashboard&lt;/Heading&gt;
        &lt;Lumeo.Text Size="base" Color="muted"&gt;
            Replace this with your page description.
        &lt;/Lumeo.Text&gt;
    &lt;/Stack&gt;

    &lt;Card&gt;
        &lt;CardHeader&gt;&lt;Heading Level="3"&gt;Get started&lt;/Heading&gt;&lt;/CardHeader&gt;
        &lt;CardContent&gt;
            &lt;Button Variant="Button.ButtonVariant.Default" OnClick="HandleClick"&gt;Click me&lt;/Button&gt;
        &lt;/CardContent&gt;
    &lt;/Card&gt;
&lt;/Stack&gt;</Stack>

            <Heading Level="3" Size="base">Parameters</Heading>
            <Table>
                <TableHeader>
                    <TableRow>
                        <TableHead>Name</TableHead>
                        <TableHead>Description</TableHead>
                        <TableHead>Default</TableHead>
                    </TableRow>
                </TableHeader>
                <TableBody>
                    <TableRow>
                        <TableCell><code>--name</code></TableCell>
                        <TableCell>Page class name (PascalCase).</TableCell>
                        <TableCell><code>NewPage</code></TableCell>
                    </TableRow>
                    <TableRow>
                        <TableCell><code>--route</code></TableCell>
                        <TableCell>URL route, without leading slash.</TableCell>
                        <TableCell><code>new-page</code></TableCell>
                    </TableRow>
                </TableBody>
            </Table>
        </Stack>
    </Stack>

    <Separator Class="my-4" />

    <!-- lumeo-form -->
    <Stack>
        <Stack Gap="4">
            <Heading Level="2">lumeo-form</Heading>
            <Lumeo.Text Size="base" Color="muted" Leading="relaxed">
                Scaffolds a POCO model annotated with <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">[LumeoForm]</code>
                plus a page that renders the generated form. See
                <Lumeo.Link Href="docs/lumeo-form" Class="text-foreground underline underline-offset-4 hover:text-muted-foreground transition-colors">[LumeoForm] Generator</Lumeo.Link>
                for the underlying source generator.
            </Lumeo.Text>

            <Heading Level="3" Size="base">Command</Heading>
            <Stack Class="code-block rounded-lg border border-border/40 bg-muted px-4 py-3 font-mono text-sm text-foreground">
                dotnet new lumeo-form --ModelName Feedback --PageName FeedbackPage --route feedback
            </Stack>

            <Heading Level="3" Size="base">Produces <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">FeedbackModel.cs</code></Heading>
            <Stack Class="code-block rounded-lg border border-border/40 bg-muted px-4 py-3 font-mono text-sm text-foreground whitespace-pre">using System.ComponentModel.DataAnnotations;
using Lumeo;

[LumeoForm(Title = "Feedback", SubmitLabel = "Submit")]
public partial class FeedbackModel
{
    [Required, Display(Name = "Name")]
    public string Name { get; set; } = string.Empty;

    [Required, EmailAddress, Display(Name = "Email")]
    public string Email { get; set; } = string.Empty;

    [Display(Name = "Message")]
    public string? Message { get; set; }
}</Stack>

            <Heading Level="3" Size="base">Parameters</Heading>
            <Table>
                <TableHeader>
                    <TableRow>
                        <TableHead>Name</TableHead>
                        <TableHead>Description</TableHead>
                        <TableHead>Default</TableHead>
                    </TableRow>
                </TableHeader>
                <TableBody>
                    <TableRow>
                        <TableCell><code>--ModelName</code></TableCell>
                        <TableCell>Model class name (PascalCase).</TableCell>
                        <TableCell><code>ContactForm</code></TableCell>
                    </TableRow>
                    <TableRow>
                        <TableCell><code>--PageName</code></TableCell>
                        <TableCell>Page class name (PascalCase).</TableCell>
                        <TableCell><code>ContactFormPage</code></TableCell>
                    </TableRow>
                    <TableRow>
                        <TableCell><code>--route</code></TableCell>
                        <TableCell>Page route, without leading slash.</TableCell>
                        <TableCell><code>contact</code></TableCell>
                    </TableRow>
                </TableBody>
            </Table>
        </Stack>
    </Stack>

    <Separator Class="my-4" />

    <!-- lumeo-component -->
    <Stack>
        <Stack Gap="4">
            <Heading Level="2">lumeo-component</Heading>
            <Lumeo.Text Size="base" Color="muted" Leading="relaxed">
                Scaffolds a reusable <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">.razor</code> component
                following Lumeo conventions — an explicit <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">@@namespace</code>,
                <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">Class</code>,
                <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">AdditionalAttributes</code>,
                <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">ChildContent</code>,
                and theme-aware CSS variables for background and border.
            </Lumeo.Text>

            <Heading Level="3" Size="base">Command</Heading>
            <Stack Class="code-block rounded-lg border border-border/40 bg-muted px-4 py-3 font-mono text-sm text-foreground">
                dotnet new lumeo-component --ComponentName Hero --namespace MyApp.Components
            </Stack>

            <Heading Level="3" Size="base">Produces <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">Hero.razor</code></Heading>
            <Stack Class="code-block rounded-lg border border-border/40 bg-muted px-4 py-3 font-mono text-sm text-foreground whitespace-pre">@@namespace MyApp.Components

&lt;div class="@@CssClass" @@attributes="AdditionalAttributes"&gt;
    @@ChildContent
&lt;/div&gt;

@@code {
    [Parameter] public RenderFragment? ChildContent { get; set; }
    [Parameter] public string? Class { get; set; }
    [Parameter(CaptureUnmatchedValues = true)]
    public Dictionary&lt;string, object&gt;? AdditionalAttributes { get; set; }

    private string CssClass =&gt; $"rounded-lg border border-border/40 bg-card p-4 {Class}".Trim();
}</Stack>

            <Heading Level="3" Size="base">Parameters</Heading>
            <Table>
                <TableHeader>
                    <TableRow>
                        <TableHead>Name</TableHead>
                        <TableHead>Description</TableHead>
                        <TableHead>Default</TableHead>
                    </TableRow>
                </TableHeader>
                <TableBody>
                    <TableRow>
                        <TableCell><code>--ComponentName</code></TableCell>
                        <TableCell>Component name (PascalCase).</TableCell>
                        <TableCell><code>MyComponent</code></TableCell>
                    </TableRow>
                    <TableRow>
                        <TableCell><code>--namespace</code></TableCell>
                        <TableCell>Target namespace.</TableCell>
                        <TableCell><code>MyApp.Components</code></TableCell>
                    </TableRow>
                </TableBody>
            </Table>
        </Stack>
    </Stack>

</Stack>
</Container>
