{% extends 'layouts/base.html' %}
{% load static %}

{% block content %}

  <!-- [ Main Content ] start -->
  <div class="row">
    <div class="col-sm-12">
      <div class="card">
        <div class="card-header">
          <h5>Basic Componant</h5>
        </div>
        <div class="card-body">
          <h5>Form controls</h5>
          <hr>
          <div class="row">
            <div class="col-md-6">
              <form>
                <div class="form-group">
                  <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="form-group">
                  <label for="exampleInputPassword1">Password</label>
                  <input type="password" class="form-control" id="exampleInputPassword1"
                    placeholder="Password">
                </div>
                <div class="form-group 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 class="col-md-6">
              <form>
                <div class="form-group">
                  <label>Text</label>
                  <input type="text" class="form-control" placeholder="Text">
                </div>
                <div class="form-group">
                  <label for="exampleFormControlSelect1">Example select</label>
                  <select class="form-control" id="exampleFormControlSelect1">
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                  </select>
                </div>
                <div class="form-group">
                  <label for="exampleFormControlTextarea1">Example textarea</label>
                  <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
                </div>
              </form>
            </div>
          </div>
          <h5 class="mt-5">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-control form-control-lg">
                <option>Large select</option>
              </select>
              <select class="mb-3 form-control">
                <option>Default select</option>
              </select>
            </div>
          </div>
          <h5 class="mt-5">Inline</h5>
          <hr>
          <form class="form-inline">
            <div class="form-group mb-2">
              <label for="staticEmail2" class="sr-only">Email</label>
              <input type="text" readonly class="form-control-plaintext" id="staticEmail2"
                value="email@example.com">
            </div>
            <div class="form-group mx-sm-3 mb-2">
              <label for="inputPassword2" class="sr-only">Password</label>
              <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
            </div>
            <button type="submit" class="btn btn-primary mb-2">Confirm identity</button>
          </form>
          <h3 class="mt-5">Checkboxes and Radios</h3>
          <h5 class="mt-3">Checkboxes</h5>
          <hr>
          <div class="custom-control custom-checkbox">
            <input type="checkbox" class="custom-control-input" id="customCheck1">
            <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
          </div>
          <div class="row">
            <div class="col-md-6">
              <h5 class="mt-5">Radios</h5>
              <hr>
              <div class="custom-control custom-radio">
                <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
                <label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
              </div>
              <div class="custom-control custom-radio">
                <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
                <label class="custom-control-label" for="customRadio2">Or toggle this other custom
                  radio</label>
              </div>
              <h5 class="mt-5">Inline</h5>
              <hr>
              <div class="custom-control custom-radio custom-control-inline">
                <input type="radio" id="customRadioInline1" name="customRadioInline1"
                  class="custom-control-input">
                <label class="custom-control-label" for="customRadioInline1">Toggle this custom
                  radio</label>
              </div>
              <div class="custom-control custom-radio custom-control-inline">
                <input type="radio" id="customRadioInline2" name="customRadioInline1"
                  class="custom-control-input">
                <label class="custom-control-label" for="customRadioInline2">Or toggle this other custom
                  radio</label>
              </div>
            </div>
            <div class="col-md-6">
              <h5 class="mt-5">Range</h5>
              <hr>
              <label for="customRange1">Example range</label>
              <input type="range" class="custom-range" id="customRange1">
              <label for="customRange2">Example range</label>
              <input type="range" class="custom-range" min="0" max="5" id="customRange2">
              <label for="customRange3">Example range</label>
              <input type="range" class="custom-range" min="0" max="5" step="0.5" id="customRange3">
            </div>
          </div>
        </div>
      </div>
      <!-- Input group -->
      <div class="card">
        <div class="card-header">
          <h5>Input Group</h5>
        </div>
        <div class="card-body">
          <div class="input-group mb-3">
            <div class="input-group-prepend">
              <span class="input-group-text" id="basic-addon1">@</span>
            </div>
            <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">
            <div class="input-group-append">
              <span class="input-group-text" id="basic-addon2">@example.com</span>
            </div>
          </div>
          <label for="basic-url">Your vanity URL</label>
          <div class="input-group mb-3">
            <div class="input-group-prepend">
              <span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
            </div>
            <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
          </div>
          <div class="input-group mb-3">
            <div class="input-group-prepend">
              <span class="input-group-text">$</span>
            </div>
            <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
            <div class="input-group-append">
              <span class="input-group-text">.00</span>
            </div>
          </div>
          <h5 class="mt-5">Sizing</h5>
          <hr>
          <div class="input-group input-group-sm mb-3">
            <div class="input-group-prepend">
              <span class="input-group-text" id="inputGroup-sizing-sm">Small</span>
            </div>
            <input type="text" class="form-control" aria-label="Small"
              aria-describedby="inputGroup-sizing-sm">
          </div>
          <div class="input-group mb-3">
            <div class="input-group-prepend">
              <span class="input-group-text" id="inputGroup-sizing-default">Default</span>
            </div>
            <input type="text" class="form-control" aria-label="Default"
              aria-describedby="inputGroup-sizing-default">
          </div>
          <div class="input-group input-group-lg">
            <div class="input-group-prepend">
              <span class="input-group-text" id="inputGroup-sizing-lg">Large</span>
            </div>
            <input type="text" class="form-control" aria-label="Large"
              aria-describedby="inputGroup-sizing-sm">
          </div>
          <h5 class="mt-5">Button Addons</h5>
          <hr>
          <div class="row">
            <div class="col-md-6">
              <div class="input-group mb-3">
                <div class="input-group-prepend">
                  <button class="btn btn-primary" type="button">Button</button>
                </div>
                <input type="text" class="form-control" placeholder="" aria-label=""
                  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">
                <div class="input-group-append">
                  <button class="btn btn-primary" type="button">Button</button>
                </div>
              </div>
            </div>
            <div class="col-md-6">
              <div class="input-group mb-3">
                <div class="input-group-prepend">
                  <button class="btn btn-primary" type="button">Button</button>
                  <button class="btn btn-secondary" type="button">Button</button>
                </div>
                <input type="text" class="form-control" placeholder="" aria-label=""
                  aria-describedby="basic-addon1">
              </div>
              <div class="input-group">
                <input type="text" class="form-control" placeholder="Recipient's username"
                  aria-label="Recipient's username" aria-describedby="basic-addon2">
                <div class="input-group-append">
                  <button class="btn btn-secondary" type="button">Button</button>
                  <button class="btn btn-primary" type="button">Button</button>
                </div>
              </div>
            </div>
            <div class="col-md-6">
              <h5 class="mt-5">Buttons With Dropdowns</h5>
              <hr>
              <div class="input-group mb-3">
                <div class="input-group-prepend">
                  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="false">Dropdown</button>
                  <div class="dropdown-menu">
                    <a class="dropdown-item" href="#!">Action</a>
                    <a class="dropdown-item" href="#!">Another action</a>
                    <a class="dropdown-item" href="#!">Something else here</a>
                    <div role="separator" class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#!">Separated link</a>
                  </div>
                </div>
                <input type="text" class="form-control" aria-label="Text input with dropdown button">
              </div>
              <div class="input-group">
                <input type="text" class="form-control" aria-label="Text input with dropdown button">
                <div class="input-group-append">
                  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="false">Dropdown</button>
                  <div class="dropdown-menu">
                    <a class="dropdown-item" href="#!">Action</a>
                    <a class="dropdown-item" href="#!">Another action</a>
                    <a class="dropdown-item" href="#!">Something else here</a>
                    <div role="separator" class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#!">Separated link</a>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-6">
              <h5 class="mt-5">Segmented Buttons</h5>
              <hr>
              <div class="input-group mb-3">
                <div class="input-group-prepend">
                  <button type="button" class="btn btn-secondary">Action</button>
                  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split"
                    data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span
                      class="sr-only">Toggle Dropdown</span></button>
                  <div class="dropdown-menu">
                    <a class="dropdown-item" href="#!">Action</a>
                    <a class="dropdown-item" href="#!">Another action</a>
                    <a class="dropdown-item" href="#!">Something else here</a>
                    <div role="separator" class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#!">Separated link</a>
                  </div>
                </div>
                <input type="text" class="form-control"
                  aria-label="Text input with segmented dropdown button">
              </div>
              <div class="input-group">
                <input type="text" class="form-control"
                  aria-label="Text input with segmented dropdown button">
                <div class="input-group-append">
                  <button type="button" class="btn btn-secondary">Action</button>
                  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split"
                    data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span
                      class="sr-only">Toggle Dropdown</span></button>
                  <div class="dropdown-menu">
                    <a class="dropdown-item" href="#!">Action</a>
                    <a class="dropdown-item" href="#!">Another action</a>
                    <a class="dropdown-item" href="#!">Something else here</a>
                    <div role="separator" class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#!">Separated link</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- [ Main Content ] end -->

{% endblock content %}