{{#> base }}
    {{> AppSidebar/sidebar forms-controls=this }}
    <div class="app-main__outer">
        <div class="app-main__inner">
            {{> AppMain/page-title }}
            <ul class="body-tabs body-tabs-layout tabs-animated body-tabs-animated nav">
                <li class="nav-item">
                    <a role="tab" class="nav-link active" id="tab-0" data-bs-toggle="tab" href="#tab-content-0">
                        <span>Basic</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a role="tab" class="nav-link" id="tab-1" data-bs-toggle="tab" href="#tab-content-1">
                        <span>Input Groups</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a role="tab" class="nav-link" id="tab-2" data-bs-toggle="tab" href="#tab-content-2">
                        <span>Custom Controls</span>
                    </a>
                </li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane tabs-animation fade show active" id="tab-content-0" role="tabpanel">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="main-card mb-3 card">
                                <div class="card-body"><h5 class="card-title">Controls Types</h5>
                                    <form class="">
                                        <div class="position-relative mb-3"><label for="exampleEmail" class="form-label">Email</label><input name="email" id="exampleEmail" placeholder="with a placeholder" type="email" class="form-control"></div>
                                        <div class="position-relative mb-3"><label for="examplePassword" class="form-label">Password</label><input name="password" id="examplePassword" placeholder="password placeholder" type="password"
                                                                                                                                               class="form-control"></div>
                                        <div class="position-relative mb-3">
                                            <label for="exampleSelect" class="form-label">Select</label>
                                            <select name="select" id="exampleSelect" class="form-select">
                                            <option>1</option>
                                            <option>2</option>
                                            <option>3</option>
                                            <option>4</option>
                                            <option>5</option>
                                        </select></div>
                                        <div class="position-relative mb-3">
                                            <label for="exampleSelectMulti" class="form-label">Select Multiple</label>
                                            <select multiple="" name="selectMulti" id="exampleSelectMulti" class="form-select">
                                            <option>1</option>
                                            <option>2</option>
                                            <option>3</option>
                                            <option>4</option>
                                            <option>5</option>
                                        </select></div>
                                        <div class="position-relative mb-3">
                                            <label for="exampleText" class="form-label">Text Area</label>
                                            <textarea name="text" id="exampleText" class="form-control"></textarea>
                                        </div>
                                        <div class="position-relative mb-3">
                                            <label for="exampleFile" class="form-label">File</label>
                                            <input name="file" id="exampleFile" type="file" class="form-control">
                                            <small class="form-text text-muted">
                                                This is some placeholder block-level help text for the above input.
                                                It's a bit lighter and easily wraps to a new line.
                                            </small>
                                        </div>
                                        <button class="mt-1 btn btn-primary">Submit</button>
                                    </form>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="main-card mb-3 card">
                                <div class="card-body"><h5 class="card-title">Sizing</h5>
                                    <form class="">
                                        <input placeholder="lg" type="text" class="mb-2 form-control-lg form-control">
                                        <input placeholder="default" type="text" class="mb-2 form-control">
                                        <input placeholder="sm" type="text" class="mb-2 form-control-sm form-control">
                                        <div class="divider"></div>
                                        <select class="mb-2 form-control-lg form-select">
                                            <option>Large Select</option>
                                        </select>
                                        <select class="mb-2 form-select">
                                            <option>Default Select</option>
                                        </select>
                                        <select class="form-control-sm form-select">
                                            <option>Small Select</option>
                                        </select>
                                    </form>
                                </div>
                            </div>
                            <div class="main-card mb-3 card">
                                <div class="card-body">
                                    <h5 class="card-title">Checkboxes &amp; Radios</h5>
                                    <form class="">
                                        <fieldset class="position-relative mb-3">
                                            <div class="position-relative form-check">
                                                <label class="form-check-label">
                                                    <input name="radio1" type="radio" class="form-check-input"> 
                                                    Option one is this and that—be sure to include why it's great
                                                </label>
                                            </div>
                                            <div class="position-relative form-check">
                                                <label class="form-check-label">
                                                    <input name="radio1" type="radio" class="form-check-input"> 
                                                    Option two can be something else and selecting it will deselect option one
                                                </label>
                                            </div>
                                            <div class="position-relative form-check disabled">
                                                <label class="form-check-label">
                                                    <input name="radio1" disabled="" type="radio" class="form-check-input">
                                                    Option three is disabled
                                                </label>
                                            </div>
                                        </fieldset>
                                        <div class="position-relative form-check">
                                            <label class="form-check-label">
                                                <input type="checkbox" class="form-check-input"> Check me out
                                            </label>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane tabs-animation fade" id="tab-content-1" role="tabpanel">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="main-card mb-3 card">
                                <div class="card-body"><h5 class="card-title">Input Groups</h5>
                                    <div>
                                        <div class="input-group">
                                            <div class="input-group-text">
                                                <span class="">@</span>
                                            </div>
                                            <input placeholder="username" type="text" class="form-control">
                                        </div>
                                        <br>
                                        <div class="input-group">
                                            <div class="input-group-text">
                                                <span class="">
                                                    <input aria-label="Checkbox for following text input" type="checkbox" class="">
                                                </span>
                                            </div>
                                            <input placeholder="Check it out" type="text" class="form-control"></div>
                                        <br>
                                        <div class="input-group">
                                            <input placeholder="username" type="text" class="form-control">
                                            <div class="input-group-text">
                                                <span class="">@example.com</span>
                                            </div>
                                        </div>
                                        <br>
                                        <div class="input-group">
                                            <div class="input-group-text">
                                                <span class="">$</span>
                                                <span class="">$</span>
                                            </div>
                                            <input placeholder="Dolla dolla billz yo!" type="text" class="form-control">
                                            <div class="input-group-text">
                                                <span class="">$</span>
                                                <span class="">$</span>
                                            </div>
                                        </div>
                                        <br>
                                        <div class="input-group">
                                            <div class="input-group-text">
                                                <span class="">$</span>
                                            </div>
                                            <input placeholder="Amount" step="1" type="number" class="form-control">
                                            <div class="input-group-text">
                                                <span class="">.00</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="main-card mb-3 card">
                                <div class="card-body">
                                    <h5 class="card-title">Input Group Button Dropdown</h5>
                                    <div class="input-group">
                                        <button type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle btn btn-secondary">Button Dropdown</button>
                                        <div tabindex="-1" role="menu" aria-hidden="true" class="dropdown-menu">
                                            <h6 tabindex="-1" class="dropdown-header">Header</h6>
                                            <button type="button" disabled="" tabindex="-1" class="disabled dropdown-item">Action</button>
                                            <button type="button" tabindex="0" class="dropdown-item">Another Action</button>
                                            <div tabindex="-1" class="dropdown-divider"></div>
                                            <button type="button" tabindex="0" class="dropdown-item">Another Action</button>
                                        </div>
                                        <input type="text" class="form-control"></div>
                                </div>
                            </div>
                            <div class="main-card mb-3 card">
                                <div class="card-body">
                                    <h5 class="card-title">Input Group Button Shorthand</h5>
                                    <div>
                                        <div class="input-group">
                                            <button class="btn btn-secondary">To the Left!</button>
                                            <input type="text" class="form-control"></div>
                                        <br>
                                        <div class="input-group">
                                            <input type="text" class="form-control">
                                            <button class="btn btn-secondary">To the Right!</button>
                                        </div>
                                        <br>
                                        <div class="input-group">
                                            <button class="btn btn-danger">To the Left!</button>
                                            <input placeholder="and..." type="text" class="form-control">
                                            <button class="btn btn-success">To the Right!</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="main-card mb-3 card">
                                <div class="card-body"><h5 class="card-title">Input Group Sizing</h5>
                                    <div>
                                        <div class="input-group input-group-lg">
                                            <div class="input-group-text">
                                                <span class="">@lg</span>
                                            </div>
                                            <input type="text" class="form-control">
                                        </div>
                                        <br>
                                        <div class="input-group">
                                            <div class="input-group-text">
                                                <span class="">@normal</span>
                                            </div>
                                            <input type="text" class="form-control">
                                        </div>
                                        <br>
                                        <div class="input-group input-group-sm">
                                            <div class="input-group-text">
                                                <span class="">@sm</span>
                                            </div>
                                            <input type="text" class="form-control">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="main-card mb-3 card">
                                <div class="card-body"><h5 class="card-title">Input Group Addon</h5>
                                    <div>
                                        <div class="input-group">
                                            <div class="input-group-text">
                                                <span class="">To the Left!</span>
                                            </div>
                                            <input type="text" class="form-control"></div>
                                        <br>
                                        <div class="input-group">
                                            <input type="text" class="form-control">
                                            <div class="input-group-text">
                                                <span class="">To the Right!</span>
                                            </div>
                                        </div>
                                        <br>
                                        <div class="input-group">
                                            <div class="input-group-text">
                                                <span class="">To the Left!</span>
                                            </div>
                                            <input placeholder="and..." type="text" class="form-control">
                                            <div class="input-group-text">
                                                <span class="">To the Right!</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="main-card mb-3 card">
                                <div class="card-body">
                                    <h5 class="card-title">Input Group Button</h5>
                                    <div>
                                        <div class="input-group">
                                            <button class="btn btn-secondary">I'm a button</button>
                                            <input type="text" class="form-control"></div>
                                        <br>
                                        <div class="input-group">
                                            <input type="text" class="form-control">
                                            <button type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle btn btn-secondary">Button Dropdown</button>
                                            <div tabindex="-1" role="menu" aria-hidden="true" class="dropdown-menu">
                                                <h6 tabindex="-1" class="dropdown-header">Header</h6>
                                                <button type="button" disabled="" tabindex="-1" class="disabled dropdown-item">Action</button>
                                                <button type="button" tabindex="0" class="dropdown-item">Another Action</button>
                                                <div tabindex="-1" class="dropdown-divider"></div>
                                                <button type="button" tabindex="0" class="dropdown-item">Another Action</button>
                                            </div>
                                        </div>
                                        <br>
                                        <div class="input-group">
                                            <button class="btn btn-outline-secondary">Split Button</button>
                                            <button type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle dropdown-toggle-split btn btn-outline-secondary">
                                                <span class="visually-hidden">Toggle Dropdown</span>
                                            </button>
                                            <div tabindex="-1" role="menu" aria-hidden="true" class="dropdown-menu">
                                                <h6 tabindex="-1" class="dropdown-header">Header</h6>
                                                <button type="button" disabled="" tabindex="-1" class="disabled dropdown-item">Action</button>
                                                <button type="button" tabindex="0" class="dropdown-item">Another Action</button>
                                                <div tabindex="-1" class="dropdown-divider"></div>
                                                <button type="button" tabindex="0" class="dropdown-item">Another Action</button>
                                            </div>
                                            <input placeholder="and..." type="text" class="form-control">
                                            <button class="btn btn-secondary">I'm a button</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane tabs-animation fade" id="tab-content-2" role="tabpanel">
                    <form class="">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="main-card mb-3 card">
                                    <div class="card-body">
                                        <h5 class="card-title">Checkboxes</h5>
                                        <div class="position-relative mb-3">
                                            <div>
                                                <div class="custom-checkbox custom-control form-check">
                                                    <input type="checkbox" id="exampleCustomCheckbox" class="form-check-input">
                                                    <label class="form-check-label" for="exampleCustomCheckbox">Check this custom checkbox</label>
                                                </div>
                                                <div class="custom-checkbox custom-control form-check">
                                                    <input type="checkbox" id="exampleCustomCheckbox2" class="form-check-input">
                                                    <label class="form-check-label" for="exampleCustomCheckbox2">Or this one</label>
                                                </div>
                                                <div class="custom-checkbox custom-control form-check">
                                                    <input type="checkbox" id="exampleCustomCheckbox3" disabled="" class="form-check-input">
                                                    <label class="form-check-label" for="exampleCustomCheckbox3">But  not this disabled one</label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="main-card mb-3 card">
                                <div class="card-body">
                                    <h5 class="card-title">Inline</h5>
                                    <div class="position-relative mb-3">
                                        <div>
                                            <div class="form-check form-check-inline">
                                                <input type="checkbox" id="exampleCustomInline" class="form-check-input">
                                                <label class="form-label form-check-label" for="exampleCustomInline">An inline custom input</label>
                                            </div>
                                            <div class="form-check form-check-inline">
                                                <input type="checkbox" id="exampleCustomInline2" class="form-check-input">
                                                <label class="form-label form-check-label" for="exampleCustomInline2">and another one</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            </div>
                            <div class="col-md-6">
                                <div class="main-card mb-3 card">
                                    <div class="card-body">
                                        <h5 class="card-title">Radios</h5>
                                        <div class="position-relative mb-3">
                                            <div>
                                                <div class="custom-radio custom-control">
                                                    <input type="radio" id="exampleCustomRadio" name="customRadio" class="form-check-input">
                                                    <label class="form-check-label" for="exampleCustomRadio">Select this custom radio</label>
                                                </div>
                                                <div class="custom-radio custom-control">
                                                    <input type="radio" id="exampleCustomRadio2" name="customRadio" class="form-check-input">
                                                    <label class="form-check-label" for="exampleCustomRadio2">Or this one</label>
                                                </div>
                                                <div class="custom-radio custom-control">
                                                    <input type="radio" id="exampleCustomRadio3" disabled="" class="form-check-input">
                                                    <label class="form-check-label" for="exampleCustomRadio3">But not this disabled one</label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="main-card mb-3 card">
                                    <div class="card-body">
                                        <h5 class="card-title">Form Select</h5>
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="position-relative mb-3">
                                                    <label for="exampleCustomSelect" class="form-label">Custom Select</label>
                                                    <select type="select" id="exampleCustomSelect" name="customSelect" class="form-select">
                                                        <option value="">Select</option>
                                                        <option>Value 1</option>
                                                        <option>Value 2</option>
                                                        <option>Value 3</option>
                                                        <option>Value 4</option>
                                                        <option>Value 5</option>
                                                    </select>
                                                </div>
                                                <div class="position-relative mb-3">
                                                    <label for="exampleCustomMutlipleSelect" class="form-label">Custom Multiple Select</label>
                                                    <select multiple="" type="select" id="exampleCustomMutlipleSelect" name="customSelect" class="form-select">
                                                        <option value="">Select</option>
                                                        <option>Value 1</option>
                                                        <option>Value 2</option>
                                                        <option>Value 3</option>
                                                        <option>Value 4</option>
                                                        <option>Value 5</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="position-relative mb-3">
                                                    <label for="exampleCustomSelectDisabled" class="form-label">Custom Select Disabled</label>
                                                    <select type="select" id="exampleCustomSelectDisabled" name="customSelect" disabled="" class="form-select">
                                                        <option value="">Select</option>
                                                        <option>Value 1</option>
                                                        <option>Value 2</option>
                                                        <option>Value 3</option>
                                                        <option>Value 4</option>
                                                        <option>Value 5</option>
                                                    </select>
                                                </div>
                                                <div class="position-relative mb-3">
                                                    <label for="exampleCustomMutlipleSelectDisabled" class="form-label">Custom Multiple Select Disabled</label>
                                                    <select multiple="" type="select"  id="exampleCustomMutlipleSelectDisabled" name="customSelect" disabled="" class="form-select">
                                                        <option value="">Select</option>
                                                        <option>Value 1</option>
                                                        <option>Value 2</option>
                                                        <option>Value 3</option>
                                                        <option>Value 4</option>
                                                        <option>Value 5</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        {{> AppFooter/footer }}
    </div>
{{/ base }}