<?php

use Twig\Environment;
use Twig\Error\LoaderError;
use Twig\Error\RuntimeError;
use Twig\Extension\SandboxExtension;
use Twig\Markup;
use Twig\Sandbox\SecurityError;
use Twig\Sandbox\SecurityNotAllowedTagError;
use Twig\Sandbox\SecurityNotAllowedFilterError;
use Twig\Sandbox\SecurityNotAllowedFunctionError;
use Twig\Source;
use Twig\Template;

/* form-advanced.html.twig */
class __TwigTemplate_dbe4b666bef18e3eac9f6daf8c9d3785 extends Template
{
    private $source;
    private $macros = [];

    public function __construct(Environment $env)
    {
        parent::__construct($env);

        $this->source = $this->getSourceContext();

        $this->blocks = [
            'title' => [$this, 'block_title'],
            'css' => [$this, 'block_css'],
            'pagetitle' => [$this, 'block_pagetitle'],
            'body' => [$this, 'block_body'],
            'javascript' => [$this, 'block_javascript'],
        ];
    }

    protected function doGetParent(array $context)
    {
        // line 1
        return "partials/layout-vertical.html.twig";
    }

    protected function doDisplay(array $context, array $blocks = [])
    {
        $macros = $this->macros;
        $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
        $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "template", "form-advanced.html.twig"));

        $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
        $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "template", "form-advanced.html.twig"));

        $this->parent = $this->loadTemplate("partials/layout-vertical.html.twig", "form-advanced.html.twig", 1);
        $this->parent->display($context, array_merge($this->blocks, $blocks));
        
        $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);

        
        $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);

    }

    // line 3
    public function block_title($context, array $blocks = [])
    {
        $macros = $this->macros;
        $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
        $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "title"));

        $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
        $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "title"));

        echo "Form Advanced
";
        
        $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);

        
        $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);

    }

    // line 6
    public function block_css($context, array $blocks = [])
    {
        $macros = $this->macros;
        $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
        $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "css"));

        $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
        $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "css"));

        // line 7
        echo "\t<!-- Select2 css -->
\t<link href=\"/vendor/select2/css/select2.min.css\" rel=\"stylesheet\" type=\"text/css\"/>

\t<!-- Daterangepicker css -->
\t<link href=\"/vendor/daterangepicker/daterangepicker.css\" rel=\"stylesheet\" type=\"text/css\"/>

\t<!-- Bootstrap Touchspin css -->
\t<link href=\"/vendor/bootstrap-touchspin/jquery.bootstrap-touchspin.min.css\" rel=\"stylesheet\" type=\"text/css\"/>

\t<!-- Flatpickr Timepicker css -->
\t<link href=\"/vendor/flatpickr/flatpickr.min.css\" rel=\"stylesheet\" type=\"text/css\"/>
";
        
        $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);

        
        $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);

    }

    // line 20
    public function block_pagetitle($context, array $blocks = [])
    {
        $macros = $this->macros;
        $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
        $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "pagetitle"));

        $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
        $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "pagetitle"));

        // line 21
        echo "\t";
        echo twig_include($this->env, $context, "partials/page-title.html.twig", ["sub_title" => "Forms", "page_title" => "Form Advanced"]);
        echo "
";
        
        $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);

        
        $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);

    }

    // line 24
    public function block_body($context, array $blocks = [])
    {
        $macros = $this->macros;
        $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
        $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "body"));

        $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
        $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "body"));

        // line 25
        echo "\t<div class=\"row\">
\t\t<div class=\"col-12\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Select2</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options.</p>

\t\t\t\t\t<div class=\"row\">
\t\t\t\t\t\t<div class=\"col-lg-6\">
\t\t\t\t\t\t\t<p class=\"mb-1 fw-bold text-muted\">Single Select</p>
\t\t\t\t\t\t\t<p class=\"text-muted fs-14\">
\t\t\t\t\t\t\t\tSelect2 can take a regular select box like this...
\t\t\t\t\t\t\t</p>

\t\t\t\t\t\t\t<select class=\"form-control select2\" data-toggle=\"select2\">
\t\t\t\t\t\t\t\t<option>Select</option>
\t\t\t\t\t\t\t\t<optgroup label=\"Alaskan/Hawaiian Time Zone\">
\t\t\t\t\t\t\t\t\t<option value=\"AK\">Alaska</option>
\t\t\t\t\t\t\t\t\t<option value=\"HI\">Hawaii</option>
\t\t\t\t\t\t\t\t</optgroup>
\t\t\t\t\t\t\t\t<optgroup label=\"Pacific Time Zone\">
\t\t\t\t\t\t\t\t\t<option value=\"CA\">California</option>
\t\t\t\t\t\t\t\t\t<option value=\"NV\">Nevada</option>
\t\t\t\t\t\t\t\t\t<option value=\"OR\">Oregon</option>
\t\t\t\t\t\t\t\t\t<option value=\"WA\">Washington</option>
\t\t\t\t\t\t\t\t</optgroup>
\t\t\t\t\t\t\t\t<optgroup label=\"Mountain Time Zone\">
\t\t\t\t\t\t\t\t\t<option value=\"AZ\">Arizona</option>
\t\t\t\t\t\t\t\t\t<option value=\"CO\">Colorado</option>
\t\t\t\t\t\t\t\t\t<option value=\"ID\">Idaho</option>
\t\t\t\t\t\t\t\t\t<option value=\"MT\">Montana</option>
\t\t\t\t\t\t\t\t\t<option value=\"NE\">Nebraska</option>
\t\t\t\t\t\t\t\t\t<option value=\"NM\">New Mexico</option>
\t\t\t\t\t\t\t\t\t<option value=\"ND\">North Dakota</option>
\t\t\t\t\t\t\t\t\t<option value=\"UT\">Utah</option>
\t\t\t\t\t\t\t\t\t<option value=\"WY\">Wyoming</option>
\t\t\t\t\t\t\t\t</optgroup>
\t\t\t\t\t\t\t\t<optgroup label=\"Central Time Zone\">
\t\t\t\t\t\t\t\t\t<option value=\"AL\">Alabama</option>
\t\t\t\t\t\t\t\t\t<option value=\"AR\">Arkansas</option>
\t\t\t\t\t\t\t\t\t<option value=\"IL\">Illinois</option>
\t\t\t\t\t\t\t\t\t<option value=\"IA\">Iowa</option>
\t\t\t\t\t\t\t\t\t<option value=\"KS\">Kansas</option>
\t\t\t\t\t\t\t\t\t<option value=\"KY\">Kentucky</option>
\t\t\t\t\t\t\t\t\t<option value=\"LA\">Louisiana</option>
\t\t\t\t\t\t\t\t\t<option value=\"MN\">Minnesota</option>
\t\t\t\t\t\t\t\t\t<option value=\"MS\">Mississippi</option>
\t\t\t\t\t\t\t\t\t<option value=\"MO\">Missouri</option>
\t\t\t\t\t\t\t\t\t<option value=\"OK\">Oklahoma</option>
\t\t\t\t\t\t\t\t\t<option value=\"SD\">South Dakota</option>
\t\t\t\t\t\t\t\t\t<option value=\"TX\">Texas</option>
\t\t\t\t\t\t\t\t\t<option value=\"TN\">Tennessee</option>
\t\t\t\t\t\t\t\t\t<option value=\"WI\">Wisconsin</option>
\t\t\t\t\t\t\t\t</optgroup>
\t\t\t\t\t\t\t\t<optgroup label=\"Eastern Time Zone\">
\t\t\t\t\t\t\t\t\t<option value=\"CT\">Connecticut</option>
\t\t\t\t\t\t\t\t\t<option value=\"DE\">Delaware</option>
\t\t\t\t\t\t\t\t\t<option value=\"FL\">Florida</option>
\t\t\t\t\t\t\t\t\t<option value=\"GA\">Georgia</option>
\t\t\t\t\t\t\t\t\t<option value=\"IN\">Indiana</option>
\t\t\t\t\t\t\t\t\t<option value=\"ME\">Maine</option>
\t\t\t\t\t\t\t\t\t<option value=\"MD\">Maryland</option>
\t\t\t\t\t\t\t\t\t<option value=\"MA\">Massachusetts</option>
\t\t\t\t\t\t\t\t\t<option value=\"MI\">Michigan</option>
\t\t\t\t\t\t\t\t\t<option value=\"NH\">New Hampshire</option>
\t\t\t\t\t\t\t\t\t<option value=\"NJ\">New Jersey</option>
\t\t\t\t\t\t\t\t\t<option value=\"NY\">New York</option>
\t\t\t\t\t\t\t\t\t<option value=\"NC\">North Carolina</option>
\t\t\t\t\t\t\t\t\t<option value=\"OH\">Ohio</option>
\t\t\t\t\t\t\t\t\t<option value=\"PA\">Pennsylvania</option>
\t\t\t\t\t\t\t\t\t<option value=\"RI\">Rhode Island</option>
\t\t\t\t\t\t\t\t\t<option value=\"SC\">South Carolina</option>
\t\t\t\t\t\t\t\t\t<option value=\"VT\">Vermont</option>
\t\t\t\t\t\t\t\t\t<option value=\"VA\">Virginia</option>
\t\t\t\t\t\t\t\t\t<option value=\"WV\">West Virginia</option>
\t\t\t\t\t\t\t\t</optgroup>
\t\t\t\t\t\t\t</select>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- end col -->

\t\t\t\t\t\t<div class=\"col-lg-6\">
\t\t\t\t\t\t\t<p class=\"mb-1 fw-bold text-muted\">Multiple Select</p>
\t\t\t\t\t\t\t<p class=\"text-muted fs-14\">
\t\t\t\t\t\t\t\tSelect2 can take a regular select box like this...
\t\t\t\t\t\t\t</p>

