import { html } from 'lit-html'

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

export const input = () => {
    return html`
        <div>
            <bs-form-row>
                <bs-form-group md="6">
                    <bs-form-label>First Name</bs-form-label>
                    <bs-form-control placeholder="John" control-id="firstName" 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 placeholder="Snow" control-id="lastName" as="input" name="lastName" type="text" />
                </bs-form-group>
            </bs-form-row>
            <bs-form-row>
                <bs-form-group md="6">
                    <bs-form-label>Email Address</bs-form-label>
                    <bs-form-control placeholder="johnsnow@got.com" control-id="emailAddress" as="input" name="emailAddress" type="email" />
                </bs-form-group>
                <bs-form-group md="6">
                    <bs-form-label>Password</bs-form-label>
                    <bs-form-control placeholder="Password" control-id="bsPassword" as="input" name="bsPassword" type="password" />
                </bs-form-group>
            </bs-form-row>
        </div>
    `
}

export const textArea = () => {
    return html`
        <div>
            <bs-form-row>
                <bs-form-group md="6">
                    <bs-form-label>First Name</bs-form-label>
                    <bs-form-control placeholder="John Snow Diaries" control-id="bsTextArea" as="textarea" name="bsTextArea" />
                </bs-form-group>
            </bs-form-row>
        </div>
    `
}

export const select = () => html`
    <div>
        <bs-form-row>
            <bs-form-group md="5">
                <bs-form-label>State</bs-form-label>
                <bs-form-control as="select" name="state">
                    <option value="">Please select state</option>
                    <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-row>
    </div>
`
