<h2>Controls</h2>
<StyleguideExample @title="Input">
  <Form as |form|>
    <form.Field @title="Username" @name="username" as |field|>
      <field.Input placeholder="Username" />
    </form.Field>
    <form.Field @title="Age" @name="age" as |field|>
      <field.Input placeholder="Age" @type="number" @format="small" />
    </form.Field>
    <form.Field @title="Website" @name="website" as |field|>
      <field.Input @before="https://" @after=".com" @format="large" />
    </form.Field>
    <form.Field @title="After" @name="after" as |field|>
      <field.Input @after=".com" />
    </form.Field>
    <form.Field @title="Before" @name="before" as |field|>
      <field.Input @before="https://" />
    </form.Field>
    <form.Field
      @title="Secret"
      @subtitle="Another secret"
      @name="secret"
      @description="An important password"
      as |field|
    >
      <field.Password />
    </form.Field>
  </Form>
</StyleguideExample>

<StyleguideExample @title="Question">
  <Form as |form|>
    <form.Field @title="Enabled" @name="enabled" as |field|>
      <field.Question />
    </form.Field>
  </Form>
</StyleguideExample>

<StyleguideExample @title="Toggle">
  <Form as |form|>
    <form.Field @title="Enabled" @name="enabled" as |field|>
      <field.Toggle />
    </form.Field>
  </Form>
</StyleguideExample>

<StyleguideExample @title="Composer">
  <Form as |form|>
    <form.Field @title="Query" @name="query" as |field|>
      <field.Composer />
    </form.Field>
  </Form>
</StyleguideExample>

<StyleguideExample @title="Code">
  <Form as |form|>
    <form.Field @title="Query" @name="query" as |field|>
      <field.Code />
    </form.Field>
  </Form>
</StyleguideExample>

<StyleguideExample @title="Textarea">
  <Form as |form|>
    <form.Field @title="Query" @name="query" as |field|>
      <field.Textarea />
    </form.Field>
  </Form>
</StyleguideExample>

<StyleguideExample @title="Select">
  <Form as |form|>
    <form.Field @title="Enabled" @name="enabled" as |field|>
      <field.Select as |select|>
        <select.Option @value="true">Yes</select.Option>
        <select.Option @value="false">No</select.Option>
      </field.Select>
    </form.Field>
  </Form>
</StyleguideExample>

<StyleguideExample @title="CheckboxGroup">
  <Form as |form|>
    <form.CheckboxGroup @title="I give explicit permission" as |checkboxGroup|>
      <checkboxGroup.Field
        @title="Use my email for any purpose."
        @name="contract"
        as |field|
      >
        <field.Checkbox>Including signing up for services I can't unsubscribe
          to.</field.Checkbox>
      </checkboxGroup.Field>
      <checkboxGroup.Field
        @title="Sign my soul away."
        @name="contract2"
        as |field|
      >
        <field.Checkbox>Will severly impact the afterlife experience.</field.Checkbox>
      </checkboxGroup.Field>
    </form.CheckboxGroup>
  </Form>
</StyleguideExample>

<StyleguideExample @title="Image">
  <Form as |form|>
    <form.Field @title="Image" @name="image" as |field|>
      <field.Image />
    </form.Field>
  </Form>
</StyleguideExample>

<StyleguideExample @title="Icon">
  <Form as |form|>
    <form.Field @title="Icon" @name="icon" as |field|>
      <field.Icon />
    </form.Field>
  </Form>
</StyleguideExample>

<StyleguideExample @title="Menu">
  <Form as |form data|>
    <form.Field @title="Enabled" @name="enabled" as |field|>
      <field.Menu @selection={{data.enabled}} as |menu|>
        <menu.Item @value="true">Yes</menu.Item>
        <menu.Divider />
        <menu.Item @value="false">No</menu.Item>
      </field.Menu>
    </form.Field>
  </Form>
</StyleguideExample>