\t\t\t\t\t\t\t<select class=\"select2 form-control select2-multiple\" data-toggle=\"select2\" multiple=\"multiple\" data-placeholder=\"Choose ...\">
\t\t\t\t\t\t\t\t<optgroup label=\"Alaskan/Hawaiian Time Zone\">
\t\t\t\t\t\t\t\t\t<option value=\"AK\">Alaska</option>
\t\t\t\t\t\t\t\t\t<option value=\"HI\">Hawaii</option>
\t\t\t\t\t\t\t\t</optgroup>
\t\t\t\t\t\t\t\t<optgroup label=\"Pacific Time Zone\">
\t\t\t\t\t\t\t\t\t<option value=\"CA\">California</option>
\t\t\t\t\t\t\t\t\t<option value=\"NV\">Nevada</option>
\t\t\t\t\t\t\t\t\t<option value=\"OR\">Oregon</option>
\t\t\t\t\t\t\t\t\t<option value=\"WA\">Washington</option>
\t\t\t\t\t\t\t\t</optgroup>
\t\t\t\t\t\t\t\t<optgroup label=\"Mountain Time Zone\">
\t\t\t\t\t\t\t\t\t<option value=\"AZ\">Arizona</option>
\t\t\t\t\t\t\t\t\t<option value=\"CO\">Colorado</option>
\t\t\t\t\t\t\t\t\t<option value=\"ID\">Idaho</option>
\t\t\t\t\t\t\t\t\t<option value=\"MT\">Montana</option>
\t\t\t\t\t\t\t\t\t<option value=\"NE\">Nebraska</option>
\t\t\t\t\t\t\t\t\t<option value=\"NM\">New Mexico</option>
\t\t\t\t\t\t\t\t\t<option value=\"ND\">North Dakota</option>
\t\t\t\t\t\t\t\t\t<option value=\"UT\">Utah</option>
\t\t\t\t\t\t\t\t\t<option value=\"WY\">Wyoming</option>
\t\t\t\t\t\t\t\t</optgroup>
\t\t\t\t\t\t\t\t<optgroup label=\"Central Time Zone\">
\t\t\t\t\t\t\t\t\t<option value=\"AL\">Alabama</option>
\t\t\t\t\t\t\t\t\t<option value=\"AR\">Arkansas</option>
\t\t\t\t\t\t\t\t\t<option value=\"IL\">Illinois</option>
\t\t\t\t\t\t\t\t\t<option value=\"IA\">Iowa</option>
\t\t\t\t\t\t\t\t\t<option value=\"KS\">Kansas</option>
\t\t\t\t\t\t\t\t\t<option value=\"KY\">Kentucky</option>
\t\t\t\t\t\t\t\t\t<option value=\"LA\">Louisiana</option>
\t\t\t\t\t\t\t\t\t<option value=\"MN\">Minnesota</option>
\t\t\t\t\t\t\t\t\t<option value=\"MS\">Mississippi</option>
\t\t\t\t\t\t\t\t\t<option value=\"MO\">Missouri</option>
\t\t\t\t\t\t\t\t\t<option value=\"OK\">Oklahoma</option>
\t\t\t\t\t\t\t\t\t<option value=\"SD\">South Dakota</option>
\t\t\t\t\t\t\t\t\t<option value=\"TX\">Texas</option>
\t\t\t\t\t\t\t\t\t<option value=\"TN\">Tennessee</option>
\t\t\t\t\t\t\t\t\t<option value=\"WI\">Wisconsin</option>
\t\t\t\t\t\t\t\t</optgroup>
\t\t\t\t\t\t\t\t<optgroup label=\"Eastern Time Zone\">
\t\t\t\t\t\t\t\t\t<option value=\"CT\">Connecticut</option>
\t\t\t\t\t\t\t\t\t<option value=\"DE\">Delaware</option>
\t\t\t\t\t\t\t\t\t<option value=\"FL\">Florida</option>
\t\t\t\t\t\t\t\t\t<option value=\"GA\">Georgia</option>
\t\t\t\t\t\t\t\t\t<option value=\"IN\">Indiana</option>
\t\t\t\t\t\t\t\t\t<option value=\"ME\">Maine</option>
\t\t\t\t\t\t\t\t\t<option value=\"MD\">Maryland</option>
\t\t\t\t\t\t\t\t\t<option value=\"MA\">Massachusetts</option>
\t\t\t\t\t\t\t\t\t<option value=\"MI\">Michigan</option>
\t\t\t\t\t\t\t\t\t<option value=\"NH\">New Hampshire</option>
\t\t\t\t\t\t\t\t\t<option value=\"NJ\">New Jersey</option>
\t\t\t\t\t\t\t\t\t<option value=\"NY\">New York</option>
\t\t\t\t\t\t\t\t\t<option value=\"NC\">North Carolina</option>
\t\t\t\t\t\t\t\t\t<option value=\"OH\">Ohio</option>
\t\t\t\t\t\t\t\t\t<option value=\"PA\">Pennsylvania</option>
\t\t\t\t\t\t\t\t\t<option value=\"RI\">Rhode Island</option>
\t\t\t\t\t\t\t\t\t<option value=\"SC\">South Carolina</option>
\t\t\t\t\t\t\t\t\t<option value=\"VT\">Vermont</option>
\t\t\t\t\t\t\t\t\t<option value=\"VA\">Virginia</option>
\t\t\t\t\t\t\t\t\t<option value=\"WV\">West Virginia</option>
\t\t\t\t\t\t\t\t</optgroup>
\t\t\t\t\t\t\t</select>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- end col -->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- end row -->

\t\t\t\t</div>
\t\t\t\t<!-- end card-body-->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col-->
\t</div>
\t<!-- end row-->

\t<div class=\"row\">
\t\t<div class=\"col-12\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Date Range Picker</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">
\t\t\t\t\t\tA JavaScript component for choosing date ranges, dates and times.
\t\t\t\t\t</p>

\t\t\t\t\t<div class=\"row\">
\t\t\t\t\t\t<div
\t\t\t\t\t\t\tclass=\"col-lg-6\">
\t\t\t\t\t\t\t<!-- Date Range -->
\t\t\t\t\t\t\t<div class=\"mb-3\">
\t\t\t\t\t\t\t\t<label class=\"form-label\">Date Range</label>
\t\t\t\t\t\t\t\t<input type=\"text\" class=\"form-control date\" id=\"singledaterange\" data-toggle=\"date-picker\" data-cancel-class=\"btn-warning\">
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>

\t\t\t\t\t\t<div
\t\t\t\t\t\t\tclass=\"col-lg-6\">
\t\t\t\t\t\t\t<!-- Date Range Picker With Times -->
\t\t\t\t\t\t\t<div class=\"mb-3\">
\t\t\t\t\t\t\t\t<label class=\"form-label\">Date Range Picker With Times</label>
\t\t\t\t\t\t\t\t<input type=\"text\" class=\"form-control date\" id=\"daterangetime\" data-toggle=\"date-picker\" data-time-picker=\"true\" data-locale=\"{'format': 'DD/MM hh:mm A'}\">
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>
\t\t\t\t\t</div>

\t\t\t\t\t<div class=\"row\">
\t\t\t\t\t\t<div
\t\t\t\t\t\t\tclass=\"col-lg-6\">
\t\t\t\t\t\t\t<!-- Single Date Picker -->
\t\t\t\t\t\t\t<div>
\t\t\t\t\t\t\t\t<label class=\"form-label\">Single Date Picker</label>
\t\t\t\t\t\t\t\t<input type=\"text\" class=\"form-control date\" id=\"birthdatepicker\" data-toggle=\"date-picker\" data-single-date-picker=\"true\">
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>

\t\t\t\t\t\t<div
\t\t\t\t\t\t\tclass=\"col-lg-6\">
\t\t\t\t\t\t\t<!-- Predefined Date Ranges -->
\t\t\t\t\t\t\t<div>
\t\t\t\t\t\t\t\t<label class=\"form-label\">Predefined Date Ranges</label>
\t\t\t\t\t\t\t\t<div id=\"reportrange\" class=\"form-control\" data-toggle=\"date-picker-range\" data-target-display=\"#selectedValue\" data-cancel-class=\"btn-light\">
\t\t\t\t\t\t\t\t\t<i class=\"ri-calendar-2-line\"></i>&nbsp;
\t\t\t\t\t\t\t\t\t<span id=\"selectedValue\"></span>
\t\t\t\t\t\t\t\t\t<i class=\"ri-arrow-down-s-line\"></i>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>
\t\t\t\t\t</div>

\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col -->
\t</div>
\t<!-- end row -->

\t<div class=\"row\">
\t\t<div class=\"col-12\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Flatpickr - Date picker</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">A lightweight and powerful datetimepicker</p>

\t\t\t\t\t<div class=\"row\">
\t\t\t\t\t\t<div class=\"col-lg-6\">
\t\t\t\t\t\t\t<div class=\"mb-3\">
\t\t\t\t\t\t\t\t<label class=\"form-label\">Basic</label>
\t\t\t\t\t\t\t\t<input type=\"text\" id=\"basic-datepicker\" class=\"form-control\" placeholder=\"Basic datepicker\">
\t\t\t\t\t\t\t</div>

\t\t\t\t\t\t\t<div class=\"mb-3\">
\t\t\t\t\t\t\t\t<label class=\"form-label\">Date & Time</label>
\t\t\t\t\t\t\t\t<input type=\"text\" id=\"datetime-datepicker\" class=\"form-control\" placeholder=\"Date and Time\">
\t\t\t\t\t\t\t</div>

\t\t\t\t\t\t\t<div class=\"mb-3\">
\t\t\t\t\t\t\t\t<label class=\"form-label\">Human-friendly Dates</label>
\t\t\t\t\t\t\t\t<input type=\"text\" id=\"humanfd-datepicker\" class=\"form-control\" placeholder=\"October 9, 2018\">
\t\t\t\t\t\t\t</div>

\t\t\t\t\t\t\t<div class=\"mb-3\">
\t\t\t\t\t\t\t\t<label class=\"form-label\">MinDate and MaxDate</label>
\t\t\t\t\t\t\t\t<input type=\"text\" id=\"minmax-datepicker\" class=\"form-control\" placeholder=\"mindate - maxdate\">
\t\t\t\t\t\t\t</div>

\t\t\t\t\t\t\t<div class=\"mb-3\">
\t\t\t\t\t\t\t\t<label class=\"form-label\">Disabling dates</label>
\t\t\t\t\t\t\t\t<input type=\"text\" id=\"disable-datepicker\" class=\"form-control\" placeholder=\"Disabling dates\">
\t\t\t\t\t\t\t</div>

\t\t\t\t\t\t\t<div class=\"mb-3\">
\t\t\t\t\t\t\t\t<label class=\"form-label\">Selecting multiple dates</label>
\t\t\t\t\t\t\t\t<input type=\"text\" id=\"multiple-datepicker\" class=\"form-control\" placeholder=\"Multiple dates\">
\t\t\t\t\t\t\t</div>

\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- end col -->

\t\t\t\t\t\t<div class=\"col-lg-6 mt-3 mt-lg-0\">
\t\t\t\t\t\t\t<div class=\"mb-3\">
\t\t\t\t\t\t\t\t<label class=\"form-label\">Selecting multiple dates - Conjunction</label>
\t\t\t\t\t\t\t\t<input type=\"text\" id=\"conjunction-datepicker\" class=\"form-control\" placeholder=\"2018-10-10 :: 2018-10-11\">
\t\t\t\t\t\t\t</div>

\t\t\t\t\t\t\t<div class=\"mb-3\">
\t\t\t\t\t\t\t\t<label class=\"form-label\">Range Calendar</label>
\t\t\t\t\t\t\t\t<input type=\"text\" id=\"range-datepicker\" class=\"form-control\" placeholder=\"2018-10-03 to 2018-10-10\">
\t\t\t\t\t\t\t</div>

\t\t\t\t\t\t\t<div>
\t\t\t\t\t\t\t\t<label class=\"form-label\">Inline Calendar</label>
\t\t\t\t\t\t\t\t<input type=\"text\" id=\"inline-datepicker\" class=\"form-control\" placeholder=\"Inline calendar\">
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- end col -->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- end row -->
\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col -->
\t</div>
\t<!-- end row -->

