{# Settings #}
{% set root = "../../../" %}
{% set mainNavActive_1 = "shortcodes" %}
{% set sidebarNavActive_1 = "shortcode-base-form-layouts" %}
{% set title = "Form Layouts" %}

{% include "html/assets/include/nunjucks/partials/head.njk" %}
{% include "html/assets/include/nunjucks/partials/core-fonts.njk" %}
{% include "html/assets/include/nunjucks/partials/core-css.njk" %}
{% include "html/assets/include/nunjucks/partials/core-icons.njk" %}
{% include "html/assets/include/nunjucks/partials/css/css-dzsparallaxer.njk" %}
<link rel="stylesheet" href="{{ root }}assets/vendor/animate.css">
<link rel="stylesheet" href="{{ root }}assets/vendor/hs-megamenu/src/hs.megamenu.css">
<link rel="stylesheet" href="{{ root }}assets/vendor/hamburgers/hamburgers.min.css">
<link rel="stylesheet" href="{{ root }}assets/vendor/chosen/chosen.css">
<link rel="stylesheet" href="{{ root }}assets/vendor/jquery-ui/themes/base/jquery-ui.min.css">

{% include "html/assets/include/nunjucks/partials/css/css-showcode.njk" %}

{% include "html/assets/include/nunjucks/partials/css/css-unify.njk" %}
{% include "html/assets/include/nunjucks/partials/css/css-custom.njk" %}
</head>

<body class="u-body--header-side-push-left u-body--header-side-opened u-has-sidebar-navigation g-overflow-x-hidden">
  <main>
    {% include "html/assets/include/nunjucks/partials/blocks/headers/header-main.njk" %}

    {% include "html/assets/include/nunjucks/partials/blocks/sidebars/sidebar-shortcode-nav.njk" %}

    {% include "html/assets/include/nunjucks/partials/blocks/page-title/shortcode-page-title/shortcode-page-title-base.njk" %}

    <section>
      <!-- Form Layouts v1 -->
      <section class="g-py-100">
        <div class="text-center g-mb-50">
          <h2 class="h4 g-mb-0">Process <span class="g-color-primary g-ml-5">#01</span>
          </h2>
        </div>

        <div id="shortcode1">
          <div class="shortcode-html">
            <!-- Programs Filters -->
            <div class="g-bg-img-hero" style="background-image: url({{ root }}assets/include/svg/svg-bg3.svg);">
              <div class="container g-pt-100 g-pb-70">
                <!-- Programs Filter -->
                <div class="row justify-content-center align-items-center g-mb-30">
                  <div class="col-sm-6 col-md-3">
                    <!-- Checkbox -->
                    <ul class="list-inline w-100 u-shadow-v32 g-bg-white text-center g-rounded-30 g-px-10 g-py-13 mr-4 mb-0">
                      <li class="list-inline-item g-mx-10">
                        <label class="form-check-inline u-check g-pl-30 ml-0 g-mr-15 mb-0">
                          <input class="g-hidden-xs-up g-pos-abs g-top-0 g-left-0" name="radGroup1_1" type="radio" checked="">
                          <div class="u-check-icon-font g-absolute-centered--y g-left-0">
                            <i class="fa" data-check-icon="&#xf192" data-uncheck-icon="&#xf1db"></i>
                          </div>
                          A-Z
                        </label>
                      </li>
                      <li class="list-inline-item g-mx-10">
                        <label class="form-check-inline u-check g-pl-30 ml-0 mb-0">
                          <input class="g-hidden-xs-up g-pos-abs g-top-0 g-left-0" name="radGroup1_1" type="radio">
                          <div class="u-check-icon-font g-absolute-centered--y g-left-0">
                            <i class="fa" data-check-icon="&#xf192" data-uncheck-icon="&#xf1db"></i>
                          </div>
                          Z-A
                        </label>
                      </li>
                    </ul>
                    <!-- End Checkbox -->
                  </div>

                  <div class="col-sm-6 col-md-2">
                    <!-- Campus -->
                    <select class="js-custom-select w-100 u-select-v2 u-shadow-v32 g-brd-none g-color-black g-color-primary--hover g-bg-white text-left g-rounded-30 g-pl-25 g-py-12"
                            data-placeholder="Campus"
                            data-open-icon="fa fa-angle-down"
                            data-close-icon="fa fa-angle-up">
                      <option></option>
                      <option class="g-brd-secondary-light-v2 g-color-black g-color-white--active g-bg-primary--active" value="OR">Orlando</option>
                      <option class="g-brd-secondary-light-v2 g-color-black g-color-white--active g-bg-primary--active" value="TO">Toronto</option>
                      <option class="g-brd-secondary-light-v2 g-color-black g-color-white--active g-bg-primary--active" value="VA">Vancouver</option>
                    </select>
                    <!-- End Campus -->
                  </div>
                </div>

                <div class="row">
                  <div class="col-sm-6 col-md-3 g-mb-30">
                    <!-- Intake -->
                    <select class="js-custom-select w-100 u-select-v2 u-shadow-v32 g-brd-none g-color-black g-color-primary--hover g-bg-white text-left g-rounded-30 g-pl-25 g-py-12"
                            data-placeholder="Intake"
                            data-open-icon="fa fa-angle-down"
                            data-close-icon="fa fa-angle-up">
                      <option></option>
                      <option class="g-brd-secondary-light-v2 g-color-black g-color-white--active g-bg-primary--active" value="SP">Spring 2018</option>
                      <option class="g-brd-secondary-light-v2 g-color-black g-color-white--active g-bg-primary--active" value="FA">Fall 2018</option>
                    </select>
                    <!-- End Intake -->
                  </div>

                  <div class="col-sm-6 col-md-3 g-mb-30">
                    <!-- Attendance Type -->
                    <select class="js-custom-select w-100 u-select-v2 u-shadow-v32 g-brd-none g-color-black g-color-primary--hover g-bg-white text-left g-rounded-30 g-pl-25 g-py-12"
                            data-placeholder="Attendance Type"
                            data-open-icon="fa fa-angle-down"
                            data-close-icon="fa fa-angle-up">
                      <option></option>
                      <option class="g-brd-secondary-light-v2 g-color-black g-color-white--active g-bg-primary--active" value="FT">Full-Time</option>
                      <option class="g-brd-secondary-light-v2 g-color-black g-color-white--active g-bg-primary--active" value="PT">Part-Time</option>
                    </select>
                    <!-- End Attendance Type -->
                  </div>

                  <div class="col-sm-6 col-md-3 g-mb-30">
                    <!-- Level of Study -->
                    <select class="js-custom-select w-100 u-select-v2 u-shadow-v32 g-brd-none g-color-black g-color-primary--hover g-bg-white text-left g-rounded-30 g-pl-25 g-py-12"
                            data-placeholder="Level of Study"
                            data-open-icon="fa fa-angle-down"
                            data-close-icon="fa fa-angle-up">
                      <option></option>
                      <option class="g-brd-secondary-light-v2 g-color-black g-color-white--active g-bg-primary--active" value="UG">Undergraduate</option>
                      <option class="g-brd-secondary-light-v2 g-color-black g-color-white--active g-bg-primary--active" value="GR">Graduate</option>
                      <option class="g-brd-secondary-light-v2 g-color-black g-color-white--active g-bg-primary--active" value="PHD">PHD</option>
                    </select>
                    <!-- End Level of Study -->
                  </div>

                  <div class="col-sm-6 col-md-3 g-mb-30">
                    <!-- Area of Study -->
                    <select class="js-custom-select w-100 u-select-v2 u-shadow-v32 g-brd-none g-color-black g-color-primary--hover g-bg-white text-left g-rounded-30 g-pl-25 g-py-12"
                            data-placeholder="Area of Study"
                            data-open-icon="fa fa-angle-down"
                            data-close-icon="fa fa-angle-up">
                      <option></option>
                      <option class="g-brd-secondary-light-v2 g-color-black g-color-white--active g-bg-primary--active" value="PHD-P">Doctor of Philosophy (PhD)</option>
                      <option class="g-brd-secondary-light-v2 g-color-black g-color-white--active g-bg-primary--active" value="MAHSR">Master of Applied Health Services Research</option>
                      <option class="g-brd-secondary-light-v2 g-color-black g-color-white--active g-bg-primary--active" value="MA">Master of Arts</option>
                      <option class="g-brd-secondary-light-v2 g-color-black g-color-white--active g-bg-primary--active" value="MASRS">Master of Arts in Sport and Recreation Studies</option>
                      <option class="g-brd-secondary-light-v2 g-color-black g-color-white--active g-bg-primary--active" value="MA/PHD">Master of Arts/Doctor of Philosophy</option>
                      <option class="g-brd-secondary-light-v2 g-color-black g-color-white--active g-bg-primary--active" value="MBA">Master of Business Administration (Fredericton)</option>
                      <option class="g-brd-secondary-light-v2 g-color-black g-color-white--active g-bg-primary--active" value="MBASJ">Master of Business Administration (Saint John)</option>
                      <option class="g-brd-secondary-light-v2 g-color-black g-color-white--active g-bg-primary--active" value="MCS">Master of Computer Science</option>
                      <option class="g-brd-secondary-light-v2 g-color-black g-color-white--active g-bg-primary--active" value="MCSC">Master of Computer Science by Coursework</option>
                      <option class="g-brd-secondary-light-v2 g-color-black g-color-white--active g-bg-primary--active" value="MED">Master of Education</option>
                      <option class="g-brd-secondary-light-v2 g-color-black g-color-white--active g-bg-primary--active" value="ME">Master of Engineering</option>
                      <option class="g-brd-secondary-light-v2 g-color-black g-color-white--active g-bg-primary--active" value="MEM">Master of Environmental Management</option>
                      <option class="g-brd-secondary-light-v2 g-color-black g-color-white--active g-bg-primary--active" value="MFE">Master of Forest Engineering</option>
                      <option class="g-brd-secondary-light-v2 g-color-black g-color-white--active g-bg-primary--active" value="MF">Master of Forestry</option>
                      <option class="g-brd-secondary-light-v2 g-color-black g-color-white--active g-bg-primary--active" value="MIDST">Master of Interdisciplinary Studies</option>
                      <option class="g-brd-secondary-light-v2 g-color-black g-color-white--active g-bg-primary--active" value="MN">Master of Nursing</option>
                      <option class="g-brd-secondary-light-v2 g-color-black g-color-white--active g-bg-primary--active" value="MQIM">Master of Quantitative Investment Management.</option>
                      <option class="g-brd-secondary-light-v2 g-color-black g-color-white--active g-bg-primary--active" value="MSC">Master of Science</option>
                      <option class="g-brd-secondary-light-v2 g-color-black g-color-white--active g-bg-primary--active" value="MSE">Master of Science in Engineering</option>
                      <option class="g-brd-secondary-light-v2 g-color-black g-color-white--active g-bg-primary--active" value="MSESS">Master of Science in Exercise and Sport Science</option>
                      <option class="g-brd-secondary-light-v2 g-color-black g-color-white--active g-bg-primary--active" value="MSFE">Master of Science in Forest Engineering</option>
                      <option class="g-brd-secondary-light-v2 g-color-black g-color-white--active g-bg-primary--active" value="MSF">Master of Science in Forestry</option>
                      <option class="g-brd-secondary-light-v2 g-color-black g-color-white--active g-bg-primary--active" value="D-MCG">Postgraduate Diploma in Mapping, Charting and Geodesy</option>
                    </select>
                    <!-- End Area of Study -->
                  </div>
                </div>
                <!-- End Programs Filter -->
              </div>
            </div>
            <!-- End Programs Filters -->
          </div>

          <div class="shortcode-styles">
            <!-- CSS Implementing Plugins -->
            <link type="text/plain" rel="stylesheet" href="{{ root }}assets/vendor/slick-carousel/slick/slick.css">
          </div>

          <div class="shortcode-scripts">
            <!-- JS Implementing Plugins -->
            <script src="{{ root }}assets/vendor/chosen/chosen.jquery.js"></script>

            <!-- JS Unify -->
            <script src="{{ root }}assets/js/components/hs.select.js"></script>

            <!-- JS Plugins Init. -->
            <script type="text/plain">
              $(document).ready(function () {
                // initialization of custom select
                $.HSCore.components.HSSelect.init('.js-custom-select');
              });
            </script>
          </div>
        </div>

        {% set SCExtendedClasses = "container g-pos-rel" %}
        {% set contentTarget = "#shortcode1" %}
        {% set modalID = "#modalMarkup" %}
        {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
      </section>
      <!-- End Form Layouts v1 -->

      <hr class="g-brd-gray-light-v4 my-0">

      <!-- Form Layouts v2 -->
      <section class="g-py-100">
        <div class="text-center g-mb-50">
          <h2 class="h4 g-mb-0">Process <span class="g-color-primary g-ml-5">#01</span>
          </h2>
        </div>

        <div id="shortcode2">
          <div class="shortcode-html">
            <!-- Find a Course -->
            <div class="g-bg-img-hero g-bg-pos-top-center g-pos-rel g-z-index-1 g-mt-minus-150" style="background-image: url({{ root }}assets/include/svg/svg-bg5.svg);">
              <div class="container g-pt-150 g-pb-30">
                <form class="row">
                  <div class="col-xl-8 g-mb-30">
                    <div class="g-mb-50">
                      <label class="g-font-weight-500 g-font-size-15 g-pl-30">Search by</label>
                      <input class="form-control u-shadow-v19 g-brd-none g-bg-white g-font-size-16 g-rounded-30 g-px-30 g-py-13 g-mb-30" type="text" placeholder="eg. How to fund your research on Ontario?">
                    </div>

                    <div class="row">
                      <div class="col-sm-6 g-mb-50">
                        <!-- Area of Interest -->
                        <label class="g-font-weight-500 g-font-size-15 g-pl-30">Area of Interest</label>
                        <select class="js-custom-select w-100 u-select-v2 u-shadow-v19 g-brd-none g-color-black g-color-primary--hover g-bg-white text-left g-rounded-30 g-pl-30 g-py-12"
                                  data-placeholder="Area of Interest"
                                  data-open-icon="fa fa-angle-down"
                                  data-close-icon="fa fa-angle-up">
                          <option class="g-brd-secondary-light-v2 g-color-black g-color-white--active g-bg-primary--active" value="">All</option>
                          <option class="g-brd-secondary-light-v2 g-color-black g-color-white--active g-bg-primary--active" value="architecture_creative_arts">Architecture, visual and creative arts</option>
                          <option class="g-brd-secondary-light-v2 g-color-black g-color-white--active g-bg-primary--active" value="arts_social_sciences">Arts and social sciences</option>
                          <option class="g-brd-secondary-light-v2 g-color-black g-color-white--active g-bg-primary--active" value="business_law">Business and law</option>
                          <option class="g-brd-secondary-light-v2 g-color-black g-color-white--active g-bg-primary--active" value="engineering_it">Engineering and IT</option>
                          <option class="g-brd-secondary-light-v2 g-color-black g-color-white--active g-bg-primary--active" value="indigenous">Indigenous</option>
                          <option class="g-brd-secondary-light-v2 g-color-black g-color-white--active g-bg-primary--active" value="medicine_health">Medicine and health</option>
                          <option class="g-brd-secondary-light-v2 g-color-black g-color-white--active g-bg-primary--active" value="natural_sciences">Natural sciences</option>
                          <option class="g-brd-secondary-light-v2 g-color-black g-color-white--active g-bg-primary--active" value="sport">Sport</option>
                          <option class="g-brd-secondary-light-v2 g-color-black g-color-white--active g-bg-primary--active" value="university_general_interest">University and general interest</option>
                        </select>
                        <!-- End Area of Interest -->
                      </div>

                      <div class="col-sm-6 g-mb-50">
                        <!-- Type -->
                        <label class="g-font-weight-500 g-font-size-15 g-pl-30">Type</label>
                        <select class="js-custom-select w-100 u-select-v2 u-shadow-v19 g-brd-none g-color-black g-color-primary--hover g-bg-white text-left g-rounded-30 g-pl-30 g-py-12"
                                  data-placeholder="Type"
                                  data-open-icon="fa fa-angle-down"
                                  data-close-icon="fa fa-angle-up">
                            <option class="g-brd-secondary-light-v2 g-color-black g-color-white--active g-bg-primary--active" value="">All</option>
                            <option class="g-brd-secondary-light-v2 g-color-black g-color-white--active g-bg-primary--active" value="awards_ceremonies">Awards and ceremonies</option>
                            <option class="g-brd-secondary-light-v2 g-color-black g-color-white--active g-bg-primary--active" value="conferences_workshops">Conferences and workshops</option>
                            <option class="g-brd-secondary-light-v2 g-color-black g-color-white--active g-bg-primary--active" value="exhibition_performing_arts">Exhibition and performing arts</option>
                            <option class="g-brd-secondary-light-v2 g-color-black g-color-white--active g-bg-primary--active" value="forums">Lectures, Talks and Forums</option>
                            <option class="g-brd-secondary-light-v2 g-color-black g-color-white--active g-bg-primary--active" value="social_networking">Social and networking</option>
                            <option class="g-brd-secondary-light-v2 g-color-black g-color-white--active g-bg-primary--active" value="special_events">Special events</option>
                            <option class="g-brd-secondary-light-v2 g-color-black g-color-white--active g-bg-primary--active" value="sport">Sport</option>
                            <option class="g-brd-secondary-light-v2 g-color-black g-color-white--active g-bg-primary--active" value="tours">Tours</option>
                        </select>
                        <!-- End Type -->
                      </div>

                      <div class="col-sm-6 g-mb-50">
                        <!-- For -->
                        <label class="g-font-weight-500 g-font-size-15 g-pl-30">For</label>
                        <select class="js-custom-select w-100 u-select-v2 u-shadow-v19 g-brd-none g-color-black g-color-primary--hover g-bg-white text-left g-rounded-30 g-pl-30 g-py-12"
                                  data-placeholder="For"
                                  data-open-icon="fa fa-angle-down"
                                  data-close-icon="fa fa-angle-up">
                            <option class="g-brd-secondary-light-v2 g-color-black g-color-white--active g-bg-primary--active" value="">All</option>
                            <option class="g-brd-secondary-light-v2 g-color-black g-color-white--active g-bg-primary--active" value="alumni_and_friends">Alumni and friends</option>
                            <option class="g-brd-secondary-light-v2 g-color-black g-color-white--active g-bg-primary--active" value="current_students">Current students</option>
                            <option class="g-brd-secondary-light-v2 g-color-black g-color-white--active g-bg-primary--active" value="future_students">Future students</option>
                            <option class="g-brd-secondary-light-v2 g-color-black g-color-white--active g-bg-primary--active" value="public">Public</option>
                            <option class="g-brd-secondary-light-v2 g-color-black g-color-white--active g-bg-primary--active" value="staff">Staff</option>
                        </select>
                        <!-- End For -->
                      </div>

                      <div class="col-sm-6 g-mt-30 g-mb-30">
                        <div class="d-flex">
                          <button class="btn btn-block u-shadow-v32 g-brd-black g-brd-2 g-color-black g-color-white--hover g-bg-transparent g-bg-black--hover g-font-size-16 g-rounded-30 g-py-10 mr-2 g-mt-0" type="button">Reset</button>
                          <button class="btn btn-block u-shadow-v32 g-brd-none g-color-white g-bg-black g-bg-primary--hover g-font-size-16 g-rounded-30 g-py-10 ml-2 g-mt-0" type="button">Search</button>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="col-xl-4 g-mb-30">
                    <!-- Datepicker -->
                    <label class="g-font-weight-500 g-font-size-15">Select single date</label>
                    <div id="datepickerInline" class="u-datepicker-v1 u-shadow-v32 g-brd-none rounded"></div>
                    <!-- End Datepicker -->
                  </div>
                </form>
              </div>
            </div>
            <!-- End Find a Course -->
          </div>

          <div class="shortcode-styles">
            <!-- CSS Implementing Plugins -->
            <link type="text/plain" rel="stylesheet" href="{{ root }}assets/vendor/slick-carousel/slick/slick.css">
            <link type="text/plain" rel="stylesheet" href="{{ root }}assets/vendor/jquery-ui/themes/base/jquery-ui.min.css">
          </div>

          <div class="shortcode-scripts">
            <!-- JS Implementing Plugins -->
            <script src="{{ root }}assets/vendor/chosen/chosen.jquery.js"></script>
            <script src="{{ root }}assets/vendor/jquery-ui/ui/widgets/datepicker.js"></script>

            <!-- JS Unify -->
            <script src="{{ root }}assets/js/components/hs.select.js"></script>
            <script src="{{ root }}assets/js/components/hs.datepicker.js"></script>

            <!-- JS Plugins Init. -->
            <script type="text/plain">
              $(document).ready(function () {
                // initialization of custom select
                $.HSCore.components.HSSelect.init('.js-custom-select');

                // initialization of forms
                $.HSCore.components.HSDatepicker.init('#datepickerInline');
              });
            </script>
          </div>
        </div>

        {% set SCExtendedClasses = "container g-pos-rel" %}
        {% set contentTarget = "#shortcode2" %}
        {% set modalID = "#modalMarkup" %}
        {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
      </section>
      <!-- End Form Layouts v2 -->
    </section>

    {% include "html/assets/include/nunjucks/partials/blocks/cta/cta-main.njk" %}

    {% include "html/assets/include/nunjucks/partials/blocks/footers/footer-main.njk" %}
    {% include "html/assets/include/nunjucks/partials/blocks/footers/copyright-footer-main.njk" %}
    {% include "html/assets/include/nunjucks/partials/blocks/go-to-top/go-to-top-1.njk" %}
  </main>

  {% include "html/assets/include/nunjucks/partials/blocks/modals/modal-markup.njk" %}

  {% include "html/assets/include/nunjucks/partials/core-js.njk" %}

  <!-- JS Implementing Plugins -->
  <script src="{{ root }}assets/vendor/hs-megamenu/src/hs.megamenu.js"></script>
  {% include "html/assets/include/nunjucks/partials/js/js-dzsparallaxer.njk" %}

  {% include "html/assets/include/nunjucks/partials/js/js-jquery-ui-core.njk" %}

  <!-- jQuery UI Helpers -->
  <script src="{{ root }}assets/vendor/chosen/chosen.jquery.js"></script>
  <script src="{{ root }}assets/vendor/jquery-ui/ui/widgets/datepicker.js"></script>
  <script src="{{ root }}assets/vendor/jquery-ui/ui/widgets/menu.js"></script>
  <script src="{{ root }}assets/vendor/jquery-ui/ui/widgets/mouse.js"></script>

  <!-- jQuery UI Widgets -->
  <script src="{{ root }}assets/vendor/jquery-ui/ui/widgets/autocomplete.js"></script>

  <!-- JS Unify -->
  <script src="{{ root }}assets/js/hs.core.js"></script>

  <script src="{{ root }}assets/js/components/hs.header.js"></script>
  <script src="{{ root }}assets/js/helpers/hs.hamburgers.js"></script>
  <script src="{{ root }}assets/js/components/hs.header-side.js"></script>

  <script src="{{ root }}assets/js/components/hs.autocomplete-local-search.js"></script>
  <script src="{{ root }}assets/style-switcher/vendor/cookiejs/jquery.cookie.js"></script>
  <script src="{{ root }}assets/js/helpers/hs.shortcode-filter.js"></script>

  <script src="{{ root }}assets/js/helpers/hs.dropdown.js"></script>
  <script src="{{ root }}assets/js/components/hs.select.js"></script>
  <script src="{{ root }}assets/js/components/hs.datepicker.js"></script>

  <script src="{{ root }}assets/js/components/hs.go-to.js"></script>

  {% include "html/assets/include/nunjucks/partials/js/js-show-code.njk" %}

  <!-- JS Custom -->
  <script src="{{ root }}assets/js/custom.js"></script>

  <!-- JS Plugins Init. -->
  <script>
    $(document).on('ready', function () {
      // initialization of go to
      $.HSCore.components.HSGoTo.init('.js-go-to');

      // initialization of forms
      $.HSCore.components.HSDatepicker.init('#datepickerInline');

      // initialization of custom select
      $.HSCore.components.HSSelect.init('.js-custom-select');
    });

    $(window).on('load', function () {
      // initialization of header
      $.HSCore.components.HSHeader.init($('#js-header'));
      $.HSCore.helpers.HSHamburgers.init('.hamburger');
      $.HSCore.components.HSHeaderSide.init($('#sideNav'));

      // initialization of autocomplet
      $.HSCore.components.HSLocalSearchAutocomplete.init('#u-sidebar-navigation__search-autocomplete');

      // initialization of HSMegaMenu component
      $('.js-mega-menu').HSMegaMenu({
        event: 'hover',
        pageContainer: $('.container'),
        breakpoint: 991
      });
    });
  </script>
</body>
</html>
