@extends('layouts.master')

@section('title', 'Sticky Action Bar')

@section('content')

<x-breadcrumb item="Forms" active="Sticky Action Bar"/>

        <!-- [ Main Content ] start -->
        <div class="row">
          <!-- [ form-element ] start -->
          <div class="col-lg-12">
            <div class="card">
              <div id="sticky-action" class="sticky-action">
                <div class="card-header">
                  <div class="row align-items-center">
                    <div class="col-sm-6">
                      <h5>Sticky Action Bar</h5>
                    </div>
                    <div class="col-sm-6 text-sm-end mt-3 mt-sm-0">
                      <button type="reset" class="btn btn-success">Submit</button>
                      <button type="reset" class="btn btn-light-secondary">Cancel</button>
                    </div>
                  </div>
                </div>
              </div>
              <div class="card-body">
                <h5>Form controls</h5>
                <hr />
                <div class="row">
                  <div class="col-md-6">
                    <form>
                      <div class="mb-3">
                        <label class="form-label" for="exampleInputEmail1">Email address</label>
                        <input
                          type="email"
                          class="form-control"
                          id="exampleInputEmail1"
                          aria-describedby="emailHelp"
                          placeholder="Enter email"
                        />
                        <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
                      </div>
                      <div class="mb-3">
                        <label class="form-label" for="exampleInputPassword1">Password</label>
                        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" />
                      </div>
                      <div class="mb-3 form-check">
                        <input type="checkbox" class="form-check-input" id="exampleCheck1" />
                        <label for="exampleCheck1">Check me out</label>
                      </div>
                      <button type="submit" class="btn btn-primary mb-4">Submit</button>
                    </form>
                  </div>
                  <div class="col-md-6">
                    <form>
                      <div class="mb-3">
                        <label class="form-label">Text</label>
                        <input type="text" class="form-control" placeholder="Text" />
                      </div>
                      <div class="mb-3">
                        <label class="form-label" for="exampleFormControlTextarea1">Example textarea</label>
                        <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
                      </div>
                    </form>
                  </div>
                </div>
                <h5>Sizing</h5>
                <hr />
                <div class="row">
                  <div class="col-md-6">
                    <input class="mb-3 form-control form-control-lg" type="text" placeholder=".form-control-lg" />
                    <input class="mb-3 form-control" type="text" placeholder="Default input" />
                    <input class="mb-3 form-control form-control-sm" type="text" placeholder=".form-control-sm" />
                  </div>
                  <div class="col-md-6">
                    <select class="mb-3 form-select form-select-lg">
                      <option>Large select</option>
                    </select>
                    <select class="mb-3 form-select">
                      <option>Default select</option>
                    </select>
                  </div>
                </div>
                <h5>Inline</h5>
                <hr />
                <form class="row row-cols-md-auto g-3 align-items-center">
                  <div class="col-12">
                    <label class="sr-only" for="inlineFormInputName">Name</label>
                    <input type="text" class="form-control" id="inlineFormInputName" placeholder="Jane Doe" />
                  </div>
                  <div class="col-12">
                    <label class="sr-only" for="inlineFormInputGroupUsername">Username</label>
                    <div class="input-group">
                      <div class="input-group-text">@</div>
                      <input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username" />
                    </div>
                  </div>
                  <div class="col-12">
                    <label class="sr-only" for="inlineFormSelectPref">Preference</label>
                    <select class="form-select" id="inlineFormSelectPref">
                      <option selected>Choose...</option>
                      <option value="1">One</option>
                      <option value="2">Two</option>
                      <option value="3">Three</option>
                    </select>
                  </div>
                  <div class="col-12">
                    <div class="form-check">
                      <input class="form-check-input" type="checkbox" id="inlineFormCheck" />
                      <label class="form-check-label" for="inlineFormCheck"> Remember me </label>
                    </div>
                  </div>
                  <div class="col-12">
                    <button type="submit" class="btn btn-primary">Submit</button>
                  </div>
                </form>
                <h5 class="mt-4">Form Grid</h5>
                <hr />
                <form>
                  <div class="row">
                    <div class="mb-3 col-md-6">
                      <label class="form-label" for="inputEmail4">Email</label>
                      <input type="email" class="form-control" id="inputEmail4" placeholder="Email" />
                    </div>
                    <div class="mb-3 col-md-6">
                      <label class="form-label" for="inputPassword4">Password</label>
                      <input type="password" class="form-control" id="inputPassword4" placeholder="Password" />
                    </div>
                  </div>
                  <div class="mb-3">
                    <label class="form-label" for="inputAddress">Address</label>
                    <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St" />
                  </div>
                  <div class="mb-3">
                    <label class="form-label" for="inputAddress2">Address 2</label>
                    <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor" />
                  </div>
                  <div class="row">
                    <div class="mb-3 col-md-6">
                      <label class="form-label" for="inputCity">City</label>
                      <input type="text" class="form-control" id="inputCity" />
                    </div>
                    <div class="mb-3 col-md-4">
                      <label class="form-label" for="inputState">State</label>
                      <select id="inputState" class="form-select">
                        <option selected>select</option>
                        <option>Large select</option>
                      </select>
                    </div>
                    <div class="mb-3 col-md-2">
                      <label class="form-label" for="inputZip">Zip</label>
                      <input type="text" class="form-control" id="inputZip" />
                    </div>
                  </div>
                  <div class="mb-3">
                    <div class="form-check">
                      <input class="form-check-input" type="checkbox" id="gridCheck" />
                      <label class="form-check-label" for="gridCheck">Check me out</label>
                    </div>
                  </div>
                  <button type="submit" class="btn btn-primary">Sign in</button>
                </form>
              </div>
            </div>
          </div>
          <!-- [ form-element ] end -->
        </div>
        <!-- [ Main Content ] end -->
@endsection