\t<div class=\"row\">
\t\t<div class=\"col-12\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Flatpickr - Time Picker
\t\t\t\t\t</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">A lightweight and powerful datetimepicker</p>

\t\t\t\t\t<div class=\"row\">
\t\t\t\t\t\t<div class=\"col-lg-6\">
\t\t\t\t\t\t\t<div class=\"mb-3\">
\t\t\t\t\t\t\t\t<label class=\"form-label\">Default Time Picker</label>
\t\t\t\t\t\t\t\t<div class=\"input-group\">
\t\t\t\t\t\t\t\t\t<input id=\"basic-timepicker\" type=\"text\" class=\"form-control\" placeholder=\"Basic timepicker\">
\t\t\t\t\t\t\t\t\t<span class=\"input-group-text\">
\t\t\t\t\t\t\t\t\t\t<i class=\"ri-time-line\"></i>
\t\t\t\t\t\t\t\t\t</span>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>

\t\t\t\t\t\t\t<div class=\"mb-0\">
\t\t\t\t\t\t\t\t<label class=\"form-label\">24-hour Time Picker</label>
\t\t\t\t\t\t\t\t<div class=\"input-group\">
\t\t\t\t\t\t\t\t\t<input id=\"24hours-timepicker\" type=\"text\" class=\"form-control\" placeholder=\"16:21\">
\t\t\t\t\t\t\t\t\t<span class=\"input-group-text\">
\t\t\t\t\t\t\t\t\t\t<i class=\"ri-time-line\"></i>
\t\t\t\t\t\t\t\t\t</span>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- end col -->

\t\t\t\t\t\t<div class=\"col-lg-6 mt-3 mt-lg-0\">
\t\t\t\t\t\t\t<div class=\"mb-3\">
\t\t\t\t\t\t\t\t<label class=\"form-label\">Time Picker w/ Limits</label>
\t\t\t\t\t\t\t\t<div class=\"input-group\">
\t\t\t\t\t\t\t\t\t<input id=\"minmax-timepicker\" type=\"text\" class=\"form-control\" placeholder=\"Limits\">
\t\t\t\t\t\t\t\t\t<span class=\"input-group-text\">
\t\t\t\t\t\t\t\t\t\t<i class=\"ri-time-line\"></i>
\t\t\t\t\t\t\t\t\t</span>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>

\t\t\t\t\t\t\t<div class=\"mb-0\">
\t\t\t\t\t\t\t\t<label class=\"form-label\">Preloading Time</label>
\t\t\t\t\t\t\t\t<div class=\"input-group\">
\t\t\t\t\t\t\t\t\t<input id=\"preloading-timepicker\" type=\"text\" class=\"form-control\" placeholder=\"Pick a time\">
\t\t\t\t\t\t\t\t\t<span class=\"input-group-text\">
\t\t\t\t\t\t\t\t\t\t<i class=\"ri-time-line\"></i>
\t\t\t\t\t\t\t\t\t</span>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- end col -->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- end row -->

\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col -->
\t</div>
\t<!-- end row -->

\t<div class=\"row\">
\t\t<div class=\"col-12\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Input Masks</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">
\t\t\t\t\t\tA jQuery Plugin to make masks on form fields and HTML elements.
\t\t\t\t\t</p>

\t\t\t\t\t<div class=\"row\">
\t\t\t\t\t\t<div class=\"col-md-6\">
\t\t\t\t\t\t\t<form action=\"#\">
\t\t\t\t\t\t\t\t<div class=\"mb-3\">
\t\t\t\t\t\t\t\t\t<label class=\"form-label\">Date</label>
\t\t\t\t\t\t\t\t\t<input type=\"text\" class=\"form-control\" placeholder=\"Enter date\" data-toggle=\"input-mask\" data-mask-format=\"00/00/0000\">
\t\t\t\t\t\t\t\t\t<span class=\"fs-13 text-muted\">e.g \"DD/MM/YYYY\"</span>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"mb-3\">
\t\t\t\t\t\t\t\t\t<label class=\"form-label\">Hour</label>
\t\t\t\t\t\t\t\t\t<input type=\"text\" class=\"form-control\" placeholder=\"Enter time\" data-toggle=\"input-mask\" data-mask-format=\"00:00:00\">
\t\t\t\t\t\t\t\t\t<span class=\"fs-13 text-muted\">e.g \"HH:MM:SS\"</span>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"mb-3\">
\t\t\t\t\t\t\t\t\t<label class=\"form-label\">Date & Hour</label>
\t\t\t\t\t\t\t\t\t<input type=\"text\" class=\"form-control\" placeholder=\"Enter date & time\" data-toggle=\"input-mask\" data-mask-format=\"00/00/0000 00:00:00\">
\t\t\t\t\t\t\t\t\t<span class=\"fs-13 text-muted\">e.g \"DD/MM/YYYY HH:MM:SS\"</span>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"mb-3\">
\t\t\t\t\t\t\t\t\t<label class=\"form-label\">ZIP Code</label>
\t\t\t\t\t\t\t\t\t<input type=\"text\" class=\"form-control\" placeholder=\"Enter zip code\" data-toggle=\"input-mask\" data-mask-format=\"00000-000\">
\t\t\t\t\t\t\t\t\t<span class=\"fs-13 text-muted\">e.g \"xxxxx-xxx\"</span>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"mb-3\">
\t\t\t\t\t\t\t\t\t<label class=\"form-label\">Crazy Zip Code</label>
\t\t\t\t\t\t\t\t\t<input type=\"text\" class=\"form-control\" placeholder=\"Enter zip code\" data-toggle=\"input-mask\" data-mask-format=\"0-00-00-00\">
\t\t\t\t\t\t\t\t\t<span class=\"fs-13 text-muted\">e.g \"x-xx-xx-xx\"</span>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"mb-3\">
\t\t\t\t\t\t\t\t\t<label class=\"form-label\">Money</label>
\t\t\t\t\t\t\t\t\t<input type=\"text\" class=\"form-control\" placeholder=\"Enter money\" data-toggle=\"input-mask\" data-mask-format=\"000.000.000.000.000,00\" data-reverse=\"true\">
\t\t\t\t\t\t\t\t\t<span class=\"fs-13 text-muted\">e.g \"Your money\"</span>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div>
\t\t\t\t\t\t\t\t\t<label class=\"form-label\">Money 2</label>
\t\t\t\t\t\t\t\t\t<input type=\"text\" class=\"form-control\" placeholder=\"Enter money\" data-toggle=\"input-mask\" data-mask-format=\"#.##0,00\" data-reverse=\"true\">
\t\t\t\t\t\t\t\t\t<span class=\"fs-13 text-muted\">e.g \"#.##0,00\"</span>
\t\t\t\t\t\t\t\t</div>

\t\t\t\t\t\t\t</form>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- end col -->

\t\t\t\t\t\t<div class=\"col-md-6\">
\t\t\t\t\t\t\t<form action=\"#\">
\t\t\t\t\t\t\t\t<div class=\"mb-3\">
\t\t\t\t\t\t\t\t\t<label class=\"form-label\">Telephone</label>
\t\t\t\t\t\t\t\t\t<input type=\"text\" class=\"form-control\" placeholder=\"Enter telephone\" data-toggle=\"input-mask\" data-mask-format=\"0000-0000\">
\t\t\t\t\t\t\t\t\t<span class=\"fs-13 text-muted\">e.g \"xxxx-xxxx\"</span>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"mb-3\">
\t\t\t\t\t\t\t\t\t<label class=\"form-label\">Telephone with Code Area</label>
\t\t\t\t\t\t\t\t\t<input type=\"text\" class=\"form-control\" placeholder=\"Enter telephone\" data-toggle=\"input-mask\" data-mask-format=\"(00) 0000-0000\">
\t\t\t\t\t\t\t\t\t<span class=\"fs-13 text-muted\">e.g \"(xx) xxxx-xxxx\"</span>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"mb-3\">
\t\t\t\t\t\t\t\t\t<label class=\"form-label\">US Telephone</label>
\t\t\t\t\t\t\t\t\t<input type=\"text\" class=\"form-control\" placeholder=\"Enter US telephone\" data-toggle=\"input-mask\" data-mask-format=\"(000) 000-0000\">
\t\t\t\t\t\t\t\t\t<span class=\"fs-13 text-muted\">e.g \"(xxx) xxx-xxxx\"</span>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"mb-3\">
\t\t\t\t\t\t\t\t\t<label class=\"form-label\">São Paulo Celphones</label>
\t\t\t\t\t\t\t\t\t<input type=\"text\" class=\"form-control\" placeholder=\"Enter telephone\" data-toggle=\"input-mask\" data-mask-format=\"(00) 00000-0000\">
\t\t\t\t\t\t\t\t\t<span class=\"fs-13 text-muted\">e.g \"(xx) xxxxx-xxxx\"</span>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"mb-3\">
\t\t\t\t\t\t\t\t\t<label class=\"form-label\">CPF</label>
\t\t\t\t\t\t\t\t\t<input type=\"text\" class=\"form-control\" placeholder=\"Enter CPF\" data-toggle=\"input-mask\" data-mask-format=\"000.000.000-00\" data-reverse=\"true\">
\t\t\t\t\t\t\t\t\t<span class=\"fs-13 text-muted\">e.g \"xxx.xxx.xxxx-xx\"</span>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"mb-3\">
\t\t\t\t\t\t\t\t\t<label class=\"form-label\">CNPJ</label>
\t\t\t\t\t\t\t\t\t<input type=\"text\" class=\"form-control\" placeholder=\"Enter CNPJ\" data-toggle=\"input-mask\" data-mask-format=\"00.000.000/0000-00\" data-reverse=\"true\">
\t\t\t\t\t\t\t\t\t<span class=\"fs-13 text-muted\">e.g \"xx.xxx.xxx/xxxx-xx\"</span>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div>
\t\t\t\t\t\t\t\t\t<label class=\"form-label\">IP Address</label>
\t\t\t\t\t\t\t\t\t<input type=\"text\" class=\"form-control\" placeholder=\"Enter IP address\" data-toggle=\"input-mask\" data-mask-format=\"099.099.099.099\" data-reverse=\"true\">
\t\t\t\t\t\t\t\t\t<span class=\"fs-13 text-muted\">e.g \"xxx.xxx.xxx.xxx\"</span>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</form>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- end col -->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- end row -->

\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card -->
\t\t</div>
\t\t<!-- end col -->
\t</div>
\t<!-- end row -->

\t<div class=\"row\">
\t\t<div class=\"col-12\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Bootstrap Touchspin</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">
\t\t\t\t\t\tA mobile and touch friendly input spinner component for Bootstrap.
\t\t\t\t\t\t                                            Specify attribute
\t\t\t\t\t\t<code>data-toggle=\"touchspin\"</code>
\t\t\t\t\t\tand your input would be conveterted into touch friendly spinner.
\t\t\t\t\t</p>

