<!-- Style Switcher -->
<aside class="u-ss"
       data-cookies-prefix="{{ SSCookiePrefix }}"
       data-defaults='[{
              "customColor": "{{ SSDefaultCustomColor }}",
              "outerSpaces": "{{ SSDefaultOuterSpaces }}",
              "contentFont": "{{ SSDefaultContentFont }}",
              "headingFont": "{{ SSDefaultHeadingFont }}"
           }]'>
  <div class="u-ss-wrap">
    <header class="u-ss-header">
      <button class="u-ss-toggler g-color-primary" type="button">
        <i class="fa fa-cogs"></i>
      </button>

      <h2 class="u-ss__main-title">Style Switcher
        <span class="u-label g-rounded-3 g-font-size-10 g-bg-lightred g-pos-rel g-top-minus-1 g-ml-5">Beta</span>
      </h2>
    </header>

    <div class="js-ss-scrollbar u-ss-body">
      <form>
        <section class="u-ss-section">
          <div class="u-ss-control-wrap">
            <h3 class="u-ss-section__title">Predefined Styles</h3>
            <select class="js-ss-select js-ss-predefined-style u-ss-select" name="predefined-style" style="width: 100%;"
                    data-placeholder="Select style"
                    data-disable-search="true"
                    data-open-icon="fa fa-angle-down"
                    data-close-icon="fa fa-angle-up">
              <option></option>
              <option id="preDefSMain" value='[{
                    "checkIDs": {"custom-colors": "clr1", "heading-font": "hFnt1", "font": "fnt1", "layout-styles": "layS1", "outer-spaces": "outS1", "custom-bg": "", "predefined-style": "preDefS1"},
                    "preDefStyle": "default"
                  }]' selected>Main Style
              </option>
              <option id="preDefS1" value='[{
                    "checkIDs": {"custom-colors": "clr2", "heading-font": "hFnt2", "font": "fnt2", "layout-styles": "layS2", "outer-spaces": "outS2", "custom-bg": "bg5", "predefined-style": "preDefS2"},
                    "preDefStyle": "{{ root }}assets/style-switcher-predefined-styles/style1.css"
                  }]'>Style 1
              </option>
              <option id="preDefS2" value='[{
                    "checkIDs": {"custom-colors": "clr3", "heading-font": "hFnt3", "font": "fnt3", "layout-styles": "layS3", "outer-spaces": "outS3", "custom-bg": "bg12", "predefined-style": "preDefS3"},
                    "preDefStyle": "{{ root }}assets/style-switcher-predefined-styles/style2.css"
                  }]'>Style 2
              </option>
            </select>
          </div>

          <div class="u-ss-sub-section-wrap">
            <div class="u-ss-sub-section_half">
              <h3 class="u-ss-section__title">Heading Font</h3>
              <select class="js-ss-select js-ss-heading-font u-ss-select" name="heading-font" style="width: 100%;"
                      data-placeholder="Select font"
                      data-disable-search="true"
                      data-open-icon="fa fa-angle-down"
                      data-close-icon="fa fa-angle-up">
                <option></option>
                <option id="hFnt1" value='[
                              {"headingFont":"\"Open Sans\",Helvetica,Arial,sans-serif"}
                            ]' selected>Open Sans
                </option>
                <option id="hFnt2" value='[
                              {"headingFont":"\"Playfair Display\",Helvetica,Arial,serif"}
                            ]'>Playfair Display
                </option>
                <option id="hFnt3" value='[
                              {"headingFont":"\"Roboto\",Helvetica,Arial,sans-serif"}
                            ]'>Roboto
                </option>
                <option id="hFnt4" value='[
                              {"headingFont":"\"Raleway\",Helvetica,Arial,sans-serif"}
                            ]'>Raleway
                </option>
                <option id="hFnt5" value='[
                              {"headingFont":"\"Spectral\",Helvetica,Arial,serif"}
                            ]'>Spectral
                </option>
                <option id="hFnt6" value='[
                              {"headingFont":"\"Rubik\",Helvetica,Arial,sans-serif"}
                            ]'>Rubik
                </option>
              </select>
            </div>

            <div class="u-ss-sub-section_half">
              <h3 class="u-ss-section__title">Content Font</h3>
              <select class="js-ss-select js-ss-font u-ss-select" name="content-font" style="width: 100%;"
                      data-placeholder="Select font"
                      data-disable-search="true"
                      data-open-icon="fa fa-angle-down"
                      data-close-icon="fa fa-angle-up">
                <option></option>
                <option id="fnt1" value='[
                              {"contentFont":"\"Open Sans\",Helvetica,Arial,sans-serif"}
                            ]' selected>Open Sans
                </option>
                <option id="fnt2" value='[
                              {"contentFont":"\"Playfair Display\",Helvetica,Arial,serif"}
                            ]'>Playfair Display
                </option>
                <option id="fnt3" value='[
                              {"contentFont":"\"Roboto\",Helvetica,Arial,sans-serif"}
                            ]'>Roboto
                </option>
                <option id="fnt4" value='[
                              {"contentFont":"\"Raleway\",Helvetica,Arial,sans-serif"}
                            ]'>Raleway
                </option>
                <option id="fnt5" value='[
                              {"contentFont":"\"Spectral\",Helvetica,Arial,serif"}
                            ]'>Spectral
                </option>
                <option id="fnt6" value='[
                              {"contentFont":"\"Rubik\",Helvetica,Arial,sans-serif"}
                            ]'>Rubik
                </option>
              </select>
            </div>
          </div>
        </section>

        <section class="u-ss-section u-ss-section--theme-colors">
          <h3 class="u-ss-section__title">Theme Colors</h3>

          <div id="customColors" class="u-ss-check-section">
            <label class="u-ss-check">
              <input id="clr1" class="js-ss-color" name="custom-colors" type="radio" value='[
                      {"customColor":"#72c02c"}
                    ]'>

              <div class="u-ss-check__item" style="background-color: #72c02c;">
                <i class="fa fa-check" aria-hidden="true"></i>
              </div>
            </label>
            <label class="u-ss-check">
              <input id="clr2" class="js-ss-color" name="custom-colors" type="radio" value='[
                      {"customColor":"#107ef4"}
                    ]'>

              <div class="u-ss-check__item" style="background-color: #107ef4;">
                <i class="fa fa-check" aria-hidden="true"></i>
              </div>
            </label>
            <label class="u-ss-check">
              <input id="clr3" class="js-ss-color" name="custom-colors" type="radio" value='[
                      {"customColor":"#fd9233"}
                    ]'>

              <div class="u-ss-check__item" style="background-color: #fd9233;">
                <i class="fa fa-check" aria-hidden="true"></i>
              </div>
            </label>
            <label class="u-ss-check">
              <input id="clr4" class="js-ss-color" name="custom-colors" type="radio" value='[
                      {"customColor":"#e74b3c"}
                    ]'>

              <div class="u-ss-check__item" style="background-color: #e74b3c;">
                <i class="fa fa-check" aria-hidden="true"></i>
              </div>
            </label>
            <label class="u-ss-check">
              <input id="clr5" class="js-ss-color" name="custom-colors" type="radio" value='[
                      {"customColor":"#111111"}
                    ]'>

              <div class="u-ss-check__item" style="background-color: #111111;">
                <i class="fa fa-check" aria-hidden="true"></i>
              </div>
            </label>
            <label class="u-ss-check">
              <input id="clr6" class="js-ss-color" name="custom-colors" type="radio" value='[
                      {"customColor":"#9b6bcc"}
                    ]'>

              <div class="u-ss-check__item" style="background-color: #9b6bcc;">
                <i class="fa fa-check" aria-hidden="true"></i>
              </div>
            </label>
            <label class="u-ss-check">
              <input id="clr7" class="js-ss-color" name="custom-colors" type="radio" value='[
                      {"customColor":"#e81c62"}
                    ]'>

              <div class="u-ss-check__item" style="background-color: #e81c62;">
                <i class="fa fa-check" aria-hidden="true"></i>
              </div>
            </label>
            <label class="u-ss-check">
              <input id="clr8" class="js-ss-color" name="custom-colors" type="radio" value='[
                      {"customColor":"#29d6e6"}
                    ]'>

              <div class="u-ss-check__item" style="background-color: #29d6e6;">
                <i class="fa fa-check" aria-hidden="true"></i>
              </div>
            </label>
            <label class="u-ss-check">
              <input id="clr9" class="js-ss-color" name="custom-colors" type="radio" value='[
                      {"customColor":"#9c8061"}
                    ]'>

              <div class="u-ss-check__item" style="background-color: #9c8061;">
                <i class="fa fa-check" aria-hidden="true"></i>
              </div>
            </label>
            <label class="u-ss-check">
              <input id="clr10" class="js-ss-color" name="custom-colors" type="radio" value='[
                      {"customColor":"#527bcc"}
                    ]'>

              <div class="u-ss-check__item" style="background-color: #527bcc;">
                <i class="fa fa-check" aria-hidden="true"></i>
              </div>
            </label>
            <label class="u-ss-check">
              <input id="clr11" class="js-ss-color" name="custom-colors" type="radio" value='[
                      {"customColor":"#6639b6"}
                    ]'>

              <div class="u-ss-check__item" style="background-color: #6639b6;">
                <i class="fa fa-check" aria-hidden="true"></i>
              </div>
            </label>
            <label class="u-ss-check">
              <input id="clr12" class="js-ss-color" name="custom-colors" type="radio" value='[
                      {"customColor":"#a10f2b"}
                    ]'>

              <div class="u-ss-check__item" style="background-color: #a10f2b;">
                <i class="fa fa-check" aria-hidden="true"></i>
              </div>
            </label>
            <label class="u-ss-check">
              <input id="clr13" class="js-ss-color" name="custom-colors" type="radio" value='[
                      {"customColor":"#19ba9b"}
                    ]'>

              <div class="u-ss-check__item" style="background-color: #19ba9b;">
                <i class="fa fa-check" aria-hidden="true"></i>
              </div>
            </label>
            <label class="u-ss-check">
              <input id="clr14" class="js-ss-color" name="custom-colors" type="radio" value='[
                      {"customColor":"#4025d0"}
                    ]'>

              <div class="u-ss-check__item" style="background-color: #4025d0;">
                <i class="fa fa-check" aria-hidden="true"></i>
              </div>
            </label>
          </div>
        </section>

        <section class="u-ss-section">
          <h3 class="u-ss-section__title">Custom Color Theme</h3>

          <div id="userColor">
            <div class="u-ss-control-wrap">
              <input class="u-ss__control" type="text" placeholder="Enter your color">
              <input class="js-ss-color-picker form-control" type="text">
            </div>
          </div>
        </section>

        <section class="u-ss-section">
          <h3 class="u-ss-section__title">Layout Styles</h3>

          <div class="u-ss-radio-wrap">
            <div class="u-ss-radio-section">
              <label>
                <input id="layS1" class="js-ss-classes js-ss-option-close" name="layout-styles" type="radio" value="" checked
                       data-selectors="body"
                       data-option-target="#customBG"
                       data-check-item="#bg1">

                <div class="u-ss-radio">Wide</div>
              </label>
            </div>

            <div class="u-ss-radio-section">
              <label>
                <input id="layS2" class="js-ss-classes js-ss-option-open" name="layout-styles" type="radio" value="g-layout-boxed"
                       data-selectors="body"
                       data-option-target="#customBG">

                <div class="u-ss-radio">Boxed</div>
              </label>
            </div>

            <div id="semiboxed" class="u-ss-radio-section"
                 data-modal-target="#resolutionCaution"
                 data-modal-effect="slide">
              <label id="layS3">
                <input class="js-ss-classes js-ss-option-open" name="layout-styles" type="radio" value="g-layout-semiboxed"
                       data-selectors="body"
                       data-option-target="#customBG">

                <div class="u-ss-radio">SemiBoxed</div>
              </label>
            </div>
          </div>

          <h3 class="u-ss-section__title">Outer Spaces</h3>

          <div class="u-ss-radio-wrap">
            <div class="u-ss-radio-section">
              <label>
                <input id="outS1" class="js-ss-classes" name="outer-spaces" type="radio" value="" checked
                       data-selectors="html">

                <div class="u-ss-radio">None</div>
              </label>
            </div>

            <div class="u-ss-radio-section">
              <label>
                <input id="outS2" class="js-ss-classes" name="outer-spaces" type="radio" value="u-outer-space-v1"
                       data-selectors="html">

                <div class="u-ss-radio">20px</div>
              </label>
            </div>

            <div class="u-ss-radio-section">
              <label>
                <input id="outS3" class="js-ss-classes" name="outer-spaces" type="radio" value="u-outer-space-v2"
                       data-selectors="html">

                <div class="u-ss-radio">40px</div>
              </label>
            </div>
          </div>
        </section>

        <div class="u-ss-option">
          <section class="u-ss-section">
            <h3 class="u-ss-section__title">Boxed Background</h3>

            <div id="customBG" class="u-ss-check-section">
              <label class="u-ss-check">
                <input id="bg1" class="js-ss-classes" name="custom-bg" type="radio" value=""
                       data-selectors="body">

                <div class="u-ss-check__item" style="background-image: url({{ root }}assets/img/bg/none-bg.png);">
                  <i class="fa fa-check" aria-hidden="true"></i>
                </div>
              </label>
              <label class="u-ss-check">
                <input id="bg2" class="js-ss-classes" name="custom-bg" type="radio" value="g-bgi-v2"
                       data-selectors="body">

                <div class="u-ss-check__item" style="background-image: url({{ root }}assets/img-temp/1920x1080/img2.jpg);">
                  <i class="fa fa-check" aria-hidden="true"></i>
                </div>
              </label>
              <label class="u-ss-check">
                <input id="bg3" class="js-ss-classes" name="custom-bg" type="radio" value="g-bgi-v3"
                       data-selectors="body">

                <div class="u-ss-check__item" style="background-image: url({{ root }}assets/img-temp/1920x1080/img3.jpg);">
                  <i class="fa fa-check" aria-hidden="true"></i>
                </div>
              </label>
              <label class="u-ss-check">
                <input id="bg4" class="js-ss-classes" name="custom-bg" type="radio" value="g-bgi-v4"
                       data-selectors="body">

                <div class="u-ss-check__item" style="background-image: url({{ root }}assets/img-temp/1920x1080/img4.jpg);">
                  <i class="fa fa-check" aria-hidden="true"></i>
                </div>
              </label>
              <label class="u-ss-check">
                <input id="bg5" class="js-ss-classes" name="custom-bg" type="radio" value="g-bgi-v5"
                       data-selectors="body">

                <div class="u-ss-check__item" style="background-image: url({{ root }}assets/img-temp/1920x1080/img5.jpg);">
                  <i class="fa fa-check" aria-hidden="true"></i>
                </div>
              </label>
              <label class="u-ss-check">
                <input id="bg6" class="js-ss-classes" name="custom-bg" type="radio" value="g-bgi-v6"
                       data-selectors="body">

                <div class="u-ss-check__item" style="background-image: url({{ root }}assets/img-temp/1920x1080/img6.jpg);">
                  <i class="fa fa-check" aria-hidden="true"></i>
                </div>
              </label>
              <label class="u-ss-check">
                <input id="bg7" class="js-ss-classes" name="custom-bg" type="radio" value="g-bgi-v7"
                       data-selectors="body">

                <div class="u-ss-check__item" style="background-image: url({{ root }}assets/img-temp/1920x1080/img7.jpg);">
                  <i class="fa fa-check" aria-hidden="true"></i>
                </div>
              </label>
              <label class="u-ss-check">
                <input id="bg8" class="js-ss-classes" name="custom-bg" type="radio" value="g-bgi-v8"
                       data-selectors="body">

                <div class="u-ss-check__item" style="background-image: url({{ root }}assets/img/bg/pattern/bricks-white.png);">
                  <i class="fa fa-check" aria-hidden="true"></i>
                </div>
              </label>
              <label class="u-ss-check">
                <input id="bg9" class="js-ss-classes" name="custom-bg" type="radio" value="g-bgi-v9"
                       data-selectors="body">

                <div class="u-ss-check__item" style="background-image: url({{ root }}assets/img/bg/pattern/math-dark.png);">
                  <i class="fa fa-check" aria-hidden="true"></i>
                </div>
              </label>
              <label class="u-ss-check">
                <input id="bg10" class="js-ss-classes" name="custom-bg" type="radio" value="g-bgi-v10"
                       data-selectors="body">

                <div class="u-ss-check__item" style="background-image: url({{ root }}assets/img/bg/pattern/figures-light.png);">
                  <i class="fa fa-check" aria-hidden="true"></i>
                </div>
              </label>
              <label class="u-ss-check">
                <input id="bg11" class="js-ss-classes" name="custom-bg" type="radio" value="g-bgi-v11"
                       data-selectors="body">

                <div class="u-ss-check__item" style="background-image: url({{ root }}assets/img/bg/pattern/footer-lodyas.png);">
                  <i class="fa fa-check" aria-hidden="true"></i>
                </div>
              </label>
              <label class="u-ss-check">
                <input id="bg12" class="js-ss-classes" name="custom-bg" type="radio" value="g-bgi-v12"
                       data-selectors="body">

                <div class="u-ss-check__item" style="background-image: url({{ root }}assets/img/bg/pattern/doodles.png);">
                  <i class="fa fa-check" aria-hidden="true"></i>
                </div>
              </label>
              <label class="u-ss-check">
                <input id="bg13" class="js-ss-classes" name="custom-bg" type="radio" value="g-bgi-v13"
                       data-selectors="body">

                <div class="u-ss-check__item" style="background-image: url({{ root }}assets/img/bg/pattern/darkness.png);">
                  <i class="fa fa-check" aria-hidden="true"></i>
                </div>
              </label>
              <label class="u-ss-check">
                <input id="bg14" class="js-ss-classes" name="custom-bg" type="radio" value="g-bgi-v14"
                       data-selectors="body">

                <div class="u-ss-check__item" style="background-image: url({{ root }}assets/img/bg/pattern/memphis-colorful.png);">
                  <i class="fa fa-check" aria-hidden="true"></i>
                </div>
              </label>
            </div>
          </section>
        </div>

        <div class="u-ss-sub-section-wrap">
          <div class="u-ss-sub-section_half">
            <a id="getCSSSkin" class="u-ss-btn u-ss-btn--green" href="#" role="button"
               data-content-target="[id^='less']"
               data-modal-target="#copyModal"
               data-modal-effect="fadein">Get CSS
            </a>
          </div>

          <div class="u-ss-sub-section_half">
            <button class="js-ss-reset u-ss-btn" type="reset">Reset</button>
          </div>
        </div>
      </form>
    </div>
  </div>
