@page "/forms"

<PageTitle>Forms</PageTitle>

<div class="space-y-6 max-w-lg">
    <div>
        <h1 class="text-3xl font-bold tracking-tight">Forms Demo</h1>
        <p class="text-muted-foreground">All input components — fully static SSR with htmx validation.</p>
    </div>

    <HtmxForm Endpoint="/api/forms/contact">
        <FormField Label="Full Name" For="name">
            <TextInput Id="name" Name="name" Placeholder="Jane Doe" data-testid="input-name" />
        </FormField>

        <FormField Label="Email" For="email">
            <TextInput Id="email" Name="email" Type="email" Placeholder="jane@example.com" data-testid="input-email" />
        </FormField>

        <FormField Label="Password" For="password">
            <TextInput Id="password" Name="password" Type="password" Placeholder="••••••••" data-testid="input-password" />
        </FormField>

        <FormField Label="Age" For="age">
            <NumberInput Id="age" Name="age" Placeholder="25" Min="0" Max="150" data-testid="input-age" />
        </FormField>

        <FormField Label="Birth Date" For="birthdate">
            <DateInput Id="birthdate" Name="birthdate" data-testid="input-birthdate" />
        </FormField>

        <FormField Label="Preferred Time" For="preferredtime">
            <TimeInput Id="preferredtime" Name="preferredtime" data-testid="input-time" />
        </FormField>

        <FormField Label="Appointment" For="appointment">
            <DateTimeInput Id="appointment" Name="appointment" data-testid="input-appointment" />
        </FormField>

        <FormField Label="Confirmation" For="confirmation">
            <TextInput Id="confirmation" Name="confirmation" Placeholder='Type "CONFIRM"' data-testid="input-confirmation" />
        </FormField>

        <div class="flex gap-2 pt-2">
            <Button Type="submit" data-testid="btn-submit">Submit</Button>
            <Button Type="reset" Variant="@ButtonVariant.Outline" data-testid="btn-reset">Reset</Button>
            <Button Variant="@ButtonVariant.Destructive" Disabled="true" data-testid="btn-disabled">Disabled</Button>
        </div>
    </HtmxForm>
</div>