\t\t\t\t\t<div class=\"row\">
\t\t\t\t\t\t<div class=\"col-lg-6\">
\t\t\t\t\t\t\t<div class=\"mb-3\">
\t\t\t\t\t\t\t\t<label class=\"form-label\">Using data attributes</label>
\t\t\t\t\t\t\t\t<input data-toggle=\"touchspin\" type=\"text\" value=\"55\">
\t\t\t\t\t\t\t</div>

\t\t\t\t\t\t\t<div class=\"mb-3\">
\t\t\t\t\t\t\t\t<label class=\"form-label\">Example with postfix (large)</label>
\t\t\t\t\t\t\t\t<input data-toggle=\"touchspin\" value=\"18.20\" type=\"text\" data-step=\"0.1\" data-decimals=\"2\" data-bts-postfix=\"%\">
\t\t\t\t\t\t\t</div>

\t\t\t\t\t\t\t<div class=\"mb-3\">
\t\t\t\t\t\t\t\t<label class=\"form-label\">With prefix</label>
\t\t\t\t\t\t\t\t<input data-toggle=\"touchspin\" type=\"text\" data-bts-prefix=\"\$\">
\t\t\t\t\t\t\t</div>

\t\t\t\t\t\t\t<div class=\"mb-0\">
\t\t\t\t\t\t\t\t<label class=\"form-label\">Change button class</label>
\t\t\t\t\t\t\t\t<input data-toggle=\"touchspin\" value=\"77\" type=\"text\" data-bts-button-down-class=\"btn btn-danger\" data-bts-button-up-class=\"btn btn-info\">
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- end col -->

\t\t\t\t\t\t<div class=\"col-lg-6 mt-3 mt-lg-0\">
\t\t\t\t\t\t\t<div class=\"mb-3\">
\t\t\t\t\t\t\t\t<label class=\"form-label\">Init with empty value:</label>
\t\t\t\t\t\t\t\t<input data-toggle=\"touchspin\" type=\"text\">
\t\t\t\t\t\t\t</div>

\t\t\t\t\t\t\t<div class=\"mb-3\">
\t\t\t\t\t\t\t\t<label class=\"form-label\">Max value - (Default value 100)</label>
\t\t\t\t\t\t\t\t<input data-toggle=\"touchspin\" data-bts-max=\"500\" value=\"128\" data-btn-vertical=\"true\" type=\"text\">
\t\t\t\t\t\t\t</div>

\t\t\t\t\t\t\t<div class=\"mb-3\">
\t\t\t\t\t\t\t\t<label class=\"form-label\">With prefix and postfix button</label>
\t\t\t\t\t\t\t\t<input data-toggle=\"touchspin\" data-bts-prefix=\"A Button\" data-bts-prefix-extra-class=\"btn btn-light\" data-bts-postfix=\"A Button\" data-bts-postfix-extra-class=\"btn btn-light\" type=\"text\">
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- end col -->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- end row -->

\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col -->
\t</div>
\t<!-- end row -->

\t<div class=\"row\">
\t\t<div class=\"col-12\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Bootstrap Maxlength</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">
\t\t\t\t\t\tUses the HTML5 attribute \"maxlength\" to work. Just specify
\t\t\t\t\t\t<code>data-toggle=\"maxlength\"</code>
\t\t\t\t\t\tattribute
\t\t\t\t\t\t                                            to have maxlength indication on any input.
\t\t\t\t\t</p>

\t\t\t\t\t<div class=\"row\">
\t\t\t\t\t\t<div class=\"col-lg-6\">
\t\t\t\t\t\t\t<div class=\"mb-3\">
\t\t\t\t\t\t\t\t<label class=\"form-label\">Default usage</label>
\t\t\t\t\t\t\t\t<p class=\"text-muted fs-13\">
\t\t\t\t\t\t\t\t\tThe badge will show up by default when the remaining chars are 10 or less:
\t\t\t\t\t\t\t\t</p>
\t\t\t\t\t\t\t\t<input type=\"text\" class=\"form-control\" placeholder=\"Max 25\" maxlength=\"25\" data-toggle=\"maxlength\">
\t\t\t\t\t\t\t</div>

\t\t\t\t\t\t\t<div class=\"mb-3\">
\t\t\t\t\t\t\t\t<label class=\"form-label\">Threshold value</label>
\t\t\t\t\t\t\t\t<p class=\"text-muted fs-13\">
\t\t\t\t\t\t\t\t\tSatrt displaying the indication when reached to some threshhold. Specift the data attribute
\t\t\t\t\t\t\t\t\t<code>threshold</code>. E.g.
\t\t\t\t\t\t\t\t\t<code>data-threshold=\"12\"</code>
\t\t\t\t\t\t\t\t</p>
\t\t\t\t\t\t\t\t<input type=\"text\" class=\"form-control\" placeholder=\"Max 25\" maxlength=\"25\" data-toggle=\"maxlength\" data-threshold=\"12\">
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- end col -->

\t\t\t\t\t\t<div class=\"col-lg-6 mt-3 mt-lg-0\">
\t\t\t\t\t\t\t<div class=\"mb-3\">
\t\t\t\t\t\t\t\t<label class=\"form-label\">Position</label>
\t\t\t\t\t\t\t\t<p class=\"text-muted fs-13\">
\t\t\t\t\t\t\t\t\tAll you need to do is specify the data attribute
\t\t\t\t\t\t\t\t\t<code>placement</code>. The possible positions are left, top, right, bottom-right, top-right, top-left, 
\t\t\t\t\t\t\t\t\t\t                                                        bottom, bottom-left and centered-right. If none is specified, the positioning will be defauted to 'bottom'.
\t\t\t\t\t\t\t\t\t\t                                                        E.g.
\t\t\t\t\t\t\t\t\t<code>data-placement=\"top\"</code>
\t\t\t\t\t\t\t\t</p>
\t\t\t\t\t\t\t\t<input type=\"text\" class=\"form-control\" placeholder=\"Max 25\" maxlength=\"25\" data-toggle=\"maxlength\" data-placement=\"top\">
\t\t\t\t\t\t\t</div>

\t\t\t\t\t\t\t<div>
\t\t\t\t\t\t\t\t<label class=\"form-label\">Textareas</label>
\t\t\t\t\t\t\t\t<p class=\"text-muted fs-13\">
\t\t\t\t\t\t\t\t\tBootstrap maxlength supports textarea as well as inputs. Even on old IE.
\t\t\t\t\t\t\t\t</p>
\t\t\t\t\t\t\t\t<textarea data-toggle=\"maxlength\" class=\"form-control\" maxlength=\"225\" rows=\"3\" placeholder=\"This textarea has a limit of 225 chars.\"></textarea>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- end col -->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- end row -->

\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col -->
\t</div>
\t<!-- end row -->

\t<div class=\"row\">
\t\t<div class=\"col-12\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Typeahead</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">
\t\t\t\t\t\tTypeahead.js is a fast and fully-featured autocomplete library.
\t\t\t\t\t</p>

\t\t\t\t\t<div class=\"row\">
\t\t\t\t\t\t<div class=\"col-lg-6\">
\t\t\t\t\t\t\t<div class=\"mb-3\">
\t\t\t\t\t\t\t\t<label class=\"form-label\">The Basics</label>
\t\t\t\t\t\t\t\t<input type=\"text\" class=\"form-control\" data-provide=\"typeahead\" id=\"the-basics\" placeholder=\"Basic Example\">
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- end col -->

\t\t\t\t\t\t<div class=\"col-lg-6 mt-3 mt-lg-0\">
\t\t\t\t\t\t\t<div class=\"mb-3\">
\t\t\t\t\t\t\t\t<label class=\"form-label\">Bloodhound (Suggestion Engine)</label>
\t\t\t\t\t\t\t\t<input id=\"bloodhound\" class=\"form-control\" type=\"text\" placeholder=\"States of USA\">
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- end col -->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- end row -->

\t\t\t\t\t<div class=\"row\">
\t\t\t\t\t\t<div class=\"col-lg-6\">
\t\t\t\t\t\t\t<div class=\"mb-3\">
\t\t\t\t\t\t\t\t<label class=\"form-label\">Prefetch</label>
\t\t\t\t\t\t\t\t<input type=\"text\" class=\"form-control\" data-provide=\"typeahead\" id=\"prefetch\" placeholder=\"States of USA\">
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- end col -->

\t\t\t\t\t\t<div class=\"col-lg-6 mt-3 mt-lg-0\">
\t\t\t\t\t\t\t<div class=\"mb-3\">
\t\t\t\t\t\t\t\t<label class=\"form-label\">Remote</label>
\t\t\t\t\t\t\t\t<input type=\"text\" class=\"form-control\" data-provide=\"typeahead\" id=\"remote\" placeholder=\"States of USA\">
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- end col -->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- end row -->

\t\t\t\t\t<div class=\"row\">
\t\t\t\t\t\t<div class=\"col-lg-6\">
\t\t\t\t\t\t\t<div class=\"mb-3\">
\t\t\t\t\t\t\t\t<label class=\"form-label\">Custom Templates</label>
\t\t\t\t\t\t\t\t<input id=\"custom-templates\" class=\"form-control\" type=\"text\" placeholder=\"States of USA\">
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- end col -->

\t\t\t\t\t\t<div class=\"col-lg-6 mt-3 mt-lg-0\">
\t\t\t\t\t\t\t<div class=\"mb-3\">
\t\t\t\t\t\t\t\t<label class=\"form-label\">Default Suggestions</label>
\t\t\t\t\t\t\t\t<input type=\"text\" class=\"form-control\" data-provide=\"typeahead\" id=\"default-suggestions\">
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- end col -->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- end row -->

\t\t\t\t\t<div class=\"row\">
\t\t\t\t\t\t<div class=\"col-lg-6\">
\t\t\t\t\t\t\t<div class=\"mb-0\">
\t\t\t\t\t\t\t\t<label class=\"form-label\">Multiple Datasets</label>
\t\t\t\t\t\t\t\t<input type=\"text\" class=\"form-control\" data-provide=\"typeahead\" id=\"multiple-datasets\">
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- end col -->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- end row -->

\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col -->
\t</div>
\t<!-- end row -->


";
        
        $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);

        
        $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);

    }

    // line 711
    public function block_javascript($context, array $blocks = [])
    {
        $macros = $this->macros;
        $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
        $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "javascript"));

        $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
        $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "javascript"));

        // line 712
        echo "\t<!--  Select2 Plugin Js -->
\t<script src=\"/vendor/select2/js/select2.min.js\"></script>

\t<!-- Daterangepicker Plugin js -->
\t<script src=\"/vendor/daterangepicker/moment.min.js\"></script>
\t<script src=\"/vendor/daterangepicker/daterangepicker.js\"></script>

\t<!-- Input Mask Plugin js -->
\t<script src=\"/vendor/jquery-mask-plugin/jquery.mask.min.js\"></script>

