import { html } from 'lit-html'

export default {
    title: 'Bootstrap/Forms',
    component: 'bs-form',
}

export const example = () => html`
    <bs-form-row>
        <bs-form-group md="6">
            <bs-form-label>First Name</bs-form-label>
            <bs-form-control as="input" name="firstName" type="text" />
        </bs-form-group>
        <bs-form-group md="6">
            <bs-form-label>Last Name</bs-form-label>
            <bs-form-control as="input" name="lastName" type="text" />
        </bs-form-group>
    </bs-form-row>
    <bs-form-row>
        <bs-form-group md="12">
            <bs-form-label>Address</bs-form-label>
            <bs-form-control as="input" name="firstName" type="text" />
        </bs-form-group>
    </bs-form-row>
    <bs-form-row>
        <bs-form-group md="6">
            <bs-form-label>City</bs-form-label>
            <bs-form-control as="input" name="firstName" type="text" placeholder="Readonly input here..." />
        </bs-form-group>
        <bs-form-group md="4">
            <bs-form-label>State</bs-form-label>
            <bs-form-control as="select" name="state">
                <option value="VA">Virginia</option>
                <option value="NV">Nevada</option>
                <option value="GA">Georgia</option>
                <option value="MA">Maryland</option>
                <option value="NC">North Carolina</option>
                <option value="FL">Florida</option>
            </bs-form-control>
        </bs-form-group>
        <bs-form-group md="2">
            <bs-form-label>Zip Code</bs-form-label>
            <bs-form-control as="input" name="firstName" type="text" />
        </bs-form-group>
    </bs-form-row>
    <bs-form-row>
        <bs-form-group md="2">
            <bs-form-label>Checkbox</bs-form-label>
            <bs-form-check control-id="checkbox-1" type="checkbox">default checkbox</bs-form-check>
        </bs-form-group>
    </bs-form-row>
    <bs-form-row>
        <bs-form-group md="2">
            <bs-form-label>Radio Buttons</bs-form-label>
            <bs-form-check control-id="checkbox-1" type="radio">Default Radio</bs-form-check>
        </bs-form-group>
    </bs-form-row>
`

export const formGroup = () => html`
    <p>The FormGroup component is the easiest way to add some structure to forms.</p>
    <div>
        <bs-form-group md="6">
            <bs-form-label>Label Name</bs-form-label>
            <bs-form-control as="input" control-id="labelName" name="labelName" type="text" />
        </bs-form-group>
    </div>
`
