<!doctype html>
<html lang="en">

<!-- Head -->
{{> (config config.partials.head) title=config.defaultPageTitle }}

<body class="{{ config.classes.body }}">

    <!-- Navbar-->
    {{> (config config.partials.navbar)
        configClassList=config.classes.navbar
        classList=""
    }}
    <!-- / Navbar-->

    <!-- Page Content -->
    <main id="main">

        <!-- Breadcrumbs-->
        {{> breadcrumbs/breadcrumbs page="Forms"}}
        <!-- / Breadcrumbs-->

        <!-- Content-->
        <section class="container-fluid">

        <!-- Page Title-->
        <h2 class="fs-4 mb-2">Forms</h2>
        <p class="text-muted mb-4">Examples for form control styles, layout options, and custom components for
            creating a wide variety of forms.</p>
        <!-- / Page Title-->

        
        <div class="row g-4">

            <div class="col-12 col-md-6">

                <!-- Example-->
                <div class="card mb-4">
                    <div class="card-header justify-content-between align-items-center d-flex">
                        <h6 class="card-title m-0">Default form</h6>
                    </div>
                    <div class="card-body">
                        <form>
                            <div class="mb-3">
                                <label for="exampleInputEmail1" class="form-label">Email address</label>
                                <input type="email" class="form-control" id="exampleInputEmail1"
                                    aria-describedby="emailHelp" placeholder="Enter your email">
                                <div id="emailHelp" class="form-text">We'll never share your email with anyone else.
                                </div>
                            </div>
                            <div class="mb-3">
                                <label for="exampleInputPassword1" class="form-label">Password</label>
                                <input type="password" class="form-control" id="exampleInputPassword1">
                            </div>
                            <div class="mb-3 form-check">
                                <input type="checkbox" class="form-check-input" id="exampleCheck1">
                                <label class="form-check-label" for="exampleCheck1">Check me out</label>
                            </div>
                            <button type="submit" class="btn btn-primary">Submit</button>
                        </form>
                    </div>
                </div>
                <!-- / Example-->

                <!-- Example-->
                <div class="card mb-4">
                    <div class="card-header justify-content-between align-items-center d-flex">
                        <h6 class="card-title m-0">Form control</h6>
                    </div>
                    <div class="card-body">
                        <form>
                            <div class="mb-3">
                                <label for="exampleFormControlInput1" class="form-label">Email address</label>
                                <input type="email" class="form-control" id="exampleFormControlInput1"
                                    placeholder="name@example.com">
                            </div>
                            <div class="mb-3">
                                <label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
                                <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
                            </div>
                            <button type="submit" class="btn btn-primary">Submit</button>
                        </form>
                    </div>
                </div>
                <!-- / Example-->

                <!-- Example-->
                <div class="card mb-4">
                    <div class="card-header justify-content-between align-items-center d-flex">
                        <h6 class="card-title m-0">Selects</h6>
                    </div>
                    <div class="card-body">
                        <select class="form-select form-select-lg mb-3" aria-label=".form-select-lg example">
                            <option selected>Large select example</option>
                            <option value="1">One</option>
                            <option value="2">Two</option>
                            <option value="3">Three</option>
                        </select>

                        <select class="form-select mb-3" aria-label=".form-select example">
                            <option selected>Default select menu</option>
                            <option value="1">One</option>
                            <option value="2">Two</option>
                            <option value="3">Three</option>
                        </select>

                        <select class="form-select form-select-sm mb-3" aria-label=".form-select-sm example">
                            <option selected>Small select menu</option>
                            <option value="1">One</option>
                            <option value="2">Two</option>
                            <option value="3">Three</option>
                        </select>

                        <select class="form-select" multiple aria-label="multiple select example">
                            <option selected>Open this select menu</option>
                            <option value="1">One</option>
                            <option value="2">Two</option>
                            <option value="3">Three</option>
                        </select>
                    </div>
                </div>
                <!-- / Example-->

                <!-- Example-->
                <div class="card mb-4">
                    <div class="card-header justify-content-between align-items-center d-flex">
                        <h6 class="card-title m-0">Switches</h6>
                    </div>
                    <div class="card-body">
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
                            <label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox
                                input</label>
                        </div>
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked>
                            <label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox
                                input</label>
                        </div>
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="flexSwitchCheckDisabled" disabled>
                            <label class="form-check-label" for="flexSwitchCheckDisabled">Disabled switch checkbox
                                input</label>
                        </div>
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="flexSwitchCheckCheckedDisabled"
                                checked disabled>
                            <label class="form-check-label" for="flexSwitchCheckCheckedDisabled">Disabled checked
                                switch checkbox input</label>
                        </div>
                    </div>
                </div>
                <!-- / Example-->

            </div>

            <div class="col-12 col-md-6">

                <!-- Example-->
                <div class="card mb-4">
                    <div class="card-header justify-content-between align-items-center d-flex">
                        <h6 class="card-title m-0">Disabled form</h6>
                    </div>
                    <div class="card-body">
                        <form>
                            <fieldset disabled>
                                <div class="mb-3">
                                    <label for="disabledTextInput" class="form-label">Disabled input</label>
                                    <input type="text" id="disabledTextInput" class="form-control"
                                        placeholder="Disabled input">
                                </div>
                                <div class="mb-3">
                                    <label for="disabledSelect" class="form-label">Disabled select menu</label>
                                    <select id="disabledSelect" class="form-select">
                                        <option>Disabled select</option>
                                    </select>
                                </div>
                                <div class="mb-3">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="disabledFieldsetCheck"
                                            disabled>
                                        <label class="form-check-label" for="disabledFieldsetCheck">
                                            Can't check this
                                        </label>
                                    </div>
                                </div>
                                <button type="submit" class="btn btn-primary">Submit</button>
                            </fieldset>
                        </form>
                    </div>
                </div>
                <!-- / Example-->

                <!-- Example-->
                <div class="card mb-4">
                    <div class="card-header justify-content-between align-items-center d-flex">
                        <h6 class="card-title m-0">Sizing</h6>
                    </div>
                    <div class="card-body">
                        <input class="form-control mb-2 form-control-lg" type="text" placeholder=".form-control-lg"
                            aria-label=".form-control-lg example">
                        <input class="form-control mb-2" type="text" placeholder="Default input"
                            aria-label="default input example">
                        <input class="form-control form-control-sm" type="text" placeholder=".form-control-sm"
                            aria-label=".form-control-sm example">
                    </div>
                </div>
                <!-- / Example-->

                <!-- Example-->
                <div class="card mb-4">
                    <div class="card-header justify-content-between align-items-center d-flex">
                        <h6 class="card-title m-0">Checks & radios</h6>
                    </div>
                    <div class="card-body">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
                            <label class="form-check-label" for="flexCheckDefault">
                                Default checkbox
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked>
                            <label class="form-check-label" for="flexCheckChecked">
                                Checked checkbox
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="" id="flexCheckDisabled"
                                disabled>
                            <label class="form-check-label" for="flexCheckDisabled">
                                Disabled checkbox
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="" id="flexCheckCheckedDisabled"
                                checked disabled>
                            <label class="form-check-label" for="flexCheckCheckedDisabled">
                                Disabled checked checkbox
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="flexRadioDefault"
                                id="flexRadioDefault1">
                            <label class="form-check-label" for="flexRadioDefault1">
                                Default radio
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="flexRadioDefault"
                                id="flexRadioDefault2" checked>
                            <label class="form-check-label" for="flexRadioDefault2">
                                Default checked radio
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="flexRadioDisabled"
                                id="flexRadioDisabled" disabled>
                            <label class="form-check-label" for="flexRadioDisabled">
                                Disabled radio
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="flexRadioDisabled"
                                id="flexRadioCheckedDisabled" checked disabled>
                            <label class="form-check-label" for="flexRadioCheckedDisabled">
                                Disabled checked radio
                            </label>
                        </div>
                    </div>
                </div>
                <!-- / Example-->

                <!-- Example-->
                <div class="card mb-4">
                    <div class="card-header justify-content-between align-items-center d-flex">
                        <h6 class="card-title m-0">Range</h6>
                    </div>
                    <div class="card-body">
                        <label for="customRange1" class="form-label">Example range</label>
                        <input type="range" class="form-range" id="customRange1">
                    </div>
                </div>
                <!-- / Example-->

                <!-- Example-->
                <div class="card mb-4">
                    <div class="card-header justify-content-between align-items-center d-flex">
                        <h6 class="card-title m-0">Input groups</h6>
                    </div>
                    <div class="card-body">
                        <div class="input-group mb-3">
                            <span class="input-group-text" id="basic-addon1">@</span>
                            <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
                          </div>
                          
                          <div class="input-group mb-3">
                            <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
                            <span class="input-group-text" id="basic-addon2">@example.com</span>
                          </div>
                          
                          <label for="basic-url" class="form-label">Your vanity URL</label>
                          <div class="input-group mb-3">
                            <span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
                            <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
                          </div>
                          
                          <div class="input-group mb-3">
                            <span class="input-group-text">$</span>
                            <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
                            <span class="input-group-text">.00</span>
                          </div>
                          
                          <div class="input-group mb-3">
                            <input type="text" class="form-control" placeholder="Username" aria-label="Username">
                            <span class="input-group-text">@</span>
                            <input type="text" class="form-control" placeholder="Server" aria-label="Server">
                          </div>
                          
                          <div class="input-group">
                            <span class="input-group-text">With textarea</span>
                            <textarea class="form-control" aria-label="With textarea"></textarea>
                          </div>
                    </div>
                </div>
                <!-- / Example-->

            </div>

        </div>

        <!-- Footer -->
        {{> (config config.partials.footer)
            configClassList=config.classes.footer
            classList=""
        }}
        <!-- / Footer-->        

        </section>
        <!-- / Content-->

    </main>
    <!-- /Page Content -->

    <!-- Page Aside-->
    {{> aside/aside }}
    <!-- / Page Aside-->

    <!-- Theme JS -->
    {{> footer/scripts }}

</body>

</html>