\t<!-- Bootstrap Touchspin Plugin js -->
\t<script src=\"/vendor/bootstrap-touchspin/jquery.bootstrap-touchspin.min.js\"></script>

\t<!-- Bootstrap Maxlength Plugin js -->
\t<script src=\"/vendor/bootstrap-maxlength/bootstrap-maxlength.min.js\"></script>

\t<!-- Typehead Plugin js -->
\t<script src=\"/vendor/handlebars/handlebars.min.js\"></script>
\t<script src=\"/vendor/typeahead.js/typeahead.bundle.min.js\"></script>

\t<!-- Flatpickr Timepicker Plugin js -->
\t<script src=\"/vendor/flatpickr/flatpickr.min.js\"></script>

\t<!-- Typehead Demo js -->
\t<script src=\"/js/pages/demo.typehead.js\"></script>

\t<!-- Timepicker Demo js -->
\t<script src=\"/js/pages/demo.flatpickr.js\"></script>
";
        
        $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);

        
        $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);

    }

    public function getTemplateName()
    {
        return "form-advanced.html.twig";
    }

    public function isTraitable()
    {
        return false;
    }

    public function getDebugInfo()
    {
        return array (  850 => 712,  840 => 711,  146 => 25,  136 => 24,  123 => 21,  113 => 20,  92 => 7,  82 => 6,  62 => 3,  39 => 1,);
    }

    public function getSourceContext()
    {
        return new Source("{% extends 'partials/layout-vertical.html.twig' %}

{% block title %}Form Advanced
{% endblock %}

{% block css %}
\t<!-- Select2 css -->
\t<link href=\"/vendor/select2/css/select2.min.css\" rel=\"stylesheet\" type=\"text/css\"/>

\t<!-- Daterangepicker css -->
\t<link href=\"/vendor/daterangepicker/daterangepicker.css\" rel=\"stylesheet\" type=\"text/css\"/>

\t<!-- Bootstrap Touchspin css -->
\t<link href=\"/vendor/bootstrap-touchspin/jquery.bootstrap-touchspin.min.css\" rel=\"stylesheet\" type=\"text/css\"/>

\t<!-- Flatpickr Timepicker css -->
\t<link href=\"/vendor/flatpickr/flatpickr.min.css\" rel=\"stylesheet\" type=\"text/css\"/>
{% endblock %}

{% block pagetitle %}
\t{{ include('partials/page-title.html.twig', { sub_title: 'Forms', page_title: 'Form Advanced' }) }}
{% endblock %}

{% block body %}
\t<div class=\"row\">
\t\t<div class=\"col-12\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Select2</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options.</p>

\t\t\t\t\t<div class=\"row\">
\t\t\t\t\t\t<div class=\"col-lg-6\">
\t\t\t\t\t\t\t<p class=\"mb-1 fw-bold text-muted\">Single Select</p>
\t\t\t\t\t\t\t<p class=\"text-muted fs-14\">
\t\t\t\t\t\t\t\tSelect2 can take a regular select box like this...
\t\t\t\t\t\t\t</p>

\t\t\t\t\t\t\t<select class=\"form-control select2\" data-toggle=\"select2\">
\t\t\t\t\t\t\t\t<option>Select</option>
\t\t\t\t\t\t\t\t<optgroup label=\"Alaskan/Hawaiian Time Zone\">
\t\t\t\t\t\t\t\t\t<option value=\"AK\">Alaska</option>
\t\t\t\t\t\t\t\t\t<option value=\"HI\">Hawaii</option>
\t\t\t\t\t\t\t\t</optgroup>
\t\t\t\t\t\t\t\t<optgroup label=\"Pacific Time Zone\">
\t\t\t\t\t\t\t\t\t<option value=\"CA\">California</option>
\t\t\t\t\t\t\t\t\t<option value=\"NV\">Nevada</option>
\t\t\t\t\t\t\t\t\t<option value=\"OR\">Oregon</option>
\t\t\t\t\t\t\t\t\t<option value=\"WA\">Washington</option>
\t\t\t\t\t\t\t\t</optgroup>
\t\t\t\t\t\t\t\t<optgroup label=\"Mountain Time Zone\">
\t\t\t\t\t\t\t\t\t<option value=\"AZ\">Arizona</option>
\t\t\t\t\t\t\t\t\t<option value=\"CO\">Colorado</option>
\t\t\t\t\t\t\t\t\t<option value=\"ID\">Idaho</option>
\t\t\t\t\t\t\t\t\t<option value=\"MT\">Montana</option>
\t\t\t\t\t\t\t\t\t<option value=\"NE\">Nebraska</option>
\t\t\t\t\t\t\t\t\t<option value=\"NM\">New Mexico</option>
\t\t\t\t\t\t\t\t\t<option value=\"ND\">North Dakota</option>
\t\t\t\t\t\t\t\t\t<option value=\"UT\">Utah</option>
\t\t\t\t\t\t\t\t\t<option value=\"WY\">Wyoming</option>
\t\t\t\t\t\t\t\t</optgroup>
\t\t\t\t\t\t\t\t<optgroup label=\"Central Time Zone\">
\t\t\t\t\t\t\t\t\t<option value=\"AL\">Alabama</option>
\t\t\t\t\t\t\t\t\t<option value=\"AR\">Arkansas</option>
\t\t\t\t\t\t\t\t\t<option value=\"IL\">Illinois</option>
\t\t\t\t\t\t\t\t\t<option value=\"IA\">Iowa</option>
\t\t\t\t\t\t\t\t\t<option value=\"KS\">Kansas</option>
\t\t\t\t\t\t\t\t\t<option value=\"KY\">Kentucky</option>
\t\t\t\t\t\t\t\t\t<option value=\"LA\">Louisiana</option>
\t\t\t\t\t\t\t\t\t<option value=\"MN\">Minnesota</option>
\t\t\t\t\t\t\t\t\t<option value=\"MS\">Mississippi</option>
\t\t\t\t\t\t\t\t\t<option value=\"MO\">Missouri</option>
\t\t\t\t\t\t\t\t\t<option value=\"OK\">Oklahoma</option>
\t\t\t\t\t\t\t\t\t<option value=\"SD\">South Dakota</option>
\t\t\t\t\t\t\t\t\t<option value=\"TX\">Texas</option>
\t\t\t\t\t\t\t\t\t<option value=\"TN\">Tennessee</option>
\t\t\t\t\t\t\t\t\t<option value=\"WI\">Wisconsin</option>
\t\t\t\t\t\t\t\t</optgroup>
\t\t\t\t\t\t\t\t<optgroup label=\"Eastern Time Zone\">
\t\t\t\t\t\t\t\t\t<option value=\"CT\">Connecticut</option>
\t\t\t\t\t\t\t\t\t<option value=\"DE\">Delaware</option>
\t\t\t\t\t\t\t\t\t<option value=\"FL\">Florida</option>
\t\t\t\t\t\t\t\t\t<option value=\"GA\">Georgia</option>
\t\t\t\t\t\t\t\t\t<option value=\"IN\">Indiana</option>
\t\t\t\t\t\t\t\t\t<option value=\"ME\">Maine</option>
\t\t\t\t\t\t\t\t\t<option value=\"MD\">Maryland</option>
\t\t\t\t\t\t\t\t\t<option value=\"MA\">Massachusetts</option>
\t\t\t\t\t\t\t\t\t<option value=\"MI\">Michigan</option>
\t\t\t\t\t\t\t\t\t<option value=\"NH\">New Hampshire</option>
\t\t\t\t\t\t\t\t\t<option value=\"NJ\">New Jersey</option>
\t\t\t\t\t\t\t\t\t<option value=\"NY\">New York</option>
\t\t\t\t\t\t\t\t\t<option value=\"NC\">North Carolina</option>
\t\t\t\t\t\t\t\t\t<option value=\"OH\">Ohio</option>
\t\t\t\t\t\t\t\t\t<option value=\"PA\">Pennsylvania</option>
\t\t\t\t\t\t\t\t\t<option value=\"RI\">Rhode Island</option>
\t\t\t\t\t\t\t\t\t<option value=\"SC\">South Carolina</option>
\t\t\t\t\t\t\t\t\t<option value=\"VT\">Vermont</option>
\t\t\t\t\t\t\t\t\t<option value=\"VA\">Virginia</option>
\t\t\t\t\t\t\t\t\t<option value=\"WV\">West Virginia</option>
\t\t\t\t\t\t\t\t</optgroup>
\t\t\t\t\t\t\t</select>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- end col -->

\t\t\t\t\t\t<div class=\"col-lg-6\">
\t\t\t\t\t\t\t<p class=\"mb-1 fw-bold text-muted\">Multiple Select</p>
\t\t\t\t\t\t\t<p class=\"text-muted fs-14\">
\t\t\t\t\t\t\t\tSelect2 can take a regular select box like this...
\t\t\t\t\t\t\t</p>

\t\t\t\t\t\t\t<select class=\"select2 form-control select2-multiple\" data-toggle=\"select2\" multiple=\"multiple\" data-placeholder=\"Choose ...\">
\t\t\t\t\t\t\t\t<optgroup label=\"Alaskan/Hawaiian Time Zone\">
\t\t\t\t\t\t\t\t\t<option value=\"AK\">Alaska</option>
\t\t\t\t\t\t\t\t\t<option value=\"HI\">Hawaii</option>
\t\t\t\t\t\t\t\t</optgroup>
\t\t\t\t\t\t\t\t<optgroup label=\"Pacific Time Zone\">
\t\t\t\t\t\t\t\t\t<option value=\"CA\">California</option>
\t\t\t\t\t\t\t\t\t<option value=\"NV\">Nevada</option>
\t\t\t\t\t\t\t\t\t<option value=\"OR\">Oregon</option>
\t\t\t\t\t\t\t\t\t<option value=\"WA\">Washington</option>
\t\t\t\t\t\t\t\t</optgroup>
\t\t\t\t\t\t\t\t<optgroup label=\"Mountain Time Zone\">
\t\t\t\t\t\t\t\t\t<option value=\"AZ\">Arizona</option>
\t\t\t\t\t\t\t\t\t<option value=\"CO\">Colorado</option>
\t\t\t\t\t\t\t\t\t<option value=\"ID\">Idaho</option>
\t\t\t\t\t\t\t\t\t<option value=\"MT\">Montana</option>
\t\t\t\t\t\t\t\t\t<option value=\"NE\">Nebraska</option>
\t\t\t\t\t\t\t\t\t<option value=\"NM\">New Mexico</option>
\t\t\t\t\t\t\t\t\t<option value=\"ND\">North Dakota</option>
\t\t\t\t\t\t\t\t\t<option value=\"UT\">Utah</option>
\t\t\t\t\t\t\t\t\t<option value=\"WY\">Wyoming</option>
\t\t\t\t\t\t\t\t</optgroup>
\t\t\t\t\t\t\t\t<optgroup label=\"Central Time Zone\">
\t\t\t\t\t\t\t\t\t<option value=\"AL\">Alabama</option>
\t\t\t\t\t\t\t\t\t<option value=\"AR\">Arkansas</option>
\t\t\t\t\t\t\t\t\t<option value=\"IL\">Illinois</option>
\t\t\t\t\t\t\t\t\t<option value=\"IA\">Iowa</option>
\t\t\t\t\t\t\t\t\t<option value=\"KS\">Kansas</option>
\t\t\t\t\t\t\t\t\t<option value=\"KY\">Kentucky</option>
\t\t\t\t\t\t\t\t\t<option value=\"LA\">Louisiana</option>
\t\t\t\t\t\t\t\t\t<option value=\"MN\">Minnesota</option>
\t\t\t\t\t\t\t\t\t<option value=\"MS\">Mississippi</option>
\t\t\t\t\t\t\t\t\t<option value=\"MO\">Missouri</option>
\t\t\t\t\t\t\t\t\t<option value=\"OK\">Oklahoma</option>
\t\t\t\t\t\t\t\t\t<option value=\"SD\">South Dakota</option>
\t\t\t\t\t\t\t\t\t<option value=\"TX\">Texas</option>
\t\t\t\t\t\t\t\t\t<option value=\"TN\">Tennessee</option>
\t\t\t\t\t\t\t\t\t<option value=\"WI\">Wisconsin</option>
\t\t\t\t\t\t\t\t</optgroup>
\t\t\t\t\t\t\t\t<optgroup label=\"Eastern Time Zone\">
\t\t\t\t\t\t\t\t\t<option value=\"CT\">Connecticut</option>
\t\t\t\t\t\t\t\t\t<option value=\"DE\">Delaware</option>
\t\t\t\t\t\t\t\t\t<option value=\"FL\">Florida</option>
\t\t\t\t\t\t\t\t\t<option value=\"GA\">Georgia</option>
\t\t\t\t\t\t\t\t\t<option value=\"IN\">Indiana</option>
\t\t\t\t\t\t\t\t\t<option value=\"ME\">Maine</option>
\t\t\t\t\t\t\t\t\t<option value=\"MD\">Maryland</option>
\t\t\t\t\t\t\t\t\t<option value=\"MA\">Massachusetts</option>
\t\t\t\t\t\t\t\t\t<option value=\"MI\">Michigan</option>
\t\t\t\t\t\t\t\t\t<option value=\"NH\">New Hampshire</option>
\t\t\t\t\t\t\t\t\t<option value=\"NJ\">New Jersey</option>
\t\t\t\t\t\t\t\t\t<option value=\"NY\">New York</option>
\t\t\t\t\t\t\t\t\t<option value=\"NC\">North Carolina</option>
\t\t\t\t\t\t\t\t\t<option value=\"OH\">Ohio</option>
\t\t\t\t\t\t\t\t\t<option value=\"PA\">Pennsylvania</option>
\t\t\t\t\t\t\t\t\t<option value=\"RI\">Rhode Island</option>
\t\t\t\t\t\t\t\t\t<option value=\"SC\">South Carolina</option>
\t\t\t\t\t\t\t\t\t<option value=\"VT\">Vermont</option>
\t\t\t\t\t\t\t\t\t<option value=\"VA\">Virginia</option>
\t\t\t\t\t\t\t\t\t<option value=\"WV\">West Virginia</option>
\t\t\t\t\t\t\t\t</optgroup>
\t\t\t\t\t\t\t</select>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- end col -->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- end row -->

\t\t\t\t</div>
\t\t\t\t<!-- end card-body-->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col-->
\t</div>
\t<!-- end row-->

\t<div class=\"row\">
\t\t<div class=\"col-12\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Date Range Picker</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">
\t\t\t\t\t\tA JavaScript component for choosing date ranges, dates and times.
\t\t\t\t\t</p>

\t\t\t\t\t<div class=\"row\">
\t\t\t\t\t\t<div
\t\t\t\t\t\t\tclass=\"col-lg-6\">
\t\t\t\t\t\t\t<!-- Date Range -->
\t\t\t\t\t\t\t<div class=\"mb-3\">
\t\t\t\t\t\t\t\t<label class=\"form-label\">Date Range</label>
\t\t\t\t\t\t\t\t<input type=\"text\" class=\"form-control date\" id=\"singledaterange\" data-toggle=\"date-picker\" data-cancel-class=\"btn-warning\">
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>

\t\t\t\t\t\t<div
\t\t\t\t\t\t\tclass=\"col-lg-6\">
\t\t\t\t\t\t\t<!-- Date Range Picker With Times -->
\t\t\t\t\t\t\t<div class=\"mb-3\">
\t\t\t\t\t\t\t\t<label class=\"form-label\">Date Range Picker With Times</label>
\t\t\t\t\t\t\t\t<input type=\"text\" class=\"form-control date\" id=\"daterangetime\" data-toggle=\"date-picker\" data-time-picker=\"true\" data-locale=\"{'format': 'DD/MM hh:mm A'}\">
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>
\t\t\t\t\t</div>

\t\t\t\t\t<div class=\"row\">
\t\t\t\t\t\t<div
\t\t\t\t\t\t\tclass=\"col-lg-6\">
\t\t\t\t\t\t\t<!-- Single Date Picker -->
\t\t\t\t\t\t\t<div>
\t\t\t\t\t\t\t\t<label class=\"form-label\">Single Date Picker</label>
\t\t\t\t\t\t\t\t<input type=\"text\" class=\"form-control date\" id=\"birthdatepicker\" data-toggle=\"date-picker\" data-single-date-picker=\"true\">
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>

\t\t\t\t\t\t<div
\t\t\t\t\t\t\tclass=\"col-lg-6\">
\t\t\t\t\t\t\t<!-- Predefined Date Ranges -->
\t\t\t\t\t\t\t<div>
\t\t\t\t\t\t\t\t<label class=\"form-label\">Predefined Date Ranges</label>
\t\t\t\t\t\t\t\t<div id=\"reportrange\" class=\"form-control\" data-toggle=\"date-picker-range\" data-target-display=\"#selectedValue\" data-cancel-class=\"btn-light\">
\t\t\t\t\t\t\t\t\t<i class=\"ri-calendar-2-line\"></i>&nbsp;
\t\t\t\t\t\t\t\t\t<span id=\"selectedValue\"></span>
\t\t\t\t\t\t\t\t\t<i class=\"ri-arrow-down-s-line\"></i>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>
\t\t\t\t\t</div>

\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col -->
\t</div>
\t<!-- end row -->

\t<div class=\"row\">
\t\t<div class=\"col-12\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Flatpickr - Date picker</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">A lightweight and powerful datetimepicker</p>

\t\t\t\t\t<div class=\"row\">
\t\t\t\t\t\t<div class=\"col-lg-6\">
\t\t\t\t\t\t\t<div class=\"mb-3\">
\t\t\t\t\t\t\t\t<label class=\"form-label\">Basic</label>
\t\t\t\t\t\t\t\t<input type=\"text\" id=\"basic-datepicker\" class=\"form-control\" placeholder=\"Basic datepicker\">
\t\t\t\t\t\t\t</div>

\t\t\t\t\t\t\t<div class=\"mb-3\">
\t\t\t\t\t\t\t\t<label class=\"form-label\">Date & Time</label>
\t\t\t\t\t\t\t\t<input type=\"text\" id=\"datetime-datepicker\" class=\"form-control\" placeholder=\"Date and Time\">
\t\t\t\t\t\t\t</div>

\t\t\t\t\t\t\t<div class=\"mb-3\">
\t\t\t\t\t\t\t\t<label class=\"form-label\">Human-friendly Dates</label>
\t\t\t\t\t\t\t\t<input type=\"text\" id=\"humanfd-datepicker\" class=\"form-control\" placeholder=\"October 9, 2018\">
\t\t\t\t\t\t\t</div>

\t\t\t\t\t\t\t<div class=\"mb-3\">
\t\t\t\t\t\t\t\t<label class=\"form-label\">MinDate and MaxDate</label>
\t\t\t\t\t\t\t\t<input type=\"text\" id=\"minmax-datepicker\" class=\"form-control\" placeholder=\"mindate - maxdate\">
\t\t\t\t\t\t\t</div>

\t\t\t\t\t\t\t<div class=\"mb-3\">
\t\t\t\t\t\t\t\t<label class=\"form-label\">Disabling dates</label>
\t\t\t\t\t\t\t\t<input type=\"text\" id=\"disable-datepicker\" class=\"form-control\" placeholder=\"Disabling dates\">
\t\t\t\t\t\t\t</div>

\t\t\t\t\t\t\t<div class=\"mb-3\">
\t\t\t\t\t\t\t\t<label class=\"form-label\">Selecting multiple dates</label>
\t\t\t\t\t\t\t\t<input type=\"text\" id=\"multiple-datepicker\" class=\"form-control\" placeholder=\"Multiple dates\">
\t\t\t\t\t\t\t</div>

\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- end col -->

\t\t\t\t\t\t<div class=\"col-lg-6 mt-3 mt-lg-0\">
\t\t\t\t\t\t\t<div class=\"mb-3\">
\t\t\t\t\t\t\t\t<label class=\"form-label\">Selecting multiple dates - Conjunction</label>
\t\t\t\t\t\t\t\t<input type=\"text\" id=\"conjunction-datepicker\" class=\"form-control\" placeholder=\"2018-10-10 :: 2018-10-11\">
\t\t\t\t\t\t\t</div>

\t\t\t\t\t\t\t<div class=\"mb-3\">
\t\t\t\t\t\t\t\t<label class=\"form-label\">Range Calendar</label>
\t\t\t\t\t\t\t\t<input type=\"text\" id=\"range-datepicker\" class=\"form-control\" placeholder=\"2018-10-03 to 2018-10-10\">
\t\t\t\t\t\t\t</div>

\t\t\t\t\t\t\t<div>
\t\t\t\t\t\t\t\t<label class=\"form-label\">Inline Calendar</label>
\t\t\t\t\t\t\t\t<input type=\"text\" id=\"inline-datepicker\" class=\"form-control\" placeholder=\"Inline calendar\">
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- end col -->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- end row -->
\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col -->
\t</div>
\t<!-- end row -->

\t<div class=\"row\">
\t\t<div class=\"col-12\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Flatpickr - Time Picker
\t\t\t\t\t</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">A lightweight and powerful datetimepicker</p>

\t\t\t\t\t<div class=\"row\">
\t\t\t\t\t\t<div class=\"col-lg-6\">
\t\t\t\t\t\t\t<div class=\"mb-3\">
\t\t\t\t\t\t\t\t<label class=\"form-label\">Default Time Picker</label>
\t\t\t\t\t\t\t\t<div class=\"input-group\">
\t\t\t\t\t\t\t\t\t<input id=\"basic-timepicker\" type=\"text\" class=\"form-control\" placeholder=\"Basic timepicker\">
\t\t\t\t\t\t\t\t\t<span class=\"input-group-text\">
\t\t\t\t\t\t\t\t\t\t<i class=\"ri-time-line\"></i>
\t\t\t\t\t\t\t\t\t</span>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>

\t\t\t\t\t\t\t<div class=\"mb-0\">
\t\t\t\t\t\t\t\t<label class=\"form-label\">24-hour Time Picker</label>
\t\t\t\t\t\t\t\t<div class=\"input-group\">
\t\t\t\t\t\t\t\t\t<input id=\"24hours-timepicker\" type=\"text\" class=\"form-control\" placeholder=\"16:21\">
\t\t\t\t\t\t\t\t\t<span class=\"input-group-text\">
\t\t\t\t\t\t\t\t\t\t<i class=\"ri-time-line\"></i>
\t\t\t\t\t\t\t\t\t</span>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- end col -->

\t\t\t\t\t\t<div class=\"col-lg-6 mt-3 mt-lg-0\">
\t\t\t\t\t\t\t<div class=\"mb-3\">
\t\t\t\t\t\t\t\t<label class=\"form-label\">Time Picker w/ Limits</label>
\t\t\t\t\t\t\t\t<div class=\"input-group\">
\t\t\t\t\t\t\t\t\t<input id=\"minmax-timepicker\" type=\"text\" class=\"form-control\" placeholder=\"Limits\">
\t\t\t\t\t\t\t\t\t<span class=\"input-group-text\">
\t\t\t\t\t\t\t\t\t\t<i class=\"ri-time-line\"></i>
\t\t\t\t\t\t\t\t\t</span>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>

\t\t\t\t\t\t\t<div class=\"mb-0\">
\t\t\t\t\t\t\t\t<label class=\"form-label\">Preloading Time</label>
\t\t\t\t\t\t\t\t<div class=\"input-group\">
\t\t\t\t\t\t\t\t\t<input id=\"preloading-timepicker\" type=\"text\" class=\"form-control\" placeholder=\"Pick a time\">
\t\t\t\t\t\t\t\t\t<span class=\"input-group-text\">
\t\t\t\t\t\t\t\t\t\t<i class=\"ri-time-line\"></i>
\t\t\t\t\t\t\t\t\t</span>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- end col -->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- end row -->

\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col -->
\t</div>
\t<!-- end row -->

\t<div class=\"row\">
\t\t<div class=\"col-12\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Input Masks</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">
\t\t\t\t\t\tA jQuery Plugin to make masks on form fields and HTML elements.
\t\t\t\t\t</p>

\t\t\t\t\t<div class=\"row\">
\t\t\t\t\t\t<div class=\"col-md-6\">
\t\t\t\t\t\t\t<form action=\"#\">
\t\t\t\t\t\t\t\t<div class=\"mb-3\">
\t\t\t\t\t\t\t\t\t<label class=\"form-label\">Date</label>
\t\t\t\t\t\t\t\t\t<input type=\"text\" class=\"form-control\" placeholder=\"Enter date\" data-toggle=\"input-mask\" data-mask-format=\"00/00/0000\">
\t\t\t\t\t\t\t\t\t<span class=\"fs-13 text-muted\">e.g \"DD/MM/YYYY\"</span>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"mb-3\">
\t\t\t\t\t\t\t\t\t<label class=\"form-label\">Hour</label>
\t\t\t\t\t\t\t\t\t<input type=\"text\" class=\"form-control\" placeholder=\"Enter time\" data-toggle=\"input-mask\" data-mask-format=\"00:00:00\">
\t\t\t\t\t\t\t\t\t<span class=\"fs-13 text-muted\">e.g \"HH:MM:SS\"</span>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"mb-3\">
\t\t\t\t\t\t\t\t\t<label class=\"form-label\">Date & Hour</label>
\t\t\t\t\t\t\t\t\t<input type=\"text\" class=\"form-control\" placeholder=\"Enter date & time\" data-toggle=\"input-mask\" data-mask-format=\"00/00/0000 00:00:00\">
\t\t\t\t\t\t\t\t\t<span class=\"fs-13 text-muted\">e.g \"DD/MM/YYYY HH:MM:SS\"</span>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"mb-3\">
\t\t\t\t\t\t\t\t\t<label class=\"form-label\">ZIP Code</label>
\t\t\t\t\t\t\t\t\t<input type=\"text\" class=\"form-control\" placeholder=\"Enter zip code\" data-toggle=\"input-mask\" data-mask-format=\"00000-000\">
\t\t\t\t\t\t\t\t\t<span class=\"fs-13 text-muted\">e.g \"xxxxx-xxx\"</span>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"mb-3\">
\t\t\t\t\t\t\t\t\t<label class=\"form-label\">Crazy Zip Code</label>
\t\t\t\t\t\t\t\t\t<input type=\"text\" class=\"form-control\" placeholder=\"Enter zip code\" data-toggle=\"input-mask\" data-mask-format=\"0-00-00-00\">
\t\t\t\t\t\t\t\t\t<span class=\"fs-13 text-muted\">e.g \"x-xx-xx-xx\"</span>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"mb-3\">
\t\t\t\t\t\t\t\t\t<label class=\"form-label\">Money</label>
\t\t\t\t\t\t\t\t\t<input type=\"text\" class=\"form-control\" placeholder=\"Enter money\" data-toggle=\"input-mask\" data-mask-format=\"000.000.000.000.000,00\" data-reverse=\"true\">
\t\t\t\t\t\t\t\t\t<span class=\"fs-13 text-muted\">e.g \"Your money\"</span>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div>
\t\t\t\t\t\t\t\t\t<label class=\"form-label\">Money 2</label>
\t\t\t\t\t\t\t\t\t<input type=\"text\" class=\"form-control\" placeholder=\"Enter money\" data-toggle=\"input-mask\" data-mask-format=\"#.##0,00\" data-reverse=\"true\">
\t\t\t\t\t\t\t\t\t<span class=\"fs-13 text-muted\">e.g \"#.##0,00\"</span>
\t\t\t\t\t\t\t\t</div>

\t\t\t\t\t\t\t</form>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- end col -->

\t\t\t\t\t\t<div class=\"col-md-6\">
\t\t\t\t\t\t\t<form action=\"#\">
\t\t\t\t\t\t\t\t<div class=\"mb-3\">
\t\t\t\t\t\t\t\t\t<label class=\"form-label\">Telephone</label>
\t\t\t\t\t\t\t\t\t<input type=\"text\" class=\"form-control\" placeholder=\"Enter telephone\" data-toggle=\"input-mask\" data-mask-format=\"0000-0000\">
\t\t\t\t\t\t\t\t\t<span class=\"fs-13 text-muted\">e.g \"xxxx-xxxx\"</span>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"mb-3\">
\t\t\t\t\t\t\t\t\t<label class=\"form-label\">Telephone with Code Area</label>
\t\t\t\t\t\t\t\t\t<input type=\"text\" class=\"form-control\" placeholder=\"Enter telephone\" data-toggle=\"input-mask\" data-mask-format=\"(00) 0000-0000\">
\t\t\t\t\t\t\t\t\t<span class=\"fs-13 text-muted\">e.g \"(xx) xxxx-xxxx\"</span>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"mb-3\">
\t\t\t\t\t\t\t\t\t<label class=\"form-label\">US Telephone</label>
\t\t\t\t\t\t\t\t\t<input type=\"text\" class=\"form-control\" placeholder=\"Enter US telephone\" data-toggle=\"input-mask\" data-mask-format=\"(000) 000-0000\">
\t\t\t\t\t\t\t\t\t<span class=\"fs-13 text-muted\">e.g \"(xxx) xxx-xxxx\"</span>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"mb-3\">
\t\t\t\t\t\t\t\t\t<label class=\"form-label\">São Paulo Celphones</label>
\t\t\t\t\t\t\t\t\t<input type=\"text\" class=\"form-control\" placeholder=\"Enter telephone\" data-toggle=\"input-mask\" data-mask-format=\"(00) 00000-0000\">
\t\t\t\t\t\t\t\t\t<span class=\"fs-13 text-muted\">e.g \"(xx) xxxxx-xxxx\"</span>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"mb-3\">
\t\t\t\t\t\t\t\t\t<label class=\"form-label\">CPF</label>
\t\t\t\t\t\t\t\t\t<input type=\"text\" class=\"form-control\" placeholder=\"Enter CPF\" data-toggle=\"input-mask\" data-mask-format=\"000.000.000-00\" data-reverse=\"true\">
\t\t\t\t\t\t\t\t\t<span class=\"fs-13 text-muted\">e.g \"xxx.xxx.xxxx-xx\"</span>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class=\"mb-3\">
\t\t\t\t\t\t\t\t\t<label class=\"form-label\">CNPJ</label>
\t\t\t\t\t\t\t\t\t<input type=\"text\" class=\"form-control\" placeholder=\"Enter CNPJ\" data-toggle=\"input-mask\" data-mask-format=\"00.000.000/0000-00\" data-reverse=\"true\">
\t\t\t\t\t\t\t\t\t<span class=\"fs-13 text-muted\">e.g \"xx.xxx.xxx/xxxx-xx\"</span>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div>
\t\t\t\t\t\t\t\t\t<label class=\"form-label\">IP Address</label>
\t\t\t\t\t\t\t\t\t<input type=\"text\" class=\"form-control\" placeholder=\"Enter IP address\" data-toggle=\"input-mask\" data-mask-format=\"099.099.099.099\" data-reverse=\"true\">
\t\t\t\t\t\t\t\t\t<span class=\"fs-13 text-muted\">e.g \"xxx.xxx.xxx.xxx\"</span>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</form>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- end col -->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- end row -->

\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card -->
\t\t</div>
\t\t<!-- end col -->
\t</div>
\t<!-- end row -->

\t<div class=\"row\">
\t\t<div class=\"col-12\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Bootstrap Touchspin</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">
\t\t\t\t\t\tA mobile and touch friendly input spinner component for Bootstrap.
\t\t\t\t\t\t                                            Specify attribute
\t\t\t\t\t\t<code>data-toggle=\"touchspin\"</code>
\t\t\t\t\t\tand your input would be conveterted into touch friendly spinner.
\t\t\t\t\t</p>

\t\t\t\t\t<div class=\"row\">
\t\t\t\t\t\t<div class=\"col-lg-6\">
\t\t\t\t\t\t\t<div class=\"mb-3\">
\t\t\t\t\t\t\t\t<label class=\"form-label\">Using data attributes</label>
\t\t\t\t\t\t\t\t<input data-toggle=\"touchspin\" type=\"text\" value=\"55\">
\t\t\t\t\t\t\t</div>

\t\t\t\t\t\t\t<div class=\"mb-3\">
\t\t\t\t\t\t\t\t<label class=\"form-label\">Example with postfix (large)</label>
\t\t\t\t\t\t\t\t<input data-toggle=\"touchspin\" value=\"18.20\" type=\"text\" data-step=\"0.1\" data-decimals=\"2\" data-bts-postfix=\"%\">
\t\t\t\t\t\t\t</div>

\t\t\t\t\t\t\t<div class=\"mb-3\">
\t\t\t\t\t\t\t\t<label class=\"form-label\">With prefix</label>
\t\t\t\t\t\t\t\t<input data-toggle=\"touchspin\" type=\"text\" data-bts-prefix=\"\$\">
\t\t\t\t\t\t\t</div>

\t\t\t\t\t\t\t<div class=\"mb-0\">
\t\t\t\t\t\t\t\t<label class=\"form-label\">Change button class</label>
\t\t\t\t\t\t\t\t<input data-toggle=\"touchspin\" value=\"77\" type=\"text\" data-bts-button-down-class=\"btn btn-danger\" data-bts-button-up-class=\"btn btn-info\">
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- end col -->

\t\t\t\t\t\t<div class=\"col-lg-6 mt-3 mt-lg-0\">
\t\t\t\t\t\t\t<div class=\"mb-3\">
\t\t\t\t\t\t\t\t<label class=\"form-label\">Init with empty value:</label>
\t\t\t\t\t\t\t\t<input data-toggle=\"touchspin\" type=\"text\">
\t\t\t\t\t\t\t</div>

\t\t\t\t\t\t\t<div class=\"mb-3\">
\t\t\t\t\t\t\t\t<label class=\"form-label\">Max value - (Default value 100)</label>
\t\t\t\t\t\t\t\t<input data-toggle=\"touchspin\" data-bts-max=\"500\" value=\"128\" data-btn-vertical=\"true\" type=\"text\">
\t\t\t\t\t\t\t</div>

\t\t\t\t\t\t\t<div class=\"mb-3\">
\t\t\t\t\t\t\t\t<label class=\"form-label\">With prefix and postfix button</label>
\t\t\t\t\t\t\t\t<input data-toggle=\"touchspin\" data-bts-prefix=\"A Button\" data-bts-prefix-extra-class=\"btn btn-light\" data-bts-postfix=\"A Button\" data-bts-postfix-extra-class=\"btn btn-light\" type=\"text\">
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- end col -->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- end row -->

\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col -->
\t</div>
\t<!-- end row -->

\t<div class=\"row\">
\t\t<div class=\"col-12\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Bootstrap Maxlength</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">
\t\t\t\t\t\tUses the HTML5 attribute \"maxlength\" to work. Just specify
\t\t\t\t\t\t<code>data-toggle=\"maxlength\"</code>
\t\t\t\t\t\tattribute
\t\t\t\t\t\t                                            to have maxlength indication on any input.
\t\t\t\t\t</p>

\t\t\t\t\t<div class=\"row\">
\t\t\t\t\t\t<div class=\"col-lg-6\">
\t\t\t\t\t\t\t<div class=\"mb-3\">
\t\t\t\t\t\t\t\t<label class=\"form-label\">Default usage</label>
\t\t\t\t\t\t\t\t<p class=\"text-muted fs-13\">
\t\t\t\t\t\t\t\t\tThe badge will show up by default when the remaining chars are 10 or less:
\t\t\t\t\t\t\t\t</p>
\t\t\t\t\t\t\t\t<input type=\"text\" class=\"form-control\" placeholder=\"Max 25\" maxlength=\"25\" data-toggle=\"maxlength\">
\t\t\t\t\t\t\t</div>

\t\t\t\t\t\t\t<div class=\"mb-3\">
\t\t\t\t\t\t\t\t<label class=\"form-label\">Threshold value</label>
\t\t\t\t\t\t\t\t<p class=\"text-muted fs-13\">
\t\t\t\t\t\t\t\t\tSatrt displaying the indication when reached to some threshhold. Specift the data attribute
\t\t\t\t\t\t\t\t\t<code>threshold</code>. E.g.
\t\t\t\t\t\t\t\t\t<code>data-threshold=\"12\"</code>
\t\t\t\t\t\t\t\t</p>
\t\t\t\t\t\t\t\t<input type=\"text\" class=\"form-control\" placeholder=\"Max 25\" maxlength=\"25\" data-toggle=\"maxlength\" data-threshold=\"12\">
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- end col -->

\t\t\t\t\t\t<div class=\"col-lg-6 mt-3 mt-lg-0\">
\t\t\t\t\t\t\t<div class=\"mb-3\">
\t\t\t\t\t\t\t\t<label class=\"form-label\">Position</label>
\t\t\t\t\t\t\t\t<p class=\"text-muted fs-13\">
\t\t\t\t\t\t\t\t\tAll you need to do is specify the data attribute
\t\t\t\t\t\t\t\t\t<code>placement</code>. The possible positions are left, top, right, bottom-right, top-right, top-left, 
\t\t\t\t\t\t\t\t\t\t                                                        bottom, bottom-left and centered-right. If none is specified, the positioning will be defauted to 'bottom'.
\t\t\t\t\t\t\t\t\t\t                                                        E.g.
\t\t\t\t\t\t\t\t\t<code>data-placement=\"top\"</code>
\t\t\t\t\t\t\t\t</p>
\t\t\t\t\t\t\t\t<input type=\"text\" class=\"form-control\" placeholder=\"Max 25\" maxlength=\"25\" data-toggle=\"maxlength\" data-placement=\"top\">
\t\t\t\t\t\t\t</div>

\t\t\t\t\t\t\t<div>
\t\t\t\t\t\t\t\t<label class=\"form-label\">Textareas</label>
\t\t\t\t\t\t\t\t<p class=\"text-muted fs-13\">
\t\t\t\t\t\t\t\t\tBootstrap maxlength supports textarea as well as inputs. Even on old IE.
\t\t\t\t\t\t\t\t</p>
\t\t\t\t\t\t\t\t<textarea data-toggle=\"maxlength\" class=\"form-control\" maxlength=\"225\" rows=\"3\" placeholder=\"This textarea has a limit of 225 chars.\"></textarea>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- end col -->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- end row -->

\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col -->
\t</div>
\t<!-- end row -->

\t<div class=\"row\">
\t\t<div class=\"col-12\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Typeahead</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">
\t\t\t\t\t\tTypeahead.js is a fast and fully-featured autocomplete library.
\t\t\t\t\t</p>

\t\t\t\t\t<div class=\"row\">
\t\t\t\t\t\t<div class=\"col-lg-6\">
\t\t\t\t\t\t\t<div class=\"mb-3\">
\t\t\t\t\t\t\t\t<label class=\"form-label\">The Basics</label>
\t\t\t\t\t\t\t\t<input type=\"text\" class=\"form-control\" data-provide=\"typeahead\" id=\"the-basics\" placeholder=\"Basic Example\">
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- end col -->

\t\t\t\t\t\t<div class=\"col-lg-6 mt-3 mt-lg-0\">
\t\t\t\t\t\t\t<div class=\"mb-3\">
\t\t\t\t\t\t\t\t<label class=\"form-label\">Bloodhound (Suggestion Engine)</label>
\t\t\t\t\t\t\t\t<input id=\"bloodhound\" class=\"form-control\" type=\"text\" placeholder=\"States of USA\">
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- end col -->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- end row -->

\t\t\t\t\t<div class=\"row\">
\t\t\t\t\t\t<div class=\"col-lg-6\">
\t\t\t\t\t\t\t<div class=\"mb-3\">
\t\t\t\t\t\t\t\t<label class=\"form-label\">Prefetch</label>
\t\t\t\t\t\t\t\t<input type=\"text\" class=\"form-control\" data-provide=\"typeahead\" id=\"prefetch\" placeholder=\"States of USA\">
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- end col -->

\t\t\t\t\t\t<div class=\"col-lg-6 mt-3 mt-lg-0\">
\t\t\t\t\t\t\t<div class=\"mb-3\">
\t\t\t\t\t\t\t\t<label class=\"form-label\">Remote</label>
\t\t\t\t\t\t\t\t<input type=\"text\" class=\"form-control\" data-provide=\"typeahead\" id=\"remote\" placeholder=\"States of USA\">
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- end col -->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- end row -->

\t\t\t\t\t<div class=\"row\">
\t\t\t\t\t\t<div class=\"col-lg-6\">
\t\t\t\t\t\t\t<div class=\"mb-3\">
\t\t\t\t\t\t\t\t<label class=\"form-label\">Custom Templates</label>
\t\t\t\t\t\t\t\t<input id=\"custom-templates\" class=\"form-control\" type=\"text\" placeholder=\"States of USA\">
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- end col -->

\t\t\t\t\t\t<div class=\"col-lg-6 mt-3 mt-lg-0\">
\t\t\t\t\t\t\t<div class=\"mb-3\">
\t\t\t\t\t\t\t\t<label class=\"form-label\">Default Suggestions</label>
\t\t\t\t\t\t\t\t<input type=\"text\" class=\"form-control\" data-provide=\"typeahead\" id=\"default-suggestions\">
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- end col -->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- end row -->

\t\t\t\t\t<div class=\"row\">
\t\t\t\t\t\t<div class=\"col-lg-6\">
\t\t\t\t\t\t\t<div class=\"mb-0\">
\t\t\t\t\t\t\t\t<label class=\"form-label\">Multiple Datasets</label>
\t\t\t\t\t\t\t\t<input type=\"text\" class=\"form-control\" data-provide=\"typeahead\" id=\"multiple-datasets\">
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- end col -->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- end row -->

\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col -->
\t</div>
\t<!-- end row -->


{% endblock %}

{% block javascript %}
\t<!--  Select2 Plugin Js -->
\t<script src=\"/vendor/select2/js/select2.min.js\"></script>

\t<!-- Daterangepicker Plugin js -->
\t<script src=\"/vendor/daterangepicker/moment.min.js\"></script>
\t<script src=\"/vendor/daterangepicker/daterangepicker.js\"></script>

\t<!-- Input Mask Plugin js -->
\t<script src=\"/vendor/jquery-mask-plugin/jquery.mask.min.js\"></script>

\t<!-- Bootstrap Touchspin Plugin js -->
\t<script src=\"/vendor/bootstrap-touchspin/jquery.bootstrap-touchspin.min.js\"></script>

\t<!-- Bootstrap Maxlength Plugin js -->
\t<script src=\"/vendor/bootstrap-maxlength/bootstrap-maxlength.min.js\"></script>

\t<!-- Typehead Plugin js -->
\t<script src=\"/vendor/handlebars/handlebars.min.js\"></script>
\t<script src=\"/vendor/typeahead.js/typeahead.bundle.min.js\"></script>

\t<!-- Flatpickr Timepicker Plugin js -->
\t<script src=\"/vendor/flatpickr/flatpickr.min.js\"></script>

\t<!-- Typehead Demo js -->
\t<script src=\"/js/pages/demo.typehead.js\"></script>

\t<!-- Timepicker Demo js -->
\t<script src=\"/js/pages/demo.flatpickr.js\"></script>
{% endblock %}
", "form-advanced.html.twig", "/home/ct9/Desktop/Ishan/Jidox/jidox_symfony/templates/form-advanced.html.twig");
    }
}
