<!DOCTYPE html>

<html class="loading" lang="en" data-textdirection="ltr">
  <!-- BEGIN: Head-->
<?php include_once('head.php');?>
  <!-- END: Head-->

  <!-- BEGIN: Body-->
  <body class="vertical-layout vertical-menu-modern 2-columns navbar-sticky footer-static menu-expanded pace-done dark-layout" data-open="click" data-menu="vertical-menu-modern" data-col="2-columns">

    <!-- BEGIN: Header-->
    <?php include_once('header.php');?>
    <!-- END: Header-->

    <!-- BEGIN: Main Menu-->
    <?php include_once('sidemenu.php');?>
    <!-- END: Main Menu-->

    <!-- BEGIN: Content-->
    <div class="app-content content">
      <div class="content-overlay"></div>
      <div class="content-wrapper">
        <div class="content-header row"></div>
        <div class="content-body">
            <section id="basic-input">
                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">Basic Inputs</h4>
                            </div>
                            <div class="card-content">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <fieldset class="form-group">
                                                <label for="basicInput">Basic Input</label>
                                                <input type="text" class="form-control" id="basicInput"  placeholder="Enter email">
                                            </fieldset>
                                        </div>
                                        <div class="col-md-6">
                                            <fieldset class="form-group">
                                                <label for="helpInputTop">Input text with help</label>
                                                <small class="text-muted">eg.<i>someone@example.com</i></small>
                                                <input type="text" class="form-control" id="helpInputTop">
                                            </fieldset>
                                        </div>
                                        <div class="col-md-4">
                                            <fieldset class="form-group">
                                                <label for="helperText">With Helper Text</label>
                                                <input type="text" id="helperText" class="form-control" placeholder="Name">
                                                <p><small class="text-muted">Find helper text here for given textbox.</small></p>
                                            </fieldset>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <section id="input-file-browser">
                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">File Input & Check Box</h4>
                            </div>
                            <div class="card-content">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <fieldset class="form-group">
                                                <label for="basicInputFile">With Browse button</label>
                                                <div class="custom-file">
                                                    <input type="file" class="custom-file-input" id="inputGroupFile01">
                                                    <label class="custom-file-label" for="inputGroupFile01">Choose file</label>
                                                </div>
                                            </fieldset>
                                        </div>

                                        <div class="col-md-6">
                                            <fieldset>
                                                <label for="basicInputFile">Checkbox Details</label>
                                                <div class="input-group">
                                                    <div class="input-group-prepend">
                                                        <div class="input-group-text">
                                                            <div class="checkbox">
                                                                <input type="checkbox" class="checkbox__input" id="checkboxinput" name="checkbox"><label for="checkboxinput"> &nbsp;Item Name</label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <input type="number" class="form-control" aria-label="Text input with checkbox" value="1">
                                                </div>
                                            </fieldset>
                                        </div>
                                        <div class="col-md-4">
                                            <fieldset>

                                                <div class="checkbox">
                                                    <input type="checkbox" class="checkbox-input" id="checkbox1" checked="">
                                                    <label for="checkbox1">Touch me!</label>
                                                </div>
                                            </fieldset>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <section class="basic-select2">
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">Select2</h4>
                            </div>
                            <div class="card-content">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <label>Basic Select2</label>
                                            <div class="form-group">
                                                <select class="select2 form-control">
                                                    <option value="square">Square</option>
                                                    <option value="rectangle">Rectangle</option>
                                                    <option value="rombo">Rombo</option>
                                                    <option value="romboid">Romboid</option>
                                                    <option value="trapeze">Trapeze</option>
                                                    <option value="traible">Triangle</option>
                                                    <option value="polygon">Polygon</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <label>Single Select with Label</label>
                                            <div class="form-group">
                                                <select class="select2 form-control">
                                                    <optgroup label="Figures">
                                                        <option value="romboid">Romboid</option>
                                                        <option value="trapeze">Trapeze</option>
                                                        <option value="triangle">Triangle</option>
                                                        <option value="polygon">Polygon</option>
                                                    </optgroup>
                                                    <optgroup label="Colors">
                                                        <option value="red">Red</option>
                                                        <option value="green">Green</option>
                                                        <option value="blue">Blue</option>
                                                        <option value="purple">Purple</option>
                                                    </optgroup>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <label>Basic Multiple Select2</label>
                                            <div class="form-group">
                                                <select class="select2 form-control" multiple="multiple">
                                                    <option value="square">Square</option>
                                                    <option value="rectangle" selected>Rectangle</option>
                                                    <option value="rombo">Rombo</option>
                                                    <option value="romboid">Romboid</option>
                                                    <option value="trapeze">Trapeze</option>
                                                    <option value="traible" selected>Triangle</option>
                                                    <option value="polygon">Polygon</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <section class="basic-textarea">
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">Textarea</h4>
                            </div>
                            <div class="card-content">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <fieldset class="form-group">
                                                <label for="basicTextarea">Message</label>
                                                <textarea class="form-control" id="basicTextarea" rows="3" placeholder="Textarea"></textarea>
                                            </fieldset>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <section class="basic-textarea">
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">Date Picker</h4>
                            </div>
                            <div class="card-content">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-4">
                                            <fieldset class="form-group position-relative has-icon-left">
                                                <input type="text" class="form-control pickadate" placeholder="Select Date" value="24-02-2020">
                                                <div class="form-control-position">
                                                    <i class='bx bx-calendar'></i>
                                                </div>
                                            </fieldset>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
      </div>
    </div>
    <!-- END: Content-->

    <!-- BEGIN: Customizer-->
    <?php include_once('customizer.php');?>
    <!-- End: Customizer-->

    <!-- BEGIN: Footer-->
    <?php include_once('footer.php');?>
    <!-- END: Footer-->

    <?php include_once('foot.php');?>

  </body>
  <!-- END: Body-->
</html>