</aside>

<div id="resolutionCaution" class="text-left g-max-width-600 g-bg-white g-pa-20" style="display: none;">
  <button type="button" class="close" onclick="Custombox.modal.close();">
    <i class="hs-icon hs-icon-close"></i>
  </button>
  <h4 class="g-mb-20">Screen resolution less than 1400px</h4>
</div>

<div id="copyModal" class="text-left modal-demo g-bg-white g-color-black g-pa-20" style="display: none;"></div>

<!-- CSS -->
<link rel="stylesheet" href="{{ root }}assets/vendor/malihu-scrollbar/jquery.mCustomScrollbar.min.css">
{% if not isDuplicatedChosen %}<link rel="stylesheet" href="{{ root }}assets/vendor/chosen/chosen.css">{% endif %}
<link rel="stylesheet" href="{{ root }}assets/vendor/prism/themes/prism.css">
<link rel="stylesheet" href="{{ root }}assets/vendor/custombox/custombox.min.css">
<link rel="stylesheet" href="{{ root }}assets/style-switcher/vendor/spectrum/spectrum.css">
<link rel="stylesheet" href="{{ root }}assets/style-switcher/vendor/spectrum/themes/sp-dark.css">
<link rel="stylesheet" href="{{ root }}assets/style-switcher/style-switcher.css">
<!-- End CSS -->

