<%= getTranslation('menu-link-reasoning') %> <%= getTranslation('menu-link-how-to-use') %> <%= getTranslation('menu-link-how-it-works') %> <%= getTranslation('menu-link-options') %> <%= getTranslation('menu-link-recipes') %>
<%= getTranslation('language-switcher') %>
<%= getTranslation('copyright') %> <%= getTranslation('github') %> dubaua@gmail.com

<%= getTranslation('why-immerser-title') %>

<%= getTranslation('why-immerser-content') %>

<%= getTranslation('terms-title') %>

<%= getTranslation('terms-content') %>

<%= getTranslation('install-title') %>

<%= getTranslation('install-npm-label') %> <%= getTranslation('install-yarn-label') %> <%= getTranslation('install-browser-label') %> 
npm install immerser

yarn add immerser


<script src="https://unpkg.com/immerser@%%VERSION%%/dist/immerser.min.js"></script>

<%= getTranslation('prepare-your-markup-title') %>

<%= getTranslation('prepare-your-markup-content') %> 
<div class="fixed" data-immerser>
  <div class="fixed__pager pager" data-immerser-pager data-immerser-solid="pager"></div>
  <a href="#reasoning" class="fixed__logo logo" data-immerser-solid="logo"><%= getTranslation('immerser') %></a>
  <div class="fixed__menu menu" data-immerser-solid="menu">
    <a href="#reasoning" class="menu__link"><%= getTranslation('menu-link-reasoning') %></a>
    <a href="#how-to-use" class="menu__link"><%= getTranslation('menu-link-how-to-use') %></a>
    <a href="#how-it-works" class="menu__link"><%= getTranslation('menu-link-how-it-works') %></a>
    <a href="#options" class="menu__link"><%= getTranslation('menu-link-options') %></a>
    <a href="#recipes" class="menu__link"><%= getTranslation('menu-link-recipes') %></a>
  </div>
  <div class="fixed__language language" data-immerser-solid="language">
    <a href="/" class="language__link">english</a>
    <a href="/ru.html" class="language__link">по-русски</a>
  </div>
  <div class="fixed__about about" data-immerser-solid="about">
    <%= getTranslation('copyright') %>
    <a href="https://github.com/dubaua/immerser"><%= getTranslation('github') %></a>
    <a href="mailto:dubaua@gmail.com">dubaua@gmail.com</a>
  </div>
</div>

<div data-immerser-layer data-immerser-layer-config='{"logo": "logo--contrast", "pager": "pager--contrast", "social": "social--contrast"}' id="reasoning"></div>
<div data-immerser-layer data-immerser-layer-config='{"menu": "menu--contrast", "about": "about--contrast"}' id="how-to-use"></div>
<div data-immerser-layer data-immerser-layer-config='{"logo": "logo--contrast", "pager": "pager--contrast", "social": "social--contrast"}' id="how-it-works"></div>
<div data-immerser-layer data-immerser-layer-config='{"menu": "menu--contrast", "about": "about--contrast"}' id="options"></div>
<div data-immerser-layer data-immerser-layer-config='{"logo": "logo--contrast", "pager": "pager--contrast", "social": "social--contrast"}' id="recipes"></div>

<%= getTranslation('apply-styles-title') %>

<%= getTranslation('apply-styles-content') %>
<%= require('html-loader!./content/highlighted-styles.html') %>

<%= getTranslation('initialize-immerser-title') %>

<%= getTranslation('initialize-immerser-content') %> 
// <%= getTranslation('dont-import-if-umd-line-1') %>
// <%= getTranslation('dont-import-if-umd-line-2') %>
import Immerser from 'immerser';

const immerserInstance = new Immerser({
  // <%= getTranslation('data-attribute-will-override-this-option-line-1') %>
  // <%= getTranslation('data-attribute-will-override-this-option-line-2') %>
  solidClassnameArray: [
    {
      logo: 'logo--contrast-lg',
      pager: 'pager--contrast-lg',
      language: 'language--contrast-lg',
    },
    {
      pager: 'pager--contrast-only-md',
      menu: 'menu--contrast',
      about: 'about--contrast',
    },
    {
      logo: 'logo--contrast-lg',
      pager: 'pager--contrast-lg',
      language: 'language--contrast-lg',
    },
    {
      logo: 'logo--contrast-only-md',
      pager: 'pager--contrast-only-md',
      language: 'language--contrast-only-md',
      menu: 'menu--contrast',
      about: 'about--contrast',
    },
    {
      logo: 'logo--contrast-lg',
      pager: 'pager--contrast-lg',
      language: 'language--contrast-lg',
    },
  ],
  hasToUpdateHash: true,
  fromViewportWidth: 1024,
  pagerLinkActiveClassname: 'pager__link--active',
  scrollAdjustThreshold: 50,
  scrollAdjustDelay: 600,
  onInit(immerser) {
    // <%= getTranslation('callback-on-init') %>
  },
  onBind(immerser) {
    // <%= getTranslation('callback-on-bind') %>
  },
  onUnbind(immerser) {
    // <%= getTranslation('callback-on-unbind') %>
  },
  onDestroy(immerser) {
    // <%= getTranslation('callback-on-destroy') %>
  },
  onActiveLayerChange(activeIndex, immerser) {
    // <%= getTranslation('callback-on-active-layer-change') %>
  },
});

<%= getTranslation('how-it-works-title') %>

<%= getTranslation('how-it-works-content') %>

<%= getTranslation('options-title') %>

<%= getTranslation('options-content') %>
<%= getTranslation('option') %> <%= getTranslation('type') %> <%= getTranslation('default') %> <%= getTranslation('description') %>
solidClassnameArray array [] <%= getTranslation('option-solidClassnameArray') %>
fromViewportWidth number 0 <%= getTranslation('option-fromViewportWidth') %>
pagerThreshold number 0.5 <%= getTranslation('option-pagerThreshold') %>
hasToUpdateHash boolean false <%= getTranslation('option-hasToUpdateHash') %>
scrollAdjustThreshold number 0 <%= getTranslation('option-scrollAdjustThreshold') %>
scrollAdjustDelay number 600 <%= getTranslation('option-scrollAdjustDelay') %>
pagerLinkActiveClassname string pager-link-active <%= getTranslation('option-pagerLinkActiveClassname') %>
onInit function null <%= getTranslation('option-onInit') %>
onBind function null <%= getTranslation('option-onBind') %>
onUnbind function null <%= getTranslation('option-onUnbind') %>
onDestroy function null <%= getTranslation('option-onDestroy') %>
onActiveLayerChange function null <%= getTranslation('option-onActiveLayerChange') %>

<%= getTranslation('cloning-event-listeners-title') %>

<%= getTranslation('cloning-event-listeners-content') %> 
<div class="fixed" data-immerser>
  <div data-immerser-mask>
    <div data-immerser-mask-inner>
      <!-- <%= getTranslation('your-markup') %> -->
    </div>
  </div>
  <div data-immerser-mask>
    <div data-immerser-mask-inner>
      <!-- <%= getTranslation('your-markup') %> -->
    </div>
  </div>
</div>

<%= getTranslation('handle-clone-hover-title') %>

<%= getTranslation('handle-clone-hover-content') %>
<%= require('html-loader!./content/highlighted-handle-clone-hover.html') %>

<%= getTranslation('handle-dom-change-title') %>

<%= getTranslation('handle-dom-change-content') %>
<%= require('html-loader!./content/highlighted-handle-dom-change.html') %>