templates/form_elements/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block body %}
  6.                             <!-- PAGE-HEADER -->
  7.                             <div class="page-header">
  8.                                 <div>
  9.                                     <h1 class="page-title">Form Elements</h1>
  10.                                 </div>
  11.                                 <div class="ms-auto pageheader-btn">
  12.                                     <ol class="breadcrumb">
  13.                                         <li class="breadcrumb-item"><a href="javascript:void(0);">Forms</a></li>
  14.                                         <li class="breadcrumb-item active" aria-current="page">Form Elements</li>
  15.                                     </ol>
  16.                                 </div>
  17.                             </div>
  18.                             <!-- PAGE-HEADER END -->
  20.                             <!-- row -->
  21.                             <div class="row row-sm">
  22.                                 <div class="col-lg-6 col-xl-6 col-md-12 col-sm-12">
  23.                                     <div class="card box-shadow-0">
  24.                                         <div class="card-header border-bottom">
  25.                                             <h3 class="card-title">Default Form</h3>
  26.                                         </div>
  27.                                         <div class="card-body">
  28.                                             <p class="text-muted">It is Very Easy to Customize and it uses in your website apllication.</p>
  29.                                             <form class="form-horizontal" >
  30.                                                 <div class="form-group">
  31.                                                     <input type="text" class="form-control" id="inputName" placeholder="Name">
  32.                                                 </div>
  33.                                                 <div class="form-group">
  34.                                                     <input type="email" class="form-control" id="inputEmail2" placeholder="Email">
  35.                                                 </div>
  36.                                                 <div class="form-group">
  37.                                                     <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
  38.                                                 </div>
  39.                                                 <div class="form-group">
  40.                                                     <div class="checkbox">
  41.                                                         <div class="custom-checkbox custom-control">
  42.                                                             <input type="checkbox" data-checkboxes="mygroup" class="custom-control-input" id="checkbox-2">
  43.                                                             <label for="checkbox-2" class="custom-control-label">Check me Out</label>
  44.                                                         </div>
  45.                                                     </div>
  46.                                                 </div>
  47.                                                 <div class="form-group mt-3">
  48.                                                     <div>
  49.                                                         <button type="submit" class="btn btn-primary">Sign in</button>
  50.                                                         <button type="submit" class="btn btn-secondary">Cancel</button>
  51.                                                     </div>
  52.                                                 </div>
  53.                                             </form>
  54.                                         </div>
  55.                                     </div>
  56.                                 </div>
  57.                                 <div class="col-lg-6 col-xl-6 col-md-12 col-sm-12">
  58.                                     <div class="card box-shadow-0">
  59.                                         <div class="card-header border-bottom">
  60.                                             <h4 class="card-title">Vertical Form</h4>
  61.                                         </div>
  62.                                         <div class="card-body">
  63.                                             <p class="text-muted">It is Very Easy to Customize and it uses in your website apllication.</p>
  64.                                             <form >
  65.                                                 <div class="form-group">
  66.                                                     <label for="exampleInputEmail2">Email address</label>
  67.                                                     <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
  68.                                                 </div>
  69.                                                 <div class="form-group">
  70.                                                     <label for="exampleInputPassword2">Password</label>
  71.                                                     <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
  72.                                                 </div>
  73.                                                 <div class="checkbox">
  74.                                                     <div class="custom-checkbox custom-control">
  75.                                                         <input type="checkbox" data-checkboxes="mygroup" class="custom-control-input" id="checkbox-1">
  76.                                                         <label for="checkbox-1" class="custom-control-label mt-1">Check me Out</label>
  77.                                                     </div>
  78.                                                 </div>
  79.                                                 <button type="submit" class="btn btn-primary mt-3">Submit</button>
  80.                                             </form>
  81.                                         </div>
  82.                                     </div>
  83.                                 </div>
  84.                             </div>
  85.                             <!-- row -->
  87.                             <!-- Row -->
  88.                             <div class="row">
  89.                                 <div class="col-lg-12 col-md-12">
  90.                                     <div class="card">
  91.                                         <div class="card-header border-bottom">
  92.                                             <h3 class="card-title">Inputs & Textareas </h3>
  93.                                         </div>
  94.                                         <div class="card-body pb-2">
  95.                                             <div class="row row-sm">
  96.                                                 <div class="col-lg">
  97.                                                     <input class="form-control mb-4" placeholder="Input box" type="text">
  98.                                                 </div>
  99.                                                 <div class="col-lg">
  100.                                                     <input type="text" class="form-control mb-4" value="Readonly Text" placeholder="Input box (readonly)" readonly>
  101.                                                 </div>
  102.                                                 <div class="col-lg">
  103.                                                     <input type="text" class="form-control mb-4" placeholder="Input box (disabled)" disabled>
  104.                                                 </div>
  105.                                             </div>
  106.                                             <div class="row row-sm">
  107.                                                 <div class="col-lg">
  108.                                                     <textarea class="form-control mb-4" placeholder="Textarea" rows="3"></textarea>
  109.                                                 </div>
  110.                                                 <div class="col-lg">
  111.                                                     <textarea class="form-control mb-4" placeholder="Textarea (readonly)" rows="3" readonly>Readonly Text</textarea>
  112.                                                 </div>
  113.                                                 <div class="col-lg">
  114.                                                     <textarea class="form-control mb-4" placeholder="Texarea (disabled)" rows="3" disabled></textarea>
  115.                                                 </div>
  116.                                             </div>
  117.                                         </div>
  118.                                     </div>
  119.                                     <div class="card">
  120.                                         <div class="card-header border-bottom">
  121.                                             <h3 class="card-title">Input Sizes</h3>
  122.                                         </div>
  123.                                         <div class="card-body">
  124.                                             <div class="row row-sm">
  125.                                                 <div class="col-lg">
  126.                                                     <input class="form-control form-control-sm  mb-4" placeholder="Input sm box" type="text">
  127.                                                     <input class="form-control  mb-4" placeholder="Input box" type="text">
  128.                                                     <input class="form-control form-control-lg" placeholder="Input lg box" type="text">
  129.                                                 </div>
  130.                                             </div>
  131.                                         </div>
  132.                                     </div>
  133.                                     <div class="card">
  134.                                         <div class="card-header border-bottom">
  135.                                             <h3 class="card-title">Valid Inputs</h3>
  136.                                         </div>
  137.                                         <div class="card-body pb-2">
  138.                                             <form class="needs-validation was-validated">
  139.                                                 <div class="row row-sm">
  140.                                                     <div class="col-lg-6">
  141.                                                         <div class="form-group">
  142.                                                             <input class="form-control  mb-4 is-valid state-valid" placeholder="Input box (success state)" required="" type="text" value="This is input">
  143.                                                             <textarea class="form-control mb-4 is-valid state-valid" placeholder="Textarea (success state)" required="" rows="3">This is textarea</textarea>
  144.                                                         </div>
  145.                                                     </div>
  146.                                                     <div class="col-lg-6">
  147.                                                         <div class="form-group">
  148.                                                             <input class="form-control mb-4 is-invalid state-invalid" placeholder="Input box (invalid state)" required="" type="text">
  149.                                                             <textarea class="form-control mb-4 is-invalid state-invalid" placeholder="Textarea (invalid state)" required="" rows="3"></textarea>
  150.                                                         </div>
  151.                                                     </div>
  152.                                                 </div>
  153.                                             </form>
  154.                                         </div>
  155.                                     </div>
  156.                                     <div class="card">
  157.                                         <div class="card-header border-bottom">
  158.                                             <h3 class="card-title">Input Groups</h3>
  159.                                         </div>
  160.                                         <div class="card-body">
  161.                                             <div class="row row-sm">
  162.                                                 <div class="col-sm-12 col-md-12 col-lg-6">
  163.                                                     <div class="form-group">
  164.                                                         <label class="form-label" for="search-box">Input group</label>
  165.                                                         <div class="input-group">
  166.                                                             <input type="text" class="form-control" id="search-box" placeholder="Search for...">
  167.                                                             <button class="input-group-text btn btn-primary text-white">Go!</button>
  168.                                                         </div>
  169.                                                     </div>
  170.                                                 </div>
  171.                                                 <div class="col-md-12 col-lg-6">
  172.                                                     <div class="form-group">
  173.                                                         <label class="form-label" for="basic-addon6">Input Group With Search</label>
  174.                                                         <div class="input-group">
  175.                                                             <input class="form-control" id="basic-addon6" placeholder="Search for..." type="text">
  176.                                                             <button class="btn btn-primary text-white" type="button"><i class="fa fa-search"></i></button>
  177.                                                         </div>
  178.                                                     </div>
  179.                                                 </div>
  180.                                                 <div class="col-md-12 col-lg-6">
  181.                                                     <div class="form-group">
  182.                                                         <label class="form-label" for="separated-input">Separated inputs</label>
  183.                                                         <div class="row ">
  184.                                                             <div class="col">
  185.                                                                 <input type="text" class="form-control" id="separated-input" placeholder="Search for...">
  186.                                                             </div>
  187.                                                             <span class="col-auto">
  188.                                                                 <button class="btn btn-primary text-white p-2 d-flex align-items-center justify-content-center" ><i class="fe fe-search"></i></button>
  189.                                                             </span>
  190.                                                         </div>
  191.                                                     </div>
  192.                                                 </div>
  193.                                                 <div class="col-md-12 col-lg-6">
  194.                                                     <div class="form-group">
  195.                                                         <label class="form-label" for="basic-addon4">Input Group With Checkbox</label>
  196.                                                         <div class="input-group">
  197.                                                             <div class="input-group-text bg-primary-transparent text-primary">
  198.                                                                 <label class="ckbox mb-0"><input class="mg-0" type="checkbox"><span></span></label>
  199.                                                             </div>
  200.                                                             <input class="form-control" id="basic-addon4" placeholder="Text input with checkbox" type="text">
  201.                                                         </div>
  202.                                                     </div>
  203.                                                 </div>
  204.                                                 <div class="col-md-12 col-lg-6">
  205.                                                     <div class="form-group">
  206.                                                         <label class="form-label" for="basic-addon5">Input Group With Radio</label>
  207.                                                         <div class="input-group">
  208.                                                             <div class="input-group-text bg-primary-transparent text-primary">
  209.                                                                 <label class="rdiobox mb-0"><input type="radio"><span></span></label>
  210.                                                             </div>
  211.                                                             <input class="form-control" id="basic-addon5" placeholder="Text input with radiobox" type="text">
  212.                                                         </div>
  213.                                                     </div>
  214.                                                 </div>
  215.                                                 <div class="col-md-12 col-lg-6">
  216.                                                     <div class="form-group">
  217.                                                         <label class="form-label" for="basic-addon">Input Group Style-01</label>
  218.                                                         <div class="input-group mb-3">
  219.                                                             <span class="input-group-text bg-primary-transparent text-primary" id="basic-addon1">@</span>
  220.                                                             <input aria-describedby="basic-addon1" id="basic-addon" aria-label="Username" class="form-control" placeholder="Username" type="text">
  221.                                                         </div>
  222.                                                     </div>
  223.                                                 </div>
  224.                                                 <div class="col-md-12 col-lg-6">
  225.                                                     <div class="form-group">
  226.                                                         <label class="form-label" for="basic-addon2">Input Group Style-02</label>
  227.                                                         <div class="input-group mb-3">
  228.                                                             <input aria-describedby="basic-addon2" id="basic-addon2" aria-label="Recipient's username" class="form-control" placeholder="Recipient's username" type="text">
  229.                                                             <span class="input-group-text bg-primary-transparent text-primary">@example.com</span>
  230.                                                         </div>
  231.                                                     </div>
  232.                                                 </div>
  233.                                                 <div class="col-md-12 col-lg-6">
  234.                                                     <div class="form-group">
  235.                                                         <label class="form-label" for="basic-addon3">Input Group Style-03</label>
  236.                                                         <div class="input-group mb-3">
  237.                                                             <span class="input-group-text bg-primary-transparent text-primary">$</span>
  238.                                                             <input aria-label="Amount (to the nearest dollar)" class="form-control" placeholder="Enter amount in dollars" id="basic-addon3" type="number">
  239.                                                             <span class="input-group-text bg-primary-transparent text-primary">.00</span>
  240.                                                         </div>
  241.                                                     </div>
  242.                                                 </div>
  243.                                             </div>
  244.                                         </div>
  245.                                     </div>
  246.                                 </div>
  247.                             </div>
  248.                             <!-- End Row -->
  250.                             <!-- Row -->
  251.                             <div class="row">
  252.                                 <div class="col-lg-12 col-md-12">
  253.                                     <div class="card">
  254.                                         <div class="card-header border-bottom">
  255.                                             <h3 class="card-title">File Browsers</h3>
  256.                                         </div>
  257.                                         <div class="card-body">
  258.                                             <div class="row row-sm">
  259.                                                 <div class="col-sm-12 col-md-12 col-lg-12">
  260.                                                     <div class="form-group">
  261.                                                         <label for="formFile" class="form-label">Default file input example</label>
  262.                                                         <input class="form-control file-input" type="file" id="formFile">
  263.                                                     </div>
  264.                                                     <div class="form-group">
  265.                                                         <label for="formFileMultiple" class="form-label">Multiple files input example</label>
  266.                                                         <input class="form-control file-input" type="file" id="formFileMultiple" multiple>
  267.                                                     </div>
  268.                                                     <div class="form-group">
  269.                                                         <label for="formFileDisabled" class="form-label">Disabled file input example</label>
  270.                                                         <input class="form-control file-input" type="file" id="formFileDisabled" disabled>
  271.                                                     </div>
  272.                                                     <div class="form-group">
  273.                                                         <label for="formFileSm" class="form-label">Small file input example</label>
  274.                                                         <input class="form-control file-input form-control-sm" id="formFileSm" type="file">
  275.                                                     </div>
  276.                                                     <div class="form-group">
  277.                                                         <label for="formFileLg" class="form-label">Large file input example</label>
  278.                                                         <input class="form-control file-input form-control-lg" id="formFileLg" type="file">
  279.                                                     </div>
  280.                                                 </div>
  281.                                             </div>
  282.                                         </div>
  283.                                     </div>
  284.                                 </div>
  285.                             </div>
  286.                             <!-- Row Closed-->
  288.                             <!-- Row -->
  289.                             <div class="row row-deck">
  290.                                 <div class="col-md-12 col-lg-12">
  291.                                     <div class="card">
  292.                                         <div class="card-header border-bottom">
  293.                                             <h3 class="card-title">Custom Checkboxes &amp; Radios</h3>
  294.                                         </div>
  295.                                         <div class="card-body">
  296.                                             <div class="row">
  297.                                                 <div class="col-lg-4">
  298.                                                     <label class="ckbox" for="ckbox-unchecked"><input type="checkbox" id="ckbox-unchecked"><span>Checkbox Unchecked</span></label>
  299.                                                 </div>
  300.                                                 <div class="col-lg-4">
  301.                                                     <label class="ckbox" for="ckbox-checked"><input checked type="checkbox" id="ckbox-checked"><span>Checkbox Checked</span></label>
  302.                                                 </div>
  303.                                                 <div class="col-lg-4">
  304.                                                     <label class="ckbox" for="ckbox-disabled"><input disabled type="checkbox" id="ckbox-disabled"><span>Checkbox Disabled</span></label>
  305.                                                 </div>
  306.                                             </div>
  307.                                             <div class="row">
  308.                                                 <div class="col-lg-4">
  309.                                                     <label class="rdiobox" for="rdio-unchecked"><input name="rdio" type="radio" id="rdio-unchecked"> <span>Radio Unchecked</span></label>
  310.                                                 </div>
  311.                                                 <div class="col-lg-4">
  312.                                                     <label class="rdiobox" for="rdio-checked"><input checked name="rdio" type="radio" id="rdio-checked"> <span>Radio Checked</span></label>
  313.                                                 </div>
  314.                                                 <div class="col-lg-4">
  315.                                                     <label class="rdiobox" for="rdio-disabled"><input disabled name="rdio" type="radio" id="rdio-disabled"> <span>Radio Disabled</span></label>
  316.                                                 </div>
  317.                                             </div>
  318.                                         </div>
  319.                                     </div>
  320.                                 </div>
  321.                             </div>
  322.                             <!-- Row Closed -->
  324.                             <!-- Row -->
  325.                             <div class="row">
  326.                                 <div class="col-md-12">
  327.                                     <div class="card">
  328.                                         <div class="card-header border-bottom">
  329.                                             <h3 class="card-title">Checkbox Styles</h3>
  330.                                         </div>
  331.                                         <div class="card-body">
  332.                                             <div class="row">
  333.                                                 <div class="col-md-12 col-lg-6 my-1">
  334.                                                     <div class="example">
  335.                                                         <div class="form-group ">
  336.                                                             <p class="card-sub-title">Checkbox Style-01</p>
  337.                                                             <div class="selectgroup selectgroup-pills">
  338.                                                                 <label class="selectgroup-item">
  339.                                                                     <input type="checkbox" name="value" value="HTML" class="selectgroup-input" checked>
  340.                                                                     <span class="selectgroup-button">HTML</span>
  341.                                                                 </label>
  342.                                                                 <label class="selectgroup-item">
  343.                                                                     <input type="checkbox" name="value" value="CSS" class="selectgroup-input">
  344.                                                                     <span class="selectgroup-button">CSS</span>
  345.                                                                 </label>
  346.                                                                 <label class="selectgroup-item">
  347.                                                                     <input type="checkbox" name="value" value="PHP" class="selectgroup-input">
  348.                                                                     <span class="selectgroup-button">PHP</span>
  349.                                                                 </label>
  350.                                                                 <label class="selectgroup-item">
  351.                                                                     <input type="checkbox" name="value" value="JavaScript" class="selectgroup-input">
  352.                                                                     <span class="selectgroup-button">JavaScript</span>
  353.                                                                 </label>
  354.                                                                 <label class="selectgroup-item">
  355.                                                                     <input type="checkbox" name="value" value="Angular" class="selectgroup-input">
  356.                                                                     <span class="selectgroup-button">Angular</span>
  357.                                                                 </label>
  358.                                                                 <label class="selectgroup-item">
  359.                                                                     <input type="checkbox" name="value" value="Java" class="selectgroup-input">
  360.                                                                     <span class="selectgroup-button">Java</span>
  361.                                                                 </label>
  362.                                                                 <label class="selectgroup-item">
  363.                                                                     <input type="checkbox" name="value" value="C++" class="selectgroup-input">
  364.                                                                     <span class="selectgroup-button">C++</span>
  365.                                                                 </label>
  366.                                                             </div>
  367.                                                         </div>
  368.                                                     </div>
  369.                                                 </div>
  370.                                                 <div class="col-md-12 col-lg-6 my-1">
  371.                                                     <div class="example">
  372.                                                         <div class="form-group m-0">
  373.                                                             <p class="card-sub-title">Checkbox Sytle-02</p>
  374.                                                             <div class="row ">
  375.                                                                 <div class="col-auto">
  376.                                                                     <label class="colorinput">
  377.                                                                         <input name="color" type="checkbox" value="azure" class="colorinput-input" checked />
  378.                                                                         <span class="colorinput-color bg-azure"></span>
  379.                                                                     </label>
  380.                                                                 </div>
  381.                                                                 <div class="col-auto">
  382.                                                                     <label class="colorinput">
  383.                                                                         <input name="color" type="checkbox" value="indigo" class="colorinput-input"  />
  384.                                                                         <span class="colorinput-color bg-indigo"></span>
  385.                                                                     </label>
  386.                                                                 </div>
  387.                                                                 <div class="col-auto">
  388.                                                                     <label class="colorinput">
  389.                                                                         <input name="color" type="checkbox" value="purple" class="colorinput-input" />
  390.                                                                         <span class="colorinput-color bg-purple"></span>
  391.                                                                     </label>
  392.                                                                 </div>
  393.                                                                 <div class="col-auto">
  394.                                                                     <label class="colorinput">
  395.                                                                         <input name="color" type="checkbox" value="pink" class="colorinput-input" />
  396.                                                                         <span class="colorinput-color bg-pink"></span>
  397.                                                                     </label>
  398.                                                                 </div>
  399.                                                                 <div class="col-auto">
  400.                                                                     <label class="colorinput">
  401.                                                                         <input name="color" type="checkbox" value="red" class="colorinput-input" />
  402.                                                                         <span class="colorinput-color bg-red"></span>
  403.                                                                     </label>
  404.                                                                 </div>
  405.                                                                 <div class="col-auto">
  406.                                                                     <label class="colorinput">
  407.                                                                         <input name="color" type="checkbox" value="orange" class="colorinput-input" />
  408.                                                                         <span class="colorinput-color bg-orange"></span>
  409.                                                                     </label>
  410.                                                                 </div>
  411.                                                                 <div class="col-auto">
  412.                                                                     <label class="colorinput">
  413.                                                                         <input name="color" type="checkbox" value="yellow" class="colorinput-input" />
  414.                                                                         <span class="colorinput-color bg-yellow"></span>
  415.                                                                     </label>
  416.                                                                 </div>
  417.                                                                 <div class="col-auto">
  418.                                                                     <label class="colorinput">
  419.                                                                         <input name="color" type="checkbox" value="lime" class="colorinput-input" />
  420.                                                                         <span class="colorinput-color bg-lime"></span>
  421.                                                                     </label>
  422.                                                                 </div>
  423.                                                                 <div class="col-auto">
  424.                                                                     <label class="colorinput">
  425.                                                                         <input name="color" type="checkbox" value="green" class="colorinput-input" />
  426.                                                                         <span class="colorinput-color bg-green"></span>
  427.                                                                     </label>
  428.                                                                 </div>
  429.                                                                 <div class="col-auto">
  430.                                                                     <label class="colorinput">
  431.                                                                         <input name="color" type="checkbox" value="teal" class="colorinput-input" />
  432.                                                                         <span class="colorinput-color bg-teal"></span>
  433.                                                                     </label>
  434.                                                                 </div>
  435.                                                             </div>
  436.                                                         </div>
  437.                                                     </div>
  438.                                                 </div>
  439.                                             </div>
  440.                                         </div>
  441.                                     </div>
  442.                                 </div>
  443.                                 <div class="col-md-12">
  444.                                     <div class="card">
  445.                                         <div class="card-header border-bottom">
  446.                                             <h3 class="card-title">Radio Button Styles</h3>
  447.                                         </div>
  448.                                         <div class="card-body">
  449.                                             <p class="text-muted">User <span class="tag">radio-*</span> to obtain colored radio buttons</p>
  450.                                             <div class="example">
  451.                                                 <div class="row">
  452.                                                     <div class="col-lg-6 col-sm-12">
  453.                                                         <label class="rdiobox" for="rdio-primary-unchecked">
  454.                                                             <input name="rdio-primary" type="radio" class="radio-primary" id="rdio-primary-unchecked">
  455.                                                             <span>Primary</span>
  456.                                                         </label>
  457.                                                     </div>
  458.                                                     <div class="col-lg-6 col-sm-12">
  459.                                                         <label class="rdiobox" for="rdio-secondary-unchecked">
  460.                                                             <input name="rdio-secondary" type="radio" class="radio-secondary" id="rdio-secondary-unchecked">
  461.                                                             <span>Secondary</span>
  462.                                                         </label>
  463.                                                     </div>
  464.                                                 </div>
  465.                                                 <div class="row">
  466.                                                     <div class="col-lg-6 col-sm-12">
  467.                                                         <label class="rdiobox" for="rdio-primary">
  468.                                                             <input checked name="rdio-primary" type="radio" class="radio-primary" id="rdio-primary">
  469.                                                             <span>Primary</span>
  470.                                                         </label>
  471.                                                     </div>
  472.                                                     <div class="col-lg-6 col-sm-12">
  473.                                                         <label class="rdiobox" for="rdio-secondary">
  474.                                                             <input checked name="rdio-secondary" type="radio" class="radio-secondary" id="rdio-secondary">
  475.                                                             <span>Secondary</span>
  476.                                                         </label>
  477.                                                     </div>
  478.                                                 </div>
  479.                                             </div>
  480.                                         </div>
  481.                                     </div>
  482.                                 </div>
  483.                             </div>
  484.                             <!-- Row Closed -->
  486.                             <!-- Row -->
  487.                             <div class="row">
  488.                                 <div class="col-md-12">
  489.                                     <div class="card">
  490.                                         <div class="card-header border-bottom">
  491.                                             <h3 class="card-title">Range Inputs</h3>
  492.                                         </div>
  493.                                         <div class="card-body">
  494.                                             <div class="example">
  495.                                                 <div class="row">
  496.                                                     <div class="col-md-12 col-xl-6">
  497.                                                         <div class="form-group col-md-8">
  498.                                                             <label class="form-label">Default Range Input</label>
  499.                                                             <input type="range" class="w-100">
  500.                                                         </div>
  501.                                                     </div>
  502.                                                     <div class="col-md-12 col-xl-6">
  503.                                                         <div class="form-group col-md-8">
  504.                                                             <label class="form-label">Customized Input</label>
  505.                                                             <input type="range" class="form-range-control">
  506.                                                         </div>
  507.                                                     </div>
  508.                                                     <div class="col-md-12 col-xl-6">
  509.                                                         <div class="form-group col-md-8">
  510.                                                             <label class="form-label">Step Size Input Range</label>
  511.                                                             <input type="range" class="form-range-control" min="0" max="5" value="2">
  512.                                                         </div>
  513.                                                     </div>
  514.                                                     <div class="col-md-12 col-xl-6">
  515.                                                         <div class="form-group col-md-8">
  516.                                                             <label class="form-label">Disabled Input</label>
  517.                                                             <input type="range" class="form-range-control" disabled>
  518.                                                         </div>
  519.                                                     </div>
  520.                                                 </div>
  521.                                             </div>
  522.                                         </div>
  523.                                     </div>
  524.                                 </div>
  525.                                 <div class="col-md-12">
  526.                                     <div class="card">
  527.                                         <div class="card-header border-bottom">
  528.                                             <h3 class="card-title">Input Range Styles</h3>
  529.                                         </div>
  530.                                         <div class="card-body">
  531.                                             <div class="example">
  532.                                                 <div class="row">
  533.                                                     <div class="col-md-12 col-xl-6">
  534.                                                         <div class="form-group col-md-8">
  535.                                                             <label class="form-label">Input Range with counter</label>
  536.                                                             <div class="range-group">
  537.                                                                 <input type="range" class="form-range-control" min="0" max="100" value="10" onmousemove="inputRange1.value=value">
  538.                                                                 <output class="border range-group-text br-5 p-2 ms-4" id="inputRange1"></output>
  539.                                                             </div>
  540.                                                         </div>
  541.                                                     </div>
  542.                                                     <div class="col-md-12 col-xl-6">
  543.                                                         <div class="form-group col-md-8">
  544.                                                             <label class="form-label">Input Range Color</label>
  545.                                                             <input type="range" class="form-range-control range-primary">
  546.                                                         </div>
  547.                                                         <p class="text-muted">Use <span class="tag">form-range-conrol range-*</span> class to obtain colored input range.</p>
  548.                                                     </div>
  549.                                                 </div>
  550.                                             </div>
  551.                                         </div>
  552.                                     </div>
  553.                                 </div>
  554.                             </div>
  555.                             <!-- Row Closed -->
  557.                             <!-- Row -->
  558.                             <div class="row">
  559.                                 <div class="col-md-12">
  560.                                     <div class="card">
  561.                                         <div class="card-header border-bottom">
  562.                                             <h3 class="card-title">Toggle Switches</h3>
  563.                                         </div>
  564.                                         <div class="card-body">
  565.                                             <div class="row">
  566.                                                 <div class="col-md-12 col-lg-6 my-1">
  567.                                                     <div class="example">
  568.                                                         <p class="card-sub-title">Default Switch</p>
  569.                                                         <div class="main-toggle-group d-flex flex-wrap">
  570.                                                             <div class="toggle">
  571.                                                                 <span></span>
  572.                                                             </div>
  573.                                                             <div class="toggle toggle-secondary">
  574.                                                                 <span></span>
  575.                                                             </div>
  576.                                                             <div class="toggle toggle-success">
  577.                                                                 <span></span>
  578.                                                             </div>
  579.                                                             <div class="toggle toggle-info">
  580.                                                                 <span></span>
  581.                                                             </div>
  582.                                                             <div class="toggle toggle-warning">
  583.                                                                 <span></span>
  584.                                                             </div>
  585.                                                             <div class="toggle toggle-danger">
  586.                                                                 <span></span>
  587.                                                             </div>
  588.                                                             <div class="toggle toggle-dark">
  589.                                                                 <span></span>
  590.                                                             </div>
  591.                                                             <div class="toggle toggle-light">
  592.                                                                 <span></span>
  593.                                                             </div>
  594.                                                         </div>
  595.                                                         <div class="main-toggle-group d-flex flex-wrap mt-3">
  596.                                                             <div class="toggle on">
  597.                                                                 <span></span>
  598.                                                             </div>
  599.                                                             <div class="toggle toggle-secondary on">
  600.                                                                 <span></span>
  601.                                                             </div>
  602.                                                             <div class="toggle toggle-success on">
  603.                                                                 <span></span>
  604.                                                             </div>
  605.                                                             <div class="toggle toggle-info on">
  606.                                                                 <span></span>
  607.                                                             </div>
  608.                                                             <div class="toggle toggle-warning on">
  609.                                                                 <span></span>
  610.                                                             </div>
  611.                                                             <div class="toggle toggle-danger on">
  612.                                                                 <span></span>
  613.                                                             </div>
  614.                                                             <div class="toggle toggle-dark on">
  615.                                                                 <span></span>
  616.                                                             </div>
  617.                                                             <div class="toggle toggle-light on">
  618.                                                                 <span></span>
  619.                                                             </div>
  620.                                                         </div>
  621.                                                     </div>
  622.                                                 </div>
  623.                                                 <div class="col-md-12 col-lg-6 my-1">
  624.                                                     <div class="example">
  625.                                                         <p class="card-sub-title">Toggle Switch Style-01</p>
  626.                                                         <div class="main-toggle-group style1 d-flex flex-wrap">
  627.                                                             <div class="toggle">
  628.                                                                 <span></span>
  629.                                                             </div>
  630.                                                             <div class="toggle toggle-secondary">
  631.                                                                 <span></span>
  632.                                                             </div>
  633.                                                             <div class="toggle toggle-success">
  634.                                                                 <span></span>
  635.                                                             </div>
  636.                                                             <div class="toggle toggle-info">
  637.                                                                 <span></span>
  638.                                                             </div>
  639.                                                             <div class="toggle toggle-warning">
  640.                                                                 <span></span>
  641.                                                             </div>
  642.                                                             <div class="toggle toggle-danger">
  643.                                                                 <span></span>
  644.                                                             </div>
  645.                                                             <div class="toggle toggle-dark">
  646.                                                                 <span></span>
  647.                                                             </div>
  648.                                                             <div class="toggle toggle-light">
  649.                                                                 <span></span>
  650.                                                             </div>
  651.                                                         </div>
  652.                                                         <div class="main-toggle-group style1 d-flex flex-wrap mt-3">
  653.                                                             <div class="toggle on">
  654.                                                                 <span></span>
  655.                                                             </div>
  656.                                                             <div class="toggle toggle-secondary on">
  657.                                                                 <span></span>
  658.                                                             </div>
  659.                                                             <div class="toggle toggle-success on">
  660.                                                                 <span></span>
  661.                                                             </div>
  662.                                                             <div class="toggle toggle-info on">
  663.                                                                 <span></span>
  664.                                                             </div>
  665.                                                             <div class="toggle toggle-warning on">
  666.                                                                 <span></span>
  667.                                                             </div>
  668.                                                             <div class="toggle toggle-danger on">
  669.                                                                 <span></span>
  670.                                                             </div>
  671.                                                             <div class="toggle toggle-dark on">
  672.                                                                 <span></span>
  673.                                                             </div>
  674.                                                             <div class="toggle toggle-light on">
  675.                                                                 <span></span>
  676.                                                             </div>
  677.                                                         </div>
  678.                                                     </div>
  679.                                                 </div>
  680.                                                 <div class="col-md-12 mt-2">
  681.                                                     <div class="example">
  682.                                                         <p class="card-sub-title">Toggle Switch Style-02</p>
  683.                                                         <div class="d-flex flex-wrap">
  684.                                                             <div class="material-switch">
  685.                                                                 <input id="uncheckedPrimarySwitch" name="switch01" type="checkbox"/>
  686.                                                                 <label for="uncheckedPrimarySwitch" class="label-primary"></label>
  687.                                                             </div>
  688.                                                             <div class="material-switch">
  689.                                                                 <input id="uncheckedSecondarySwitch" name="switch02" type="checkbox" />
  690.                                                                 <label for="uncheckedSecondarySwitch" class="label-secondary"></label>
  691.                                                             </div>
  692.                                                             <div class="material-switch">
  693.                                                                 <input id="uncheckedSuccessSwitch" name="switch03" type="checkbox"/>
  694.                                                                 <label for="uncheckedSuccessSwitch" class="label-success"></label>
  695.                                                             </div>
  696.                                                             <div class="material-switch">
  697.                                                                 <input id="uncheckedInfoSwitch" name="siwtch04" type="checkbox"/>
  698.                                                                 <label for="uncheckedInfoSwitch" class="label-info"></label>
  699.                                                             </div>
  700.                                                             <div class="material-switch">
  701.                                                                 <input id="uncheckedWarningSwitch" name="switch05" type="checkbox"/>
  702.                                                                 <label for="uncheckedWarningSwitch" class="label-warning"></label>
  703.                                                             </div>
  704.                                                             <div class="material-switch">
  705.                                                                 <input id="uncheckedDangerSwitch" name="switch06" type="checkbox"/>
  706.                                                                 <label for="uncheckedDangerSwitch" class="label-danger"></label>
  707.                                                             </div>
  708.                                                             <div class="material-switch">
  709.                                                                 <input id="uncheckedDarkSwitch" name="switch07" type="checkbox" />
  710.                                                                 <label for="uncheckedDarkSwitch" class="label-dark"></label>
  711.                                                             </div>
  712.                                                             <div class="material-switch">
  713.                                                                 <input id="uncheckedLightSwitch" name="switch08" type="checkbox" />
  714.                                                                 <label for="uncheckedLightSwitch" class="label-light"></label>
  715.                                                             </div>
  716.                                                         </div>
  717.                                                         <div class="d-flex flex-wrap mt-3">
  718.                                                             <div class="material-switch">
  719.                                                                 <input id="someSwitchOptionPrimary" name="someSwitchOption001" type="checkbox" checked/>
  720.                                                                 <label for="someSwitchOptionPrimary" class="label-primary"></label>
  721.                                                             </div>
  722.                                                             <div class="material-switch">
  723.                                                                 <input id="someSwitchOptionSecondary" name="someSwitchOption002" type="checkbox" checked />
  724.                                                                 <label for="someSwitchOptionSecondary" class="label-secondary"></label>
  725.                                                             </div>
  726.                                                             <div class="material-switch">
  727.                                                                 <input id="someSwitchOptionSuccess" name="someSwitchOption003" type="checkbox" checked/>
  728.                                                                 <label for="someSwitchOptionSuccess" class="label-success"></label>
  729.                                                             </div>
  730.                                                             <div class="material-switch">
  731.                                                                 <input id="someSwitchOptionInfo" name="someSwitchOption004" type="checkbox" checked/>
  732.                                                                 <label for="someSwitchOptionInfo" class="label-info"></label>
  733.                                                             </div>
  734.                                                             <div class="material-switch">
  735.                                                                 <input id="someSwitchOptionWarning" name="someSwitchOption005" type="checkbox" checked/>
  736.                                                                 <label for="someSwitchOptionWarning" class="label-warning"></label>
  737.                                                             </div>
  738.                                                             <div class="material-switch">
  739.                                                                 <input id="someSwitchOptionDanger" name="someSwitchOption006" type="checkbox" checked/>
  740.                                                                 <label for="someSwitchOptionDanger" class="label-danger"></label>
  741.                                                             </div>
  742.                                                             <div class="material-switch">
  743.                                                                 <input id="someSwitchOptionDark" name="someSwitchOption007" type="checkbox" checked />
  744.                                                                 <label for="someSwitchOptionDark" class="label-dark"></label>
  745.                                                             </div>
  746.                                                             <div class="material-switch">
  747.                                                                 <input id="someSwitchOptionLight" name="someSwitchOption008" type="checkbox" checked />
  748.                                                                 <label for="someSwitchOptionLight" class="label-light"></label>
  749.                                                             </div>
  750.                                                         </div>
  751.                                                     </div>
  752.                                                 </div>
  753.                                             </div>
  754.                                         </div>
  755.                                     </div>
  756.                                 </div>
  757.                             </div>
  758.                             <!-- Row Closed -->
  760.                             <!-- Row -->
  761.                             <div class="row">
  762.                                 <div class="col-md-12">
  763.                                     <div class="card">
  764.                                         <div class="card-header border-bottom">
  765.                                             <h3 class="card-title">Switch Sizes</h3>
  766.                                         </div>
  767.                                         <div class="card-body">
  768.                                             <div class="row">
  769.                                                 <div class="col-md-12 col-lg-12 col-xl-6">
  770.                                                     <div class="example my-2">
  771.                                                         <div class="main-toggle-group d-sm-flex align-items-center mt-3">
  772.                                                             <div class="">
  773.                                                                 <p class="text-muted m-0">Small size toggle switch <span class="tag">toggle-sm</span></p>
  774.                                                             </div>
  775.                                                             <div class="toggle toggle-sm my-1 on">
  776.                                                                 <span></span>
  777.                                                             </div>
  778.                                                         </div>
  779.                                                         <div class="main-toggle-group d-sm-flex align-items-center my-4">
  780.                                                             <div class="">
  781.                                                                 <p class="text-muted m-0">Default toggle switch</p>
  782.                                                             </div>
  783.                                                             <div class="toggle toggle-secondary my-1 on">
  784.                                                                 <span></span>
  785.                                                             </div>
  786.                                                         </div>
  787.                                                         <div class="main-toggle-group d-sm-flex align-items-center">
  788.                                                             <div class="">
  789.                                                                 <p class="text-muted m-0">Large size toggle switch <span class="tag">toggle-lg</span></p>
  790.                                                             </div>
  791.                                                             <div class="toggle toggle-lg toggle-success my-1 on">
  792.                                                                 <span></span>
  793.                                                             </div>
  794.                                                         </div>
  795.                                                     </div>
  796.                                                 </div>
  797.                                                 <div class="col-md-12 col-lg-12 col-xl-6">
  798.                                                     <div class="example my-2">
  799.                                                         <div class="main-toggle-group style1 d-sm-flex align-items-center mt-3">
  800.                                                             <div class="">
  801.                                                                 <p class="text-muted m-0">Small size toggle switch <span class="tag">toggle-sm</span></p>
  802.                                                             </div>
  803.                                                             <div class="toggle toggle-sm my-1 on">
  804.                                                                 <span></span>
  805.                                                             </div>
  806.                                                         </div>
  807.                                                         <div class="main-toggle-group style1 d-sm-flex align-items-center my-4">
  808.                                                             <div class="">
  809.                                                                 <p class="text-muted m-0">Default toggle switch</p>
  810.                                                             </div>
  811.                                                             <div class="toggle toggle-secondary my-1 on">
  812.                                                                 <span></span>
  813.                                                             </div>
  814.                                                         </div>
  815.                                                         <div class="main-toggle-group style1 d-sm-flex align-items-center">
  816.                                                             <div class="">
  817.                                                                 <p class="text-muted m-0">Large size toggle switch <span class="tag">toggle-lg</span></p>
  818.                                                             </div>
  819.                                                             <div class="toggle toggle-lg toggle-success my-1 on">
  820.                                                                 <span></span>
  821.                                                             </div>
  822.                                                         </div>
  823.                                                     </div>
  824.                                                 </div>
  825.                                                 <div class="col-md-12 mt-2">
  826.                                                     <div class="example">
  827.                                                         <div class="d-sm-flex align-items-center">
  828.                                                             <div class="">
  829.                                                                 <p class="text-muted m-0">Small size toggle switch <span class="tag">toggle-sm</span></p>
  830.                                                             </div>
  831.                                                             <div class="material-switch toggle-sm">
  832.                                                                 <input id="smallSwitchPrimary" name="smallSwitch" type="checkbox" checked/>
  833.                                                                 <label for="smallSwitchPrimary" class="label-primary"></label>
  834.                                                             </div>
  835.                                                         </div>
  836.                                                         <div class="d-sm-flex align-items-center my-3">
  837.                                                             <div class="">
  838.                                                                 <p class="text-muted m-0">medium size toggle switch</p>
  839.                                                             </div>
  840.                                                             <div class="material-switch">
  841.                                                                 <input id="defaultSwitchSecondary" name="defaultSwitch" type="checkbox" checked />
  842.                                                                 <label for="defaultSwitchSecondary" class="label-secondary"></label>
  843.                                                             </div>
  844.                                                         </div>
  845.                                                         <div class="d-sm-flex align-items-center">
  846.                                                             <div class="">
  847.                                                                 <p class="text-muted m-0">large size toggle switch <span class="tag">toggle-lg</span></p>
  848.                                                             </div>
  849.                                                             <div class="material-switch toggle-lg">
  850.                                                                 <input id="largeSwitchSuccess" name="largeSwitch" type="checkbox" checked/>
  851.                                                                 <label for="largeSwitchSuccess" class="label-success"></label>
  852.                                                             </div>
  853.                                                         </div>
  854.                                                     </div>
  855.                                                 </div>
  856.                                             </div>
  857.                                         </div>
  858.                                     </div>
  859.                                 </div>
  860.                             </div>
  861.                             <!-- Row Closed -->
  863.                             <!-- Row -->
  864.                             <div class="row">
  865.                                 <div class="col-md-12 col-xl-12 col-xs-12 col-sm-12">
  866.                                     <div class="card">
  867.                                         <div class="card-header border-bottom">
  868.                                             <h3 class="card-title">Input Mask</h3>
  869.                                         </div>
  870.                                         <div class="card-body">
  871.                                             <div class="row row-sm">
  872.                                                 <div class="col-lg-6 col-xl-3 col-sm-12">
  873.                                                     <div class="input-group my-1">
  874.                                                             <div class="input-group-text bg-primary-transparent text-primary">
  875.                                                                 Date:
  876.                                                             </div>
  877.                                                             <input class="form-control" id="dateMask" placeholder="MM/DD/YYYY" type="text">
  878.                                                     </div><!-- input-group -->
  879.                                                 </div><!-- col-4 -->
  880.                                                 <div class="col-lg-6 col-xl-3 col-sm-12">
  881.                                                     <div class="input-group my-1">
  882.                                                             <div class="input-group-text bg-primary-transparent text-primary">
  883.                                                                 Phone:
  884.                                                             </div>
  885.                                                         <input class="form-control" id="phoneMask" placeholder="(000) 000-0000" type="text">
  886.                                                     </div><!-- input-group -->
  887.                                                 </div>
  888.                                                 <div class="col-lg-6 col-xl-3 col-sm-12">
  889.                                                     <div class="input-group my-1">
  890.                                                             <div class="input-group-text bg-primary-transparent text-primary">
  891.                                                                 Phone + Ext.:
  892.                                                             </div>
  893.                                                         <input class="form-control" id="phoneExtMask" placeholder="(000) 000-0000 ext 0000" type="text">
  894.                                                     </div><!-- input-group -->
  895.                                                 </div>
  896.                                                 <div class="col-lg-6 col-xl-3 col-sm-12">
  897.                                                     <div class="input-group my-1">
  898.                                                             <div class="input-group-text bg-primary-transparent text-primary">
  899.                                                                 SSN:
  900.                                                             </div><!-- input-group-text -->
  901.                                                         <input class="form-control" id="ssnMask" placeholder="000-00-0000" type="text">
  902.                                                     </div>
  903.                                                 </div>
  904.                                             </div>
  905.                                         </div>
  906.                                     </div>
  907.                                 </div>
  908.                             </div>
  909.                             <!-- Row Closed -->
  911.                             <!-- Row -->
  912.                             <div class="row">
  913.                                 <div class="col-md-12 col-xl-12 col-xs-12 col-sm-12">
  914.                                     <div class="card">
  915.                                         <div class="card-header border-bottom">
  916.                                             <h4 class="card-title mb-1">Color Picker</h4>
  917.                                         </div>
  918.                                         <div class="card-body">
  919.                                             <div class="example">
  920.                                                 <div class="d-sm-flex flex-wrap justify-content-around">
  921.                                                     <div class="text-center my-sm-0 my-2">
  922.                                                         <label for="default-clr-pickr" class="default-pickr">Default</label>
  923.                                                         <input type="color" class="wpx-30 h-30 mx-auto form-control p-0 border-0" value="#77bc21" id="default-clr-pickr">
  924.                                                     </div>
  925.                                                     <div class="text-center my-sm-0 my-2">
  926.                                                         <div class="theme-container color-pickr-btn"></div>
  927.                                                         <div class="pickr-container"></div>
  928.                                                     </div>
  929.                                                     <div class="text-center my-sm-0 my-2">
  930.                                                         <div class="theme-container1 color-pickr-btn"></div>
  931.                                                         <div class="pickr-container1"></div>
  932.                                                     </div>
  933.                                                     <div class="text-center my-sm-0 my-2">
  934.                                                         <div class="theme-container2 color-pickr-btn"></div>
  935.                                                         <div class="pickr-container2"></div>
  936.                                                     </div>
  937.                                                 </div>
  938.                                             </div>
  939.                                         </div>
  940.                                     </div>
  941.                                 </div>
  942.                             </div>
  943.                             <!-- Row Closed -->
  944. {% endblock %}
  946. {% block javascripts %}
  947.    {{parent()}} 
  948.         <!-- INPUT MASK JS-->
  949.         <script src="{{absolute_url(asset('build/plugins/input-mask/jquery.mask.min.js'))}}"></script>
  951.         <!--Internal  jquery.maskedinput js -->
  952.         <script src="{{absolute_url(asset('build/plugins/jquery.maskedinput/jquery.maskedinput.js'))}}"></script>
  954.         <!--Color Picker js-->
  955.         <script src="{{absolute_url(asset('build/plugins/colorpicker/pickr.es5.min.js'))}}"></script>
  957.         <!--Internal Color Picker js-->
  958.          {{ encore_entry_script_tags('js/colorpicker') }}
  960.         <!-- SELECT2 JS -->
  961.         <script src="{{absolute_url(asset('build/plugins/select2/select2.full.min.js'))}}"></script>
  962.         
  963.         <!-- FORM ELEMENTS JS -->
  964.          {{ encore_entry_script_tags('js/form-elements') }}
  965. {% endblock %}