<!-- Scripts -->
{% if not isDuplicatedChosen %}<script src="{{ root }}assets/vendor/chosen/chosen.jquery.js"></script>{% endif %}
{% if not isDuplicatedChosen %}<script src="{{ root }}assets/vendor/image-select/src/ImageSelect.jquery.js"></script>{% endif %}
<script src="{{ root }}assets/vendor/malihu-scrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="{{ root }}assets/vendor/custombox/custombox.min.js"></script>
<script src="{{ root }}assets/vendor/clipboard/dist/clipboard.min.js"></script>

<!-- Prism -->
<script src="{{ root }}assets/vendor/prism/prism.js"></script>
<script src="{{ root }}assets/vendor/prism/components/prism-markup.min.js"></script>
<script src="{{ root }}assets/vendor/prism/components/prism-css.min.js"></script>
<script src="{{ root }}assets/vendor/prism/components/prism-clike.min.js"></script>
<script src="{{ root }}assets/vendor/prism/components/prism-javascript.min.js"></script>
<script src="{{ root }}assets/vendor/prism/plugins/toolbar/prism-toolbar.min.js"></script>
<script src="{{ root }}assets/vendor/prism/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>
<!-- End Prism -->

<script src="{{ root }}assets/js/components/hs.scrollbar.js"></script>
{% if not isDuplicatedChosen %}<script src="{{ root }}assets/js/components/hs.select.js"></script>{% endif %}
<script src="{{ root }}assets/js/components/hs.modal-window.js"></script>
<script src="{{ root }}assets/js/components/hs.markup-copy.js"></script>

<script src="{{ root }}assets/style-switcher/vendor/cookiejs/jquery.cookie.js"></script>
<script src="{{ root }}assets/style-switcher/vendor/spectrum/spectrum.js"></script>
<script src="{{ root }}assets/style-switcher/style-switcher.js"></script>
<!-- End Scripts -->
<!-- End Style Switcher -->