<StyleguideExample @title="RadioGroup">
  <Form as |form|>
    <form.Field @title="Enabled" @name="enabled" @format="full" as |field|>
      <field.RadioGroup as |radioGroup|>
        <radioGroup.Radio @value="true">Yes</radioGroup.Radio>
        <radioGroup.Radio @value="false" as |radio|>
          <radio.Title>No</radio.Title>
          <radio.Description>
            Choosing no, will make you inelligible for the contest.
          </radio.Description>
        </radioGroup.Radio>
      </field.RadioGroup>
    </form.Field>
  </Form>
</StyleguideExample>

<h2>Layout</h2>

<StyleguideExample @title="Section">
  <Form as |form|>
    <form.Section @title="Section title">
      Content
    </form.Section>
  </Form>
</StyleguideExample>

<StyleguideExample @title="Alert">
  <Form as |form|>
    <form.Alert @icon="pencil-alt">
      You can edit this form.
    </form.Alert>
  </Form>
</StyleguideExample>

<StyleguideExample @title="InputGroup">
  <Form as |form|>
    <form.InputGroup as |inputGroup|>
      <inputGroup.Field @title="Username" @name="username" as |field|>
        <field.Input />
      </inputGroup.Field>
      <inputGroup.Field @title="Email" @name="email" as |field|>
        <field.Input />
      </inputGroup.Field>
    </form.InputGroup>
  </Form>
</StyleguideExample>

<StyleguideExample @title="Collection">
  <Form
    @data={{hash foo=(array (hash bar=1 baz=2) (hash bar=3 baz=4))}}
    as |form|
  >
    <form.Button @action={{fn form.addItemToCollection "foo"}} @icon="plus" />

    <form.Collection @name="foo" as |collection index|>
      <form.Row as |row|>
        <row.Col @size={{6}}>
          <collection.Field @title="Bar" @name="bar" as |field|>
            <field.Input />
          </collection.Field>
        </row.Col>

        <row.Col @size={{4}}>
          <collection.Field @title="Baz" @name="baz" as |field|>
            <field.Input />
          </collection.Field>
        </row.Col>

        <row.Col @size={{2}}>
          <form.Button @action={{fn collection.remove index}} @icon="minus" />
        </row.Col>
      </form.Row>
    </form.Collection>

  </Form>
</StyleguideExample>

<StyleguideExample @title="Row/Col">
  <Form as |form|>
    <form.Row as |row|>
      <row.Col @size={{6}}>
        <form.Field
          @title="Username"
          @name="username"
          @validation="required"
          as |field|
        >
          <field.Input />
        </form.Field>
      </row.Col>
      <row.Col @size={{4}}>
        <form.Field @title="Email" @name="email" as |field|>
          <field.Input />
        </form.Field>
      </row.Col>
      <row.Col @size={{2}}>
        <form.Submit />
      </row.Col>
    </form.Row>
  </Form>
</StyleguideExample>

<StyleguideExample @title="Multiline">
  <Form as |form|>
    <form.Row as |row|>
      <row.Col @size={{6}}>
        <form.Field
          @title="Username"
          @name="username"
          @validation="required"
          as |field|
        >
          <field.Input />
        </form.Field>
      </row.Col>
      <row.Col @size={{6}}>
        <form.Field @title="Email" @name="email" as |field|>
          <field.Input />
        </form.Field>
      </row.Col>

      <row.Col @size={{12}}>
        <form.Field @title="Adress" @name="adress" as |field|>
          <field.Input />
        </form.Field>
      </row.Col>
    </form.Row>
  </Form>
</StyleguideExample>

<h2>Validation</h2>

<StyleguideExample @title="Input">
  <Form @validateOn="change" as |form|>
    <form.Field
      @title="Username"
      @name="username"
      @validation="required"
      as |field|
    >
      <field.Input />
    </form.Field>
  </Form>
</StyleguideExample>