Form

import { Button } from "@axonyx/ui/foundry/Button.asx"
import { Checkbox } from "@axonyx/ui/foundry/Checkbox.asx"
import { Copy } from "@axonyx/ui/foundry/Copy.asx"
import { Field } from "@axonyx/ui/foundry/Field.asx"
import { FieldHint } from "@axonyx/ui/foundry/FieldHint.asx"
import { FieldLabel } from "@axonyx/ui/foundry/FieldLabel.asx"
import { Fieldset } from "@axonyx/ui/foundry/Fieldset.asx"
import { Flex } from "@axonyx/ui/foundry/Flex.asx"
import { Form } from "@axonyx/ui/foundry/Form.asx"
import { FormGroup } from "@axonyx/ui/foundry/FormGroup.asx"
import { Input } from "@axonyx/ui/foundry/Input.asx"
import { Legend } from "@axonyx/ui/foundry/Legend.asx"
import { Option } from "@axonyx/ui/foundry/Option.asx"
import { Select } from "@axonyx/ui/foundry/Select.asx"
import { Textarea } from "@axonyx/ui/foundry/Textarea.asx"

page PostEditor() {
  return ASX {
    <Form method="get" action="/components/form#cms-editor" surface="forged">
      <Fieldset>
        <Legend>Article</Legend>
        <FormGroup cols="2" gap="lg">
          <Field htmlFor="post-title">
            <FieldLabel htmlFor="post-title">Title</FieldLabel>
            <Input id="post-title" name="title" placeholder="A new release" required="true" describedBy="post-title-hint" />
            <FieldHint id="post-title-hint">Required. Give the article a clear title.</FieldHint>
          </Field>
          <Field htmlFor="post-slug">
            <FieldLabel htmlFor="post-slug">Slug</FieldLabel>
            <Input id="post-slug" name="slug" placeholder="a-new-release" required="true" describedBy="post-slug-hint" />
            <FieldHint id="post-slug-hint">Required. Check format and uniqueness in the server action.</FieldHint>
          </Field>
        </FormGroup>
        <Field htmlFor="post-summary">
          <FieldLabel htmlFor="post-summary">Summary</FieldLabel>
          <Textarea id="post-summary" name="summary" placeholder="A short introduction" describedBy="post-summary-hint" />
          <FieldHint id="post-summary-hint">Optional. Used in article listings.</FieldHint>
        </Field>
      </Fieldset>
      <Fieldset>
        <Legend>Publishing</Legend>
        <FormGroup cols="2" gap="lg">
          <Field htmlFor="post-status">
            <FieldLabel htmlFor="post-status">Status</FieldLabel>
            <Select id="post-status" name="status">
              <Option value="draft">Draft</Option>
              <Option value="published">Published</Option>
            </Select>
          </Field>
          <Field htmlFor="post-id">
            <FieldLabel htmlFor="post-id">Record ID</FieldLabel>
            <Input id="post-id" name="post_id" value="Assigned by the server" disabled="true" describedBy="post-id-hint" />
            <FieldHint id="post-id-hint">Disabled controls are excluded from submitted form data.</FieldHint>
          </Field>
        </FormGroup>
        <Checkbox name="include_in_feed" checked="true">Include in the public feed</Checkbox>
      </Fieldset>
      <Flex gap="sm" wrap="true">
        <Button variant="primary" type="submit">Preview submission</Button>
        <Button variant="ghost" type="reset">Reset fields</Button>
      </Flex>
      <Copy>This demo sends a GET request back to this page. Submitted fields appear in the URL; nothing is saved. The editor resets after navigation.</Copy>
    </Form>
